From 2ad879629ddf40b72e604915642febd811b51947 Mon Sep 17 00:00:00 2001
From: m4tewoosh <mnowak@cleeng.com>
Date: Wed, 8 Jan 2025 16:39:11 +0100
Subject: [PATCH] feat/MSSDK-2090: Add support for GCash payment method

---
 src/api/Customer/types/getPaymentDetails.types.ts |  3 ++-
 src/appRedux/types/publisherConfigSlice.types.ts  |  3 ++-
 src/assets/images/paymentMethods/gcash.svg        |  6 ++++++
 src/components/PaymentCard/Payment.const.ts       |  6 ++++++
 src/components/PaymentMethod/PaymentMethod.tsx    |  1 +
 src/util/paymentMethodHelper.js                   | 13 +++++++++----
 6 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/paymentMethods/gcash.svg

diff --git a/src/api/Customer/types/getPaymentDetails.types.ts b/src/api/Customer/types/getPaymentDetails.types.ts
index 7c6144b14..104f2c253 100644
--- a/src/api/Customer/types/getPaymentDetails.types.ts
+++ b/src/api/Customer/types/getPaymentDetails.types.ts
@@ -21,7 +21,8 @@ type PaymentDetailCardGooglePay = GeneralPaymentDetail & {
     | 'android'
     | 'ideal'
     | 'bancontact_card'
-    | 'bancontact_mobile';
+    | 'bancontact_mobile'
+    | 'gcash';
 
   paymentMethodSpecificParams: {
     holderName: string;
diff --git a/src/appRedux/types/publisherConfigSlice.types.ts b/src/appRedux/types/publisherConfigSlice.types.ts
index 25eaeff44..932ee7fb9 100644
--- a/src/appRedux/types/publisherConfigSlice.types.ts
+++ b/src/appRedux/types/publisherConfigSlice.types.ts
@@ -36,7 +36,8 @@ export type PaymentMethodName =
   | 'ideal'
   | 'bancontact_card'
   | 'bancontact_mobile'
-  | 'free-offer';
+  | 'free-offer'
+  | 'gcash';
 
 export type PaymentGateway = 'adyen' | 'paypal' | 'free-offer';
 
diff --git a/src/assets/images/paymentMethods/gcash.svg b/src/assets/images/paymentMethods/gcash.svg
new file mode 100644
index 000000000..2434b3bb1
--- /dev/null
+++ b/src/assets/images/paymentMethods/gcash.svg
@@ -0,0 +1,6 @@
+<svg width="72" height="61" viewBox="0 0 72 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M65.0342 30.6293C65.0461 36.0802 63.7663 41.4564 61.2995 46.3172C60.9014 47.0923 60.8077 47.9883 61.0369 48.8289C61.2661 49.6695 61.8017 50.394 62.5381 50.8597C62.9464 51.118 63.4042 51.2881 63.8821 51.3593C64.36 51.4305 64.8475 51.4012 65.3133 51.2732C65.7792 51.1452 66.2133 50.9213 66.5877 50.6159C66.9621 50.3105 67.2686 49.9303 67.4876 49.4996C70.4634 43.6551 72.01 37.1878 72.0001 30.6293C72.0103 24.0822 70.4693 17.6258 67.5034 11.7889C67.2845 11.3579 66.9781 10.9774 66.6036 10.6717C66.2291 10.366 65.7949 10.1418 65.3289 10.0137C64.8628 9.88548 64.375 9.85607 63.8969 9.9273C63.4188 9.99854 62.9608 10.1688 62.5523 10.4273C61.8165 10.8932 61.2815 11.6174 61.0524 12.4576C60.8232 13.2978 60.9164 14.1932 61.3137 14.9682C63.7713 19.8222 65.0462 25.1886 65.0342 30.6293Z" fill="#6FBAF7"/>
+<path d="M53.7727 30.6292C53.7787 34.0085 53.0509 37.3489 51.6395 40.4194C51.2859 41.1877 51.2238 42.0584 51.4647 42.8692C51.7057 43.68 52.2332 44.3755 52.9491 44.8261C53.3693 45.0901 53.8411 45.2613 54.3329 45.3284C54.8246 45.3955 55.3251 45.357 55.8007 45.2152C56.2764 45.0735 56.7163 44.8319 57.0911 44.5066C57.466 44.1813 57.7671 43.7798 57.9743 43.3288C59.8047 39.3457 60.7484 35.0127 60.7402 30.6292C60.7484 26.2573 59.8097 21.9356 57.9885 17.9611C57.7818 17.5097 57.481 17.1076 57.1063 16.7818C56.7316 16.456 56.2916 16.2141 55.8158 16.0722C55.3399 15.9303 54.8393 15.8916 54.3474 15.9589C53.8554 16.0262 53.3835 16.1978 52.9633 16.4622C52.2478 16.9119 51.7202 17.6065 51.479 18.4164C51.2378 19.2263 51.2993 20.0963 51.6521 20.8642C53.0556 23.928 53.779 27.2593 53.7727 30.6292Z" fill="#6FBAF7"/>
+<path d="M30.3662 54.0323C27.2911 54.0408 24.245 53.4392 21.404 52.2625C18.563 51.0857 15.9836 49.3571 13.8152 47.1768C11.635 45.0086 9.90655 42.4295 8.7298 39.5888C7.55306 36.7481 6.95143 33.7022 6.95973 30.6274C6.95122 27.5523 7.55277 24.5062 8.72952 21.6652C9.90627 18.8242 11.6349 16.2448 13.8152 14.0764C15.9836 11.896 18.563 10.1674 21.404 8.99069C24.245 7.81394 27.2911 7.21241 30.3662 7.22091C35.5409 7.19871 40.5738 8.91135 44.6609 12.0852C45.3296 12.6057 46.1651 12.8644 47.0109 12.813C47.8567 12.7616 48.6547 12.4036 49.2555 11.806C49.6048 11.4569 49.8756 11.0372 50.0498 10.5751C50.224 10.113 50.2975 9.61899 50.2656 9.12616C50.2336 8.63333 50.0968 8.153 49.8644 7.71725C49.632 7.28149 49.3093 6.90035 48.9178 6.59928C43.6111 2.48142 37.0831 0.250108 30.3662 0.258161C26.3773 0.247693 22.4259 1.02819 18.7405 2.55454C15.0552 4.08089 11.7091 6.32278 8.89567 9.15054C6.06663 11.9641 3.82372 15.3109 2.2968 18.9971C0.769876 22.6834 -0.0107431 26.6359 0.000111667 30.6258C-0.00185956 34.6147 0.782812 38.5648 2.30922 42.25C3.83563 45.9353 6.07382 49.2834 8.89567 52.1026C11.7097 54.932 15.057 57.1753 18.7437 58.7025C22.4305 60.2297 26.3835 61.0105 30.3741 60.9998C37.1111 61.0186 43.6603 58.78 48.9762 54.6413C49.3595 54.3422 49.6749 53.9652 49.9016 53.535C50.1282 53.1048 50.2608 52.6314 50.2906 52.1462C50.3204 51.6609 50.2468 51.1748 50.0746 50.7201C49.9024 50.2654 49.6356 49.8525 49.2917 49.5088L49.2176 49.4362C48.628 48.8463 47.8435 48.4915 47.0111 48.4384C46.1787 48.3852 45.3555 48.6373 44.6957 49.1474C40.5955 52.3243 35.5531 54.0433 30.3662 54.0323Z" fill="#007CFF"/>
+<path d="M48.5683 28.1512C47.911 27.4937 47.0194 27.1242 46.0896 27.1241L33.8949 27.1382C32.965 27.1387 32.0733 27.5084 31.4158 28.1661C30.7584 28.8238 30.3891 29.7157 30.3891 30.6457C30.3891 31.576 30.7586 32.4683 31.4163 33.1264C32.074 33.7844 32.9661 34.1542 33.8965 34.1546H33.9186L42.0694 34.1436C41.2881 36.7293 39.6721 38.9833 37.4741 40.5533C35.276 42.1233 32.6198 42.9209 29.9205 42.8215C23.3301 42.5801 18.0871 37.0546 18.177 30.4611C18.221 27.2541 19.5258 24.1933 21.8091 21.941C24.0925 19.6886 27.1708 18.4258 30.3781 18.4257C32.6747 18.4198 34.9258 19.0666 36.8691 20.2907C37.5449 20.7117 38.3437 20.8908 39.1345 20.7985C39.9254 20.7062 40.6615 20.348 41.2222 19.7826C41.5927 19.4131 41.8753 18.965 42.0493 18.4715C42.2233 17.978 42.2841 17.4517 42.2273 16.9315C42.1705 16.4113 41.9975 15.9105 41.7211 15.4662C41.4447 15.0219 41.072 14.6454 40.6305 14.3645C36.4604 11.7233 31.3721 10.7671 26.2174 11.84C22.6048 12.6048 19.2943 14.4083 16.6926 17.0288C14.0908 19.6493 12.3112 22.9727 11.5724 26.5907C9.04795 38.9432 18.4626 49.8426 30.3781 49.8426C35.473 49.8368 40.3577 47.8102 43.9604 44.2075C47.5631 40.6048 49.5896 35.7201 49.5955 30.6252C49.5935 29.6972 49.2243 28.8077 48.5683 28.1512Z" fill="#002CB8"/>
+</svg>
diff --git a/src/components/PaymentCard/Payment.const.ts b/src/components/PaymentCard/Payment.const.ts
index 44437a884..7968ce33e 100644
--- a/src/components/PaymentCard/Payment.const.ts
+++ b/src/components/PaymentCard/Payment.const.ts
@@ -12,6 +12,7 @@ import Discover from 'assets/images/paymentMethods/discover.svg';
 import Diners from 'assets/images/paymentMethods/diners.svg';
 import Ideal from 'assets/images/paymentMethods/ideal.svg';
 import Bancontact from 'assets/images/paymentMethods/bancontact.svg';
+import GCash from 'assets/images/paymentMethods/gcash.svg';
 
 // eslint-disable-next-line import/prefer-default-export
 export const CardTypes = {
@@ -94,6 +95,11 @@ export const CardTypes = {
     icon: Bancontact,
     caption: 'Bancontact Mobile',
     title: 'Bancontact Mobile'
+  },
+  gcash: {
+    icon: GCash,
+    caption: 'GCash',
+    title: 'GCash'
   }
 };
 
diff --git a/src/components/PaymentMethod/PaymentMethod.tsx b/src/components/PaymentMethod/PaymentMethod.tsx
index c06922920..b1de5bdc6 100644
--- a/src/components/PaymentMethod/PaymentMethod.tsx
+++ b/src/components/PaymentMethod/PaymentMethod.tsx
@@ -37,6 +37,7 @@ const PaymentMethod = () => {
       case 'ideal':
       case 'bancontact_card':
       case 'bancontact_mobile':
+      case 'gcash':
         return <PaymentCard key={id} details={paymentDetail} />;
       default:
         return (
diff --git a/src/util/paymentMethodHelper.js b/src/util/paymentMethodHelper.js
index a98fb5ea1..a8637942e 100644
--- a/src/util/paymentMethodHelper.js
+++ b/src/util/paymentMethodHelper.js
@@ -9,6 +9,7 @@ import GiftLogo from 'assets/images/gift.svg';
 import RokuLogo from 'assets/images/paymentMethods/roku_color.svg';
 import AmazonLogo from 'assets/images/paymentMethods/amazon_color.svg';
 import AndroidLogo from 'assets/images/paymentMethods/android_color.svg';
+import GCashLogo from 'assets/images/paymentMethods/gcash.svg';
 
 import store from 'appRedux/store';
 import { currencyFormat, isPeriod, periodMapper } from './planHelper';
@@ -21,13 +22,15 @@ export const supportedPaymentMethods = [
   'googlepay',
   'ideal',
   'bancontact_card',
-  'bancontact_mobile'
+  'bancontact_mobile',
+  'gcash'
 ];
 
 export const bankPaymentMethods = [
   'ideal',
   'bancontact_mobile', // Bancontact Mobile name in cleeng-admin
-  'bcmc_mobile' // Bancontact Mobile name in Adyen
+  'bcmc_mobile', // Bancontact Mobile name in Adyen
+  'gcash'
 ];
 
 export const standardPaymentMethods = [
@@ -51,7 +54,8 @@ export const readablePaymentMethodNames = {
   googlepay: 'GooglePay',
   ideal: 'iDEAL',
   bancontact_card: 'Bancontact Card',
-  bancontact_mobile: 'Bancontact Mobile'
+  bancontact_mobile: 'Bancontact Mobile',
+  gcash: 'GCash'
 };
 
 export const supportedPaymentGateways = ['adyen', 'paypal'];
@@ -68,7 +72,8 @@ export const logos = {
   gift: GiftLogo,
   roku: RokuLogo,
   amazon: AmazonLogo,
-  android: AndroidLogo
+  android: AndroidLogo,
+  gcash: GCashLogo
 };
 
 export default logos;