From e1e2d1b45177d1c1ac655bd9d785be6b4df644ad Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <1805317@kiit.ac.in> Date: Wed, 13 Mar 2024 15:27:16 +0530 Subject: [PATCH 1/3] feat: added prop for PaymentHeader Text --- src/LocaleString.res | 18 ------------ src/PaymentElement.res | 58 ++++++++++++++++++++------------------- src/Types/PaymentType.res | 6 ++++ 3 files changed, 36 insertions(+), 46 deletions(-) diff --git a/src/LocaleString.res b/src/LocaleString.res index 26de81dfc..25eaab7d5 100644 --- a/src/LocaleString.res +++ b/src/LocaleString.res @@ -65,8 +65,6 @@ type localeStrings = { saveWalletDetails: string, morePaymentMethods: string, useExistingPaymentMethods: string, - selectPaymentMethodLabel: string, - savedPaymentMethodsLabel: string, nicknameLabel: string, nicknamePlaceholder: string, } @@ -149,8 +147,6 @@ let defaultLocale = { saveWalletDetails: "Wallets details will be saved upon selection", morePaymentMethods: "More payment methods", useExistingPaymentMethods: "Use saved payment methods", - selectPaymentMethodLabel: "Select Payment Method", - savedPaymentMethodsLabel: "Saved Payment Methods", nicknameLabel: "Card Nickname", nicknamePlaceholder: "Card Nickname (Optional)", } @@ -235,8 +231,6 @@ let localeStrings = [ saveWalletDetails: "Wallets details will be saved upon selection", morePaymentMethods: "More payment methods", useExistingPaymentMethods: "Use saved payment methods", - selectPaymentMethodLabel: "Select Payment Method", - savedPaymentMethodsLabel: "Saved Payment Methods", nicknameLabel: "Card Nickname", nicknamePlaceholder: "Card Nickname (Optional)", }, @@ -318,8 +312,6 @@ let localeStrings = [ saveWalletDetails: "פרטי הארנק יישמרו בעת בחירה", morePaymentMethods: `אמצעי תשלום נוספים`, useExistingPaymentMethods: `השתמש באמצעי תשלום שמורים`, - selectPaymentMethodLabel: `בחר שיטת תשלום`, - savedPaymentMethodsLabel: `אמצעי תשלום שמורים`, nicknameLabel: `כינוי לכרטיס`, nicknamePlaceholder: `כינוי לכרטיס (אופציונלי)`, }, @@ -401,8 +393,6 @@ let localeStrings = [ saveWalletDetails: "Les détails du portefeuille seront enregistrés lors de la sélection", morePaymentMethods: `Plus de méthodes de paiement`, useExistingPaymentMethods: `Utiliser les modes de paiement enregistrés`, - selectPaymentMethodLabel: `Sélectionnez le mode de paiement`, - savedPaymentMethodsLabel: `Modes de paiement enregistrés`, nicknameLabel: `Pseudonyme de la carte`, nicknamePlaceholder: `Surnom de la carte (facultatif)`, }, @@ -484,8 +474,6 @@ let localeStrings = [ saveWalletDetails: "Wallets details will be saved upon selection", morePaymentMethods: "More payment methods", useExistingPaymentMethods: "Use saved payment methods", - selectPaymentMethodLabel: "Select Payment Method", - savedPaymentMethodsLabel: "Saved Payment Methods", nicknameLabel: "Card Nickname", nicknamePlaceholder: "Card Nickname (Optional)", }, @@ -567,8 +555,6 @@ let localeStrings = [ saveWalletDetails: "سيتم حفظ تفاصيل المحفظة عند الاختيار", morePaymentMethods: `المزيد من طرق الدفع`, useExistingPaymentMethods: `استخدم طرق الدفع المحفوظة`, - selectPaymentMethodLabel: `اختار طريقة الدفع`, - savedPaymentMethodsLabel: `طرق الدفع المحفوظة`, nicknameLabel: `الاسم علي الكارت`, nicknamePlaceholder: `اسم البطاقة (اختياري)`, }, @@ -650,8 +636,6 @@ let localeStrings = [ saveWalletDetails: "選択時にウォレットの詳細が保存されます", morePaymentMethods: `その他の支払い方法`, useExistingPaymentMethods: `保存した支払い方法を使用する`, - selectPaymentMethodLabel: `支払い方法を選択してください`, - savedPaymentMethodsLabel: `保存された支払い方法`, nicknameLabel: `カードのニックネーム`, nicknamePlaceholder: `カードニックネーム（任意）`, }, @@ -733,8 +717,6 @@ let localeStrings = [ saveWalletDetails: "Wallet-Details werden beim Auswählen gespeichert", morePaymentMethods: `Mehr Zahlungsmethoden`, useExistingPaymentMethods: `Gespeicherte Zahlungsarten nutzen`, - selectPaymentMethodLabel: `Wählen Sie die Zahlungsmethode`, - savedPaymentMethodsLabel: `Gespeicherte Zahlungsarten`, nicknameLabel: `Spitzname der Karte`, nicknamePlaceholder: `Kartenname (optional)`, }, diff --git a/src/PaymentElement.res b/src/PaymentElement.res index 11547b33a..31c28dd81 100644 --- a/src/PaymentElement.res +++ b/src/PaymentElement.res @@ -14,19 +14,12 @@ let make = ( ~countryProps, ~paymentType: CardThemeType.mode, ) => { - let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) let sessionsObj = Recoil.useRecoilValueFromAtom(sessions) - let { - showCardFormByDefault, - paymentMethodOrder, - layout, - customerPaymentMethods, - displaySavedPaymentMethods, - } = Recoil.useRecoilValueFromAtom(optionAtom) + let optionValue = Recoil.useRecoilValueFromAtom(optionAtom) let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady) let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady) let methodslist = Recoil.useRecoilValueFromAtom(list) - let paymentOrder = paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate + let paymentOrder = optionValue.paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate let (sessions, setSessions) = React.useState(_ => Js.Dict.empty()->Js.Json.object_) let (paymentOptions, setPaymentOptions) = React.useState(_ => []) let (walletOptions, setWalletOptions) = React.useState(_ => []) @@ -34,7 +27,7 @@ let make = ( let (list, setList) = React.useState(_ => PaymentMethodsRecord.defaultList) let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0) - let layoutClass = CardUtils.getLayoutClass(layout) + let layoutClass = CardUtils.getLayoutClass(optionValue.layout) let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom) let (dropDownOptions: array, setDropDownOptions) = React.useState(_ => []) let (cardOptions: array, setCardOptions) = React.useState(_ => []) @@ -50,7 +43,7 @@ let make = ( ) = React.useState(_ => PaymentType.LoadingSavedCards) React.useEffect2(() => { - switch (displaySavedPaymentMethods, customerPaymentMethods) { + switch (optionValue.displaySavedPaymentMethods, optionValue.customerPaymentMethods) { | (false, _) => { setShowFields(._ => true) setLoadSavedCards(_ => LoadedSavedCards([], true)) @@ -86,7 +79,7 @@ let make = ( } None - }, (customerPaymentMethods, displaySavedPaymentMethods)) + }, (optionValue.customerPaymentMethods, optionValue.displaySavedPaymentMethods)) React.useEffect1(() => { let defaultPaymentMethod = @@ -140,14 +133,14 @@ let make = ( otherOptions, ) | SemiLoaded => - showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) + optionValue.showCardFormByDefault && Utils.checkPriorityList(optionValue.paymentMethodOrder) ? ([], ["card"], []) : ([], [], []) | _ => ([], [], []) } }, ( methodslist, - paymentMethodOrder, + optionValue.paymentMethodOrder, isApplePayReady, isGooglePayReady, areAllGooglePayRequiredFieldsPrefilled, @@ -164,7 +157,7 @@ let make = ( }) setWalletOptions(_ => walletList) setList(_ => plist) - showCardFormByDefault + optionValue.showCardFormByDefault ? if !(actualList->Js.Array2.includes(selectedOption)) && selectedOption !== "" { ErrorUtils.manageErrorWarning( SDK_CONNECTOR_WARNING, @@ -172,11 +165,11 @@ let make = ( ~logger=loggerState, (), ) - } else if !Utils.checkPriorityList(paymentMethodOrder) { + } else if !Utils.checkPriorityList(optionValue.paymentMethodOrder) { ErrorUtils.manageErrorWarning( SDK_CONNECTOR_WARNING, - ~dynamicStr=`'paymentMethodOrder' is ${Js.Array2.joinWith( - paymentMethodOrder->Utils.getOptionalArr, + ~dynamicStr=`'optionValue.paymentMethodOrder' is ${Js.Array2.joinWith( + optionValue.paymentMethodOrder->Utils.getOptionalArr, ", ", )} . Please enable Card Payment as 1st priority to show it as default.`, ~logger=loggerState, @@ -187,7 +180,9 @@ let make = ( | LoadError(_) | SemiLoaded => setPaymentOptions(_ => - showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? ["card"] : [] + optionValue.showCardFormByDefault && Utils.checkPriorityList(optionValue.paymentMethodOrder) + ? ["card"] + : [] ) | _ => () } @@ -238,9 +233,12 @@ let make = ( : switch methodslist { | SemiLoaded | LoadError(_) => - showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? "card" : "" + optionValue.showCardFormByDefault && + Utils.checkPriorityList(optionValue.paymentMethodOrder) + ? "card" + : "" | Loaded(_) => - paymentOptions->Js.Array2.includes(selectedOption) && showCardFormByDefault + paymentOptions->Js.Array2.includes(selectedOption) && optionValue.showCardFormByDefault ? selectedOption : paymentOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("") | _ => paymentOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("") @@ -391,19 +389,23 @@ let make = ( } React.useEffect1(() => { - setShowFields(._ => !displaySavedPaymentMethods) + setShowFields(._ => !optionValue.displaySavedPaymentMethods) None - }, [displaySavedPaymentMethods]) + }, [optionValue.displaySavedPaymentMethods]) - let paymentLabel = if displaySavedPaymentMethods { - showFields ? localeString.selectPaymentMethodLabel : localeString.savedPaymentMethodsLabel + let paymentLabel = if optionValue.displaySavedPaymentMethods { + showFields ? optionValue.paymentMethodsHeaderText : optionValue.savedPaymentMethodsHeaderText } else { - localeString.selectPaymentMethodLabel + optionValue.paymentMethodsHeaderText } <> -
{React.string(paymentLabel)}
- + Option.isSome}> +
+ {paymentLabel->Option.getOr("")->React.string} +
+ + diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res index 86246d00a..97d41f92b 100644 --- a/src/Types/PaymentType.res +++ b/src/Types/PaymentType.res @@ -158,6 +158,8 @@ type options = { showCardFormByDefault: bool, billingAddress: billingAddress, sdkHandleConfirmPayment: sdkHandleConfirmPayment, + paymentMethodsHeaderText?: string, + savedPaymentMethodsHeaderText?: string, } let defaultCardDetails = { scheme: None, @@ -926,6 +928,8 @@ let itemToObjMapper = (dict, logger) => { "sdkHandleOneClickConfirmPayment", "showCardFormByDefault", "sdkHandleConfirmPayment", + "paymentMethodsHeaderText", + "savedPaymentMethodsHeaderText", ], dict, "options", @@ -964,6 +968,8 @@ let itemToObjMapper = (dict, logger) => { sdkHandleConfirmPayment: dict ->getDictfromDict("sdkHandleConfirmPayment") ->getSdkHandleConfirmPaymentProps, + paymentMethodsHeaderText: ?getOptionString(dict, "paymentMethodsHeaderText"), + savedPaymentMethodsHeaderText: ?getOptionString(dict, "savedPaymentMethodsHeaderText"), } } From 5ef53707ccbfc3af8ab5b9d71b5fb30a1b93e26d Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <1805317@kiit.ac.in> Date: Wed, 13 Mar 2024 15:39:52 +0530 Subject: [PATCH 2/3] fix: revert unnecessary changes --- src/PaymentElement.res | 54 +++++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/src/PaymentElement.res b/src/PaymentElement.res index 31c28dd81..26ff92ed9 100644 --- a/src/PaymentElement.res +++ b/src/PaymentElement.res @@ -15,11 +15,18 @@ let make = ( ~paymentType: CardThemeType.mode, ) => { let sessionsObj = Recoil.useRecoilValueFromAtom(sessions) - let optionValue = Recoil.useRecoilValueFromAtom(optionAtom) + let { + showCardFormByDefault, + paymentMethodOrder, + layout, + customerPaymentMethods, + displaySavedPaymentMethods, + } = Recoil.useRecoilValueFromAtom(optionAtom) + let optionAtomValue = Recoil.useRecoilValueFromAtom(optionAtom) let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady) let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady) let methodslist = Recoil.useRecoilValueFromAtom(list) - let paymentOrder = optionValue.paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate + let paymentOrder = paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate let (sessions, setSessions) = React.useState(_ => Js.Dict.empty()->Js.Json.object_) let (paymentOptions, setPaymentOptions) = React.useState(_ => []) let (walletOptions, setWalletOptions) = React.useState(_ => []) @@ -27,7 +34,7 @@ let make = ( let (list, setList) = React.useState(_ => PaymentMethodsRecord.defaultList) let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0) - let layoutClass = CardUtils.getLayoutClass(optionValue.layout) + let layoutClass = CardUtils.getLayoutClass(layout) let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom) let (dropDownOptions: array, setDropDownOptions) = React.useState(_ => []) let (cardOptions: array, setCardOptions) = React.useState(_ => []) @@ -43,7 +50,7 @@ let make = ( ) = React.useState(_ => PaymentType.LoadingSavedCards) React.useEffect2(() => { - switch (optionValue.displaySavedPaymentMethods, optionValue.customerPaymentMethods) { + switch (displaySavedPaymentMethods, customerPaymentMethods) { | (false, _) => { setShowFields(._ => true) setLoadSavedCards(_ => LoadedSavedCards([], true)) @@ -79,7 +86,7 @@ let make = ( } None - }, (optionValue.customerPaymentMethods, optionValue.displaySavedPaymentMethods)) + }, (customerPaymentMethods, displaySavedPaymentMethods)) React.useEffect1(() => { let defaultPaymentMethod = @@ -133,14 +140,14 @@ let make = ( otherOptions, ) | SemiLoaded => - optionValue.showCardFormByDefault && Utils.checkPriorityList(optionValue.paymentMethodOrder) + showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? ([], ["card"], []) : ([], [], []) | _ => ([], [], []) } }, ( methodslist, - optionValue.paymentMethodOrder, + paymentMethodOrder, isApplePayReady, isGooglePayReady, areAllGooglePayRequiredFieldsPrefilled, @@ -157,7 +164,7 @@ let make = ( }) setWalletOptions(_ => walletList) setList(_ => plist) - optionValue.showCardFormByDefault + showCardFormByDefault ? if !(actualList->Js.Array2.includes(selectedOption)) && selectedOption !== "" { ErrorUtils.manageErrorWarning( SDK_CONNECTOR_WARNING, @@ -165,11 +172,11 @@ let make = ( ~logger=loggerState, (), ) - } else if !Utils.checkPriorityList(optionValue.paymentMethodOrder) { + } else if !Utils.checkPriorityList(paymentMethodOrder) { ErrorUtils.manageErrorWarning( SDK_CONNECTOR_WARNING, - ~dynamicStr=`'optionValue.paymentMethodOrder' is ${Js.Array2.joinWith( - optionValue.paymentMethodOrder->Utils.getOptionalArr, + ~dynamicStr=`'paymentMethodOrder' is ${Js.Array2.joinWith( + paymentMethodOrder->Utils.getOptionalArr, ", ", )} . Please enable Card Payment as 1st priority to show it as default.`, ~logger=loggerState, @@ -180,9 +187,7 @@ let make = ( | LoadError(_) | SemiLoaded => setPaymentOptions(_ => - optionValue.showCardFormByDefault && Utils.checkPriorityList(optionValue.paymentMethodOrder) - ? ["card"] - : [] + showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? ["card"] : [] ) | _ => () } @@ -233,12 +238,9 @@ let make = ( : switch methodslist { | SemiLoaded | LoadError(_) => - optionValue.showCardFormByDefault && - Utils.checkPriorityList(optionValue.paymentMethodOrder) - ? "card" - : "" + showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? "card" : "" | Loaded(_) => - paymentOptions->Js.Array2.includes(selectedOption) && optionValue.showCardFormByDefault + paymentOptions->Js.Array2.includes(selectedOption) && showCardFormByDefault ? selectedOption : paymentOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("") | _ => paymentOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("") @@ -389,14 +391,16 @@ let make = ( } React.useEffect1(() => { - setShowFields(._ => !optionValue.displaySavedPaymentMethods) + setShowFields(._ => !displaySavedPaymentMethods) None - }, [optionValue.displaySavedPaymentMethods]) + }, [displaySavedPaymentMethods]) - let paymentLabel = if optionValue.displaySavedPaymentMethods { - showFields ? optionValue.paymentMethodsHeaderText : optionValue.savedPaymentMethodsHeaderText + let paymentLabel = if displaySavedPaymentMethods { + showFields + ? optionAtomValue.paymentMethodsHeaderText + : optionAtomValue.savedPaymentMethodsHeaderText } else { - optionValue.paymentMethodsHeaderText + optionAtomValue.paymentMethodsHeaderText } <> @@ -405,7 +409,7 @@ let make = ( {paymentLabel->Option.getOr("")->React.string} - + From 66d1c9034a43d1b38f02d794a6cfd4b16ca6d990 Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <1805317@kiit.ac.in> Date: Wed, 13 Mar 2024 16:49:30 +0530 Subject: [PATCH 3/3] fix: dependency changes --- src/Payments/CardPayment.res | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res index 2656b5000..45dd320d2 100644 --- a/src/Payments/CardPayment.res +++ b/src/Payments/CardPayment.res @@ -103,13 +103,13 @@ let make = ( ~isCvcValidValue, ) - let isCustomerAcceptanceRequired = React.useMemo1(() => { + let isCustomerAcceptanceRequired = React.useMemo2(() => { if displaySavedPaymentMethodsCheckbox { isSaveCardsChecked || list.payment_type === SETUP_MANDATE } else { !(isGuestCustomer || list.payment_type === NORMAL) } - }, [isSaveCardsChecked]) + }, (isSaveCardsChecked, list.payment_type)) let submitCallback = React.useCallback6((ev: Window.event) => { let json = ev.data->Js.Json.parseExn