diff --git a/src/Components/NicknamePaymentInput.res b/src/Components/NicknamePaymentInput.res new file mode 100644 index 000000000..941a26df7 --- /dev/null +++ b/src/Components/NicknamePaymentInput.res @@ -0,0 +1,19 @@ +@react.component +let make = (~paymentType: CardThemeType.mode, ~value, ~setValue) => { + let {config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) + + let onChange = ev => { + let val = ReactEvent.Form.target(ev)["value"] + setValue(_ => val) + } + + +} diff --git a/src/Components/SavedCardItem.res b/src/Components/SavedCardItem.res index 1d95bdaf9..59f9a2439 100644 --- a/src/Components/SavedCardItem.res +++ b/src/Components/SavedCardItem.res @@ -91,15 +91,15 @@ let make = ( border="1px solid currentColor" /> -
- brandIcon -
-
+
brandIcon
+
{isCard - ?
-
{React.string(`****`)}
-
{React.string({paymentItem.card.last4Digits})}
+ ?
+
{React.string(paymentItem.card.nickname)}
+
+
{React.string(`****`)}
+
{React.string(paymentItem.card.last4Digits)}
+
:
{React.string(paymentMethodType)}
} diff --git a/src/LocaleString.res b/src/LocaleString.res index 1c89b2324..26de81dfc 100644 --- a/src/LocaleString.res +++ b/src/LocaleString.res @@ -67,6 +67,8 @@ type localeStrings = { useExistingPaymentMethods: string, selectPaymentMethodLabel: string, savedPaymentMethodsLabel: string, + nicknameLabel: string, + nicknamePlaceholder: string, } let defaultLocale = { @@ -149,6 +151,8 @@ let defaultLocale = { useExistingPaymentMethods: "Use saved payment methods", selectPaymentMethodLabel: "Select Payment Method", savedPaymentMethodsLabel: "Saved Payment Methods", + nicknameLabel: "Card Nickname", + nicknamePlaceholder: "Card Nickname (Optional)", } type locale = {localeStrings: array} @@ -233,6 +237,8 @@ let localeStrings = [ useExistingPaymentMethods: "Use saved payment methods", selectPaymentMethodLabel: "Select Payment Method", savedPaymentMethodsLabel: "Saved Payment Methods", + nicknameLabel: "Card Nickname", + nicknamePlaceholder: "Card Nickname (Optional)", }, { locale: "he", @@ -314,6 +320,8 @@ let localeStrings = [ useExistingPaymentMethods: `השתמש באמצעי תשלום שמורים`, selectPaymentMethodLabel: `בחר שיטת תשלום`, savedPaymentMethodsLabel: `אמצעי תשלום שמורים`, + nicknameLabel: `כינוי לכרטיס`, + nicknamePlaceholder: `כינוי לכרטיס (אופציונלי)`, }, { locale: `fr`, @@ -395,6 +403,8 @@ let localeStrings = [ 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)`, }, { locale: "en-GB", @@ -476,6 +486,8 @@ let localeStrings = [ useExistingPaymentMethods: "Use saved payment methods", selectPaymentMethodLabel: "Select Payment Method", savedPaymentMethodsLabel: "Saved Payment Methods", + nicknameLabel: "Card Nickname", + nicknamePlaceholder: "Card Nickname (Optional)", }, { locale: "ar", @@ -557,6 +569,8 @@ let localeStrings = [ useExistingPaymentMethods: `استخدم طرق الدفع المحفوظة`, selectPaymentMethodLabel: `اختار طريقة الدفع`, savedPaymentMethodsLabel: `طرق الدفع المحفوظة`, + nicknameLabel: `الاسم علي الكارت`, + nicknamePlaceholder: `اسم البطاقة (اختياري)`, }, { locale: "ja", @@ -638,6 +652,8 @@ let localeStrings = [ useExistingPaymentMethods: `保存した支払い方法を使用する`, selectPaymentMethodLabel: `支払い方法を選択してください`, savedPaymentMethodsLabel: `保存された支払い方法`, + nicknameLabel: `カードのニックネーム`, + nicknamePlaceholder: `カードニックネーム（任意）`, }, { locale: "de", @@ -719,5 +735,7 @@ let localeStrings = [ useExistingPaymentMethods: `Gespeicherte Zahlungsarten nutzen`, selectPaymentMethodLabel: `Wählen Sie die Zahlungsmethode`, savedPaymentMethodsLabel: `Gespeicherte Zahlungsarten`, + nicknameLabel: `Spitzname der Karte`, + nicknamePlaceholder: `Kartenname (optional)`, }, ] diff --git a/src/Payment.res b/src/Payment.res index 8ec944f5e..230f0fc53 100644 --- a/src/Payment.res +++ b/src/Payment.res @@ -252,6 +252,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => { ~cardHolderName="", ~cvcNumber, ~cardBrand=cardNetwork, + (), ) | CardNumberElement => let (month, year) = getExpiryDates(getCardElementValue(iframeId, "card-expiry")) @@ -263,6 +264,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => { ~cardHolderName="", ~cvcNumber=localCvcNumber, ~cardBrand=cardNetwork, + (), ) | _ => [] } diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res index 3d7c08669..32ea7a875 100644 --- a/src/Payments/CardPayment.res +++ b/src/Payments/CardPayment.res @@ -16,6 +16,9 @@ let make = ( let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom) let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom) + + let (nickname, setNickname) = React.useState(_ => "") + let ( isCardValid, setIsCardValid, @@ -100,7 +103,15 @@ let make = ( ~isCvcValidValue, ) - let submitCallback = React.useCallback5((ev: Window.event) => { + let isCustomerAcceptanceRequired = React.useMemo1(() => { + if displaySavedPaymentMethodsCheckbox { + isSaveCardsChecked || list.payment_type === SETUP_MANDATE + } else { + !(isGuestCustomer || list.payment_type === NORMAL) + } + }, [isSaveCardsChecked]) + + let submitCallback = React.useCallback6((ev: Window.event) => { let json = ev.data->Js.Json.parseExn let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper let (month, year) = CardUtils.getExpiryDates(cardExpiry) @@ -120,18 +131,14 @@ let make = ( ~cardHolderName="", ~cvcNumber, ~cardBrand=cardNetwork, + ~nickname, + (), ) let banContactBody = PaymentBody.bancontactBody() - let cardBody = if displaySavedPaymentMethodsCheckbox { - if isSaveCardsChecked || list.payment_type === SETUP_MANDATE { - defaultCardBody->Js.Array2.concat(onSessionBody) - } else { - defaultCardBody - } - } else if isGuestCustomer || list.payment_type === NORMAL { - defaultCardBody - } else { + let cardBody = if isCustomerAcceptanceRequired { defaultCardBody->Js.Array2.concat(onSessionBody) + } else { + defaultCardBody } if confirm.doSubmit { let validFormat = @@ -171,7 +178,14 @@ let make = ( } } } - }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete, isSaveCardsChecked)) + }, ( + areRequiredFieldsValid, + requiredFieldsBody, + empty, + complete, + isCustomerAcceptanceRequired, + nickname, + )) submitPaymentData(submitCallback) let paymentMethod = isBancontact ? "bank_redirect" : "card" @@ -182,6 +196,8 @@ let make = ( options.displaySavedPaymentMethodsCheckbox && !isBancontact + let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5" +
+ +
+ +
+ Js.Array2.length > 0 && !isBancontact}>
, + nickname: string, } type customerMethods = { paymentToken: string, @@ -164,6 +165,7 @@ let defaultCardDetails = { expiryYear: "", cardToken: "", cardHolderName: None, + nickname: "", } let defaultCustomerMethods = { paymentToken: "", @@ -781,6 +783,7 @@ let getCardDetails = (dict, str) => { expiryYear: getString(json, "expiry_year", ""), cardToken: getString(json, "card_token", ""), cardHolderName: Some(getString(json, "card_holder_name", "")), + nickname: getString(json, "nick_name", ""), } }) ->Belt.Option.getWithDefault(defaultCardDetails) diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res index c2ec6a5ef..790939f71 100644 --- a/src/Utilities/PaymentBody.res +++ b/src/Utilities/PaymentBody.res @@ -1,29 +1,38 @@ @val @scope("window") external btoa: string => string = "btoa" -let cardPaymentBody = (~cardNumber, ~month, ~year, ~cardHolderName, ~cvcNumber, ~cardBrand) => [ - ("payment_method", "card"->Js.Json.string), - ( - "payment_method_data", - [ - ( - "card", - [ - ("card_number", cardNumber->CardUtils.clearSpaces->Js.Json.string), - ("card_exp_month", month->Js.Json.string), - ("card_exp_year", year->Js.Json.string), - ("card_holder_name", cardHolderName->Js.Json.string), - ("card_cvc", cvcNumber->Js.Json.string), - ("card_issuer", ""->Js.Json.string), - ] - ->Js.Array2.concat(cardBrand) - ->Js.Dict.fromArray - ->Js.Json.object_, - ), - ] - ->Js.Dict.fromArray - ->Js.Json.object_, - ), -] +let cardPaymentBody = ( + ~cardNumber, + ~month, + ~year, + ~cardHolderName, + ~cvcNumber, + ~cardBrand, + ~nickname="", + (), +) => { + let cardBody = [ + ("card_number", cardNumber->CardUtils.clearSpaces->Js.Json.string), + ("card_exp_month", month->Js.Json.string), + ("card_exp_year", year->Js.Json.string), + ("card_holder_name", cardHolderName->Js.Json.string), + ("card_cvc", cvcNumber->Js.Json.string), + ("card_issuer", ""->Js.Json.string), + ] + + if nickname != "" { + cardBody->Js.Array2.push(("nickname", nickname->Js.Json.string))->ignore + } + + [ + ("payment_method", "card"->Js.Json.string), + ( + "payment_method_data", + [("card", cardBody->Js.Array2.concat(cardBrand)->Js.Dict.fromArray->Js.Json.object_)] + ->Js.Dict.fromArray + ->Js.Json.object_, + ), + ] +} let bancontactBody = () => [ ("payment_method", "bank_redirect"->Js.Json.string),