Merge pull request #64 from mediaopt/feature/35782-vault-optimization

Feature/35782 vault optimization
mediaopt · Feb 28, 2024 · 52cc261 · 52cc261
2 parents 7d166cf + c9ad2ce
commit 52cc261
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "private": false,
   "type": "module",
   "license": "MIT",

diff --git a/src/App.tsx b/src/App.tsx
@@ -77,8 +77,7 @@ function App() {
 
   const vaultOnlyParams = {
     ...commonParams,
-    getUserInfoUrl: `${ENDPOINT_URL}/payment/getUserInfo`,
-    enableVaulting: true,
+    ...vaultParams,
     createVaultSetupTokenUrl: `${ENDPOINT_URL}/payment/createVaultSetupToken`,
     approveVaultSetupTokenUrl: `${ENDPOINT_URL}/payment/approveVaultSetupToken`,
     shippingMethodId: "da416140-39bf-4677-8882-8b6cab23d981",

diff --git a/src/components/CardFields/CardFieldsMask.tsx b/src/components/CardFields/CardFieldsMask.tsx
@@ -7,7 +7,7 @@ import {
   CardFieldsProps,
   CustomOnApproveData,
 } from "../../types";
-import { CARD_FIELDS_INPUTS, CARD_FIELDS_BUTTON } from "./constants";
+import { CARD_FIELDS_INPUTS, CARD_FIELDS_PAY_BUTTON } from "./constants";
 import { useNotifications } from "../../app/useNotifications";
 import { useLoader } from "../../app/useLoader";
 import { errorFunc } from "../errorNotification";
@@ -53,7 +53,7 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
 
   const hostedFieldClasses = useMemo(() => {
     const hostedFieldsPayButtonClasses =
-      settings?.hostedFieldsPayButtonClasses || CARD_FIELDS_BUTTON;
+      settings?.hostedFieldsPayButtonClasses || CARD_FIELDS_PAY_BUTTON;
     const hostedFieldsInputFieldClasses =
       settings?.hostedFieldsInputFieldClasses || CARD_FIELDS_INPUTS;
     return { hostedFieldsPayButtonClasses, hostedFieldsInputFieldClasses };
@@ -173,14 +173,11 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
 
   return (
     <>
-      {!vaultOnly &&
-      cardPaymentTokens &&
-      cardPaymentTokens?.length > 0 &&
-      !addNew ? (
+      {!vaultOnly && (
         <>
           <table cellPadding={5} className="max-w-fit">
             <tbody>
-              {cardPaymentTokens.map((paymentToken) => {
+              {cardPaymentTokens?.map((paymentToken) => {
                 const { id, payment_source } = paymentToken;
                 return (
                   <tr key={id}>
@@ -191,34 +188,49 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
                         value={id}
                         onChange={(e) => {
                           setVaultId(e.target.value);
+                          setAddNew(false);
                         }}
                       />
                     </td>
                     <Card {...payment_source.card} />
                   </tr>
                 );
               })}
+              <tr>
+                <td>
+                  <input
+                    type="radio"
+                    name="card"
+                    id="addNewCart"
+                    onChange={(e) => {
+                      setAddNew(e.target.checked);
+                      setVaultId(undefined);
+                    }}
+                  />
+                </td>
+                <td colSpan={4}>
+                  <label htmlFor="addNewCart">Add a new card</label>
+                </td>
+              </tr>
             </tbody>
           </table>
           {vaultId && (
-            <div className="h-9">
-              <button
-                className={hostedFieldClasses.hostedFieldsPayButtonClasses}
-                onClick={() =>
-                  handleCreateOrder({
-                    paymentSource: "card",
-                    storeInVault: saveCard,
-                    vaultId: vaultId,
-                  })
-                }
-              >
-                Pay
-              </button>
-            </div>
+            <button
+              className={hostedFieldClasses.hostedFieldsPayButtonClasses}
+              onClick={() =>
+                handleCreateOrder({
+                  paymentSource: "card",
+                  storeInVault: saveCard,
+                  vaultId: vaultId,
+                })
+              }
+            >
+              Pay
+            </button>
           )}
-          <button onClick={() => setAddNew(true)}>Add A New Card</button>
         </>
-      ) : (
+      )}
+      {(addNew || vaultOnly) && (
         <div ref={cardFieldDiv} id="checkout-form">
           <div ref={nameField} id="card-name-field-container"></div>
 
@@ -229,7 +241,7 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
           <div ref={cvvField} id="card-cvv-field-container"></div>
 
           {enableVaulting && !vaultOnly && (
-            <label>
+            <label className="p-1.5">
               <input
                 type="checkbox"
                 id="save"
@@ -243,13 +255,13 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
               Save this card for future purchases
             </label>
           )}
-          <div className="py-2">
+          <div className="py-2 px-1.5">
             <button
               className={hostedFieldClasses.hostedFieldsPayButtonClasses}
               onClick={handleClick}
               disabled={paying}
             >
-              Pay
+              {vaultOnly ? "Save" : "Pay"}
             </button>
           </div>
         </div>

diff --git a/src/components/CardFields/constants.tsx b/src/components/CardFields/constants.tsx
@@ -1,8 +1,8 @@
 export const CARD_FIELDS_INPUTS: string =
   "w-full p-3 mt-1.5 mb-4 h-10 text-base bg-white text-neutral-700 border border-gray-300 rounded box-border resize-y";
 
-export const CARD_FIELDS_BUTTON: string =
-  "float-right text-center whitespace-nowrap inline-block font-normal align-middle select-none cursor-pointer text-white text-base rounded py-1.5 px-3 bg-sky-500 border-sky-500";
+export const CARD_FIELDS_PAY_BUTTON: string =
+  "h-11 sm:h-14 my-2 mr-2 text-center w-full whitespace-nowrap border-2 inline-block font-normal align-middle select-none cursor-pointer text-base rounded py-1.5 px-3 border-sky-500 text-white bg-sky-500";
 
 const ACTIONS: Record<string, string> = {
   YYPOSSIBLE: "threeDSAction_1",
@@ -24,11 +24,11 @@ const ACTIONS: Record<string, string> = {
 export const getActionIndex = (
   enrollmentStatus: string,
   authenticationStatus: string,
-  liabilityShift: string
+  liabilityShift: string,
 ): string => {
   const selector = enrollmentStatus.concat(
     authenticationStatus,
-    liabilityShift
+    liabilityShift,
   );
   return ACTIONS[selector];
 };
diff --git a/src/components/PayPal/PayPalMask.tsx b/src/components/PayPal/PayPalMask.tsx
@@ -19,7 +19,7 @@ export const PayPalMask: React.FC<CustomPayPalButtonsComponentProps> = (
     handleCreateVaultSetupToken,
     handleApproveVaultSetupToken,
   } = usePayment();
-  const { settings } = useSettings();
+  const { settings, paymentTokens } = useSettings();
   const { isLoading } = useLoader();
   const { notify } = useNotifications();
   const { t } = useTranslation();
@@ -28,6 +28,15 @@ export const PayPalMask: React.FC<CustomPayPalButtonsComponentProps> = (
 
   const storeInVaultOnSuccess = settings?.storeInVaultOnSuccess;
 
+  const hasPaypalToken = useMemo(() => {
+    if (paymentTokens?.payment_tokens) {
+      return paymentTokens.payment_tokens.some(
+        (token) => token.payment_source.paypal,
+      );
+    }
+    return false;
+  }, [paymentTokens]);
+
   const style = useMemo(() => {
     if (restprops.style || !settings) {
       return restprops.style;
@@ -76,18 +85,20 @@ export const PayPalMask: React.FC<CustomPayPalButtonsComponentProps> = (
         {...actions}
         onError={(err) => errorFunc(err, isLoading, notify, t)}
       />
-      {(enableVaulting || storeInVaultOnSuccess) && (
-        <label>
-          <input
-            type="checkbox"
-            id="save"
-            name="save"
-            ref={save}
-            className="mr-1"
-          />
-          Save for future purchases
-        </label>
-      )}
+      {!vaultOnly &&
+        !hasPaypalToken &&
+        (enableVaulting || storeInVaultOnSuccess) && (
+          <label>
+            <input
+              type="checkbox"
+              id="save"
+              name="save"
+              ref={save}
+              className="mr-1"
+            />
+            Save for future purchases
+          </label>
+        )}
 
       {paypalMessages && <PayPalMessages {...paypalMessages} />}
     </>