fix: pay now button text & theme based changes

src/BrutalTheme.res

@@ -40,7 +40,7 @@ let brutal = {
   spacingGridRow: "20px",
   buttonBackgroundColor: "#f5fb1f",
   buttonHeight: "48px",
-  buttonWidth: "thin",
+  buttonWidth: "100%",
   buttonBorderRadius: "6px",
   buttonBorderColor: "#566186",
   buttonTextColor: "#000000",

src/CardTheme.res

@@ -255,34 +255,34 @@ let getVariables = (str, dict, default, logger) => {
       buttonBackgroundColor: getWarningString(
         json,
         "buttonBackgroundColor",
-        default.spacingGridRow,
+        default.buttonBackgroundColor,
         ~logger,
       ),
-      buttonHeight: getWarningString(json, "buttonHeight", default.spacingGridRow, ~logger),
-      buttonWidth: getWarningString(json, "buttonWidth", default.spacingGridRow, ~logger),
+      buttonHeight: getWarningString(json, "buttonHeight", default.buttonHeight, ~logger),
+      buttonWidth: getWarningString(json, "buttonWidth", default.buttonWidth, ~logger),
       buttonBorderRadius: getWarningString(
         json,
         "buttonBorderRadius",
-        default.spacingGridRow,
+        default.buttonBorderRadius,
         ~logger,
       ),
       buttonBorderColor: getWarningString(
         json,
         "buttonBorderColor",
-        default.spacingGridRow,
+        default.buttonBorderColor,
         ~logger,
       ),
-      buttonTextColor: getWarningString(json, "buttonTextColor", default.spacingGridRow, ~logger),
+      buttonTextColor: getWarningString(json, "buttonTextColor", default.buttonTextColor, ~logger),
       buttonTextFontSize: getWarningString(
         json,
         "buttonTextFontSize",
-        default.spacingGridRow,
+        default.buttonTextFontSize,
         ~logger,
       ),
       buttonTextFontWeight: getWarningString(
         json,
         "buttonTextFontWeight",
-        default.spacingGridRow,
+        default.buttonTextFontWeight,
         ~logger,
       ),
     }

src/CharcoalTheme.res

@@ -40,7 +40,7 @@ let charcoal = {
   spacingGridRow: "20px",
   buttonBackgroundColor: "#000000",
   buttonHeight: "48px",
-  buttonWidth: "thin",
+  buttonWidth: "100%",
   buttonBorderRadius: "6px",
   buttonBorderColor: "#000000",
   buttonTextColor: "#ffffff",

src/Components/PayNowButton.res

@@ -65,6 +65,11 @@ let make = (
     Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
 
+  let buttonText =
+    sdkHandleConfirmPayment.buttonText->String.length > 0
+      ? sdkHandleConfirmPayment.buttonText
+      : localeString.payNowButton
+
   React.useEffect4(() => {
     if showFields {
       if selectedOption === Card {
@@ -104,7 +109,7 @@ let make = (
         {if showLoader {
           <Loader />
         } else {
-          localeString.payNowButton->React.string
+          buttonText->React.string
         }}
       </span>
     </button>

src/DefaultTheme.res

@@ -40,7 +40,7 @@ let default = {
   spacingGridRow: "20px",
   buttonBackgroundColor: "#006df9",
   buttonHeight: "48px",
-  buttonWidth: "thin",
+  buttonWidth: "100%",
   buttonBorderRadius: "6px",
   buttonBorderColor: "#ffffff",
   buttonTextColor: "#ffffff",

src/MidnightTheme.res

@@ -40,7 +40,7 @@ let midnight = {
   spacingGridRow: "20px",
   buttonBackgroundColor: "#85d996",
   buttonHeight: "48px",
-  buttonWidth: "thin",
+  buttonWidth: "100%",
   buttonBorderRadius: "6px",
   buttonBorderColor: "#85d996",
   buttonTextColor: "#000000",

src/NoTheme.res

@@ -41,7 +41,7 @@ let nakedValues = {
   spacingGridRow: "20px",
   buttonBackgroundColor: "",
   buttonHeight: "48px",
-  buttonWidth: "thin",
+  buttonWidth: "100%",
   buttonBorderRadius: "6px",
   buttonBorderColor: "",
   buttonTextColor: "",

src/PaymentElement.res

@@ -21,6 +21,7 @@ let make = (
     paymentMethodOrder,
     layout,
     customerPaymentMethods,
+    displaySavedPaymentMethods,
     displaySavedPaymentMethodsCheckbox,
   } = Recoil.useRecoilValueFromAtom(optionAtom)
   let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
@@ -369,13 +370,20 @@ let make = (
     </ErrorBoundary>
   }
 
-  let paymentLabel = showFields
-    ? localeString.selectPaymentMethodLabel
-    : localeString.savedPaymentMethodsLabel
+  React.useEffect0(() => {
+    setShowFields(._ => !displaySavedPaymentMethods)
+    None
+  })
+
+  let paymentLabel = if displaySavedPaymentMethods {
+    showFields ? localeString.selectPaymentMethodLabel : localeString.savedPaymentMethodsLabel
+  } else {
+    localeString.selectPaymentMethodLabel
+  }
 
   <>
     <div className="text-2xl font-semibold text-[#151619] mb-6"> {React.string(paymentLabel)} </div>
-    <RenderIf condition={!showFields}>
+    <RenderIf condition={!showFields && displaySavedPaymentMethods}>
       <SavedMethods
         paymentToken setPaymentToken savedMethods loadSavedCards cvcProps paymentType list
       />

src/Payments/CardPayment.res

@@ -271,7 +271,10 @@ let make = (
               <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
             </div>
           </RenderIf>
-          <RenderIf condition={savedMethods->Js.Array2.length > 0 && !isBancontact}>
+          <RenderIf
+            condition={options.displaySavedPaymentMethods &&
+            savedMethods->Array.length > 0 &&
+            !isBancontact}>
             <div
               className="Label flex flex-row gap-3 items-end cursor-pointer"
               style={ReactDOMStyle.make(

src/SoftTheme.res

@@ -41,7 +41,7 @@ let soft = {
   spacingGridRow: "20px",
   buttonBackgroundColor: "#3c3d3e",
   buttonHeight: "48px",
-  buttonWidth: "thin",
+  buttonWidth: "100%",
   buttonBorderRadius: "6px",
   buttonBorderColor: "#7d8fff",
   buttonTextColor: "#7d8fff",

src/Types/PaymentType.res

@@ -134,6 +134,7 @@ type billingAddress = {
 
 type sdkHandleConfirmPayment = {
   handleConfirm: bool,
+  buttonText: string,
   confirmParams: ConfirmType.confirmParams,
 }
 
@@ -259,6 +260,7 @@ let defaultBillingAddress = {
 
 let defaultSdkHandleConfirmPayment = {
   handleConfirm: false,
+  buttonText: "",
   confirmParams: ConfirmType.defaultConfirm,
 }
 
@@ -896,6 +898,7 @@ let getConfirmParams = dict => {
 
 let getSdkHandleConfirmPaymentProps = dict => {
   handleConfirm: dict->getBool("handleConfirm", false),
+  buttonText: dict->getString("buttonText", ""),
   confirmParams: dict->getDictfromDict("confirmParams")->getConfirmParams,
 }
 

src/orca-loader/Elements.res

@@ -219,7 +219,6 @@ let make = (
         mountedIframeRef,
         selectorString,
         sdkHandleOneClickConfirmPayment,
-        displaySavedPaymentMethods,
       ) => {
         open Promise
 
@@ -712,9 +711,7 @@ let make = (
         })
         ->ignore
         fetchPaymentsList(mountedIframeRef)
-        if displaySavedPaymentMethods {
-          fetchCustomerDetails(mountedIframeRef)
-        }
+        fetchCustomerDetails(mountedIframeRef)
         mountedIframeRef->Window.iframePostMessage(message)
       }
 

src/orca-loader/LoaderPaymentElement.res

@@ -22,12 +22,6 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
         true,
       )
 
-    let displaySavedPaymentMethods =
-      options->getDecodedBoolFromJson(
-        callbackFuncForExtractingValFromDict("displaySavedPaymentMethods"),
-        true,
-      )
-
     let on = (eventType, eventHandler) => {
       switch eventType->eventTypeMapper {
       | Escape =>
@@ -296,7 +290,6 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
             Window.querySelector(`#orca-payment-element-iframeRef-${localSelectorString}`),
             localSelectorString,
             sdkHandleOneClickConfirmPayment,
-            displaySavedPaymentMethods,
           )
         }
       }