@akinon/pz-saved-card 1.101.0-rc.74 → 1.101.0-rc.76

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @akinon/pz-saved-card
 
+## 1.101.0-rc.76
+
+### Minor Changes
+
+- 6bfbdc2: ZERO-3653: optimize saved card option
+
+## 1.101.0-rc.75
+
+### Minor Changes
+
+- 9442cf0: ZERO-3653: make the register_consumer_card option optional
+
 ## 1.101.0-rc.74
 
 ## 1.101.0-rc.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-saved-card",
-  "version": "1.101.0-rc.74",
+  "version": "1.101.0-rc.76",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/components/card-form-section.tsx

@@ -14,6 +14,7 @@ export interface CardFormSectionProps {
     expiryDate?: string;
     cvv?: string;
     cvvTooltip?: string;
+    saveCardForFuture?: string;
   };
 }
 
@@ -23,24 +24,14 @@ export const CardFormSection = ({
   errors,
   months,
   years,
-  translations = {}
+  translations = {},
 }: CardFormSectionProps) => {
-  const defaultTranslations = {
-    cardHolder: 'Cardholder Name',
-    cardNumber: 'Card Number',
-    expiryDate: 'Expiration Date',
-    cvv: 'CVV',
-    cvvTooltip: 'CVV'
-  };
-
-  const mergedTranslations = { ...defaultTranslations, ...translations };
-
   return (
     <div className="w-full bg-white">
       <div className="px-4 my-2 w-full flex justify-between flex-wrap">
         <div className="my-2 w-full sm:px-4">
           <Input
-            label={mergedTranslations.cardHolder}
+            label={translations.cardHolder}
             {...register('card_holder')}
             error={errors.card_holder}
           />
@@ -48,7 +39,7 @@ export const CardFormSection = ({
 
         <div className="my-2 w-full flex flex-col sm:px-4">
           <div className="text-xs text-gray-800 mb-2 w-full flex justify-between items-center">
-            <span>{mergedTranslations.cardNumber}</span>
+            <span>{translations.cardNumber}</span>
           </div>
 
           <Input
@@ -67,7 +58,7 @@ export const CardFormSection = ({
               className="flex w-full text-xs text-start text-black-400 mb-1.5"
               htmlFor="card_month"
             >
-              {mergedTranslations.expiryDate}
+              {translations.expiryDate}
             </label>
 
             <div className="flex w-full h-10 space-x-2.5">
@@ -96,7 +87,7 @@ export const CardFormSection = ({
               className="flex w-full text-xs text-start text-black-400 mb-1.5"
               htmlFor="card_cvv"
             >
-              {mergedTranslations.cvv}
+              {translations.cvv}
             </label>
             <Input
               format="###"
@@ -108,7 +99,7 @@ export const CardFormSection = ({
             />
             <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer mt-2 transition-all hover:text-secondary">
               <span className="text-xs underline">
-                {mergedTranslations.cvvTooltip}
+                {translations.cvv}
               </span>
               <Icon name="cvc" size={16} className="leading-none ml-2" />
               <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
@@ -118,7 +109,18 @@ export const CardFormSection = ({
           </div>
         </div>
 
-        <div id="ucs-permission"></div>
+        <div className="my-2 w-full flex flex-col sm:px-4">
+          <label className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              {...register('register_consumer_card')}
+              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+            />
+            <span className="text-sm text-gray-700">
+              {translations.saveCardForFuture}
+            </span>
+          </label>
+        </div>
       </div>
     </div>
   );

package/src/types/index.ts

@@ -41,6 +41,7 @@ export type IyzicoSavedCardOptionTexts = {
     cardNumber?: string;
     expiryDate?: string;
     cvv?: string;
+    saveCardForFuture?: string;
   };
   placeholder?: {
     cardHolder?: string;

package/src/views/iyzico-saved-card-option.tsx

@@ -69,7 +69,8 @@ const defaultTranslations: IyzicoSavedCardOptionTexts = {
     cardHolder: 'Cardholder Name',
     cardNumber: 'Card Number',
     expiryDate: 'Expiration Date',
-    cvv: 'CVV'
+    cvv: 'CVV',
+    saveCardForFuture: 'Save this card for future payments',
   },
   placeholder: {
     cardHolder: 'Name on Card',
@@ -113,7 +114,8 @@ const createFormSchema = (
   const baseSchema = {
     agreement: yup
       .boolean()
-      .oneOf([true], errors?.required ?? defaultTranslations.errors.required)
+      .oneOf([true], errors?.required ?? defaultTranslations.errors.required),
+    register_consumer_card: yup.boolean().default(false)
   };
 
   if (type === 'new-card') {
@@ -208,23 +210,15 @@ const IyzicoSavedCardOption = ({
       if (type === 'existing-card') {
         const res = await completeSavedCard({
           agreement: data.agreement,
-          register_consumer_card:
-            window.universalCardStorage.registerConsumerCard,
           consumer_token: window.universalCardStorage.consumerToken,
-          card_token: window.universalCardStorage.cardToken
+          card_token: window.universalCardStorage.cardToken,
+          register_consumer_card: true
         });
 
         if ('data' in res && res.data?.errors) {
           setFormError(res.data.errors);
         }
       } else {
-        if (!window.universalCardStorage?.registerConsumerCard) {
-          setFormError({
-            register_consumer_card: mergedTexts.errors?.saveCardRequired
-          });
-          return;
-        }
-
         const res = await completeSavedCard({
           agreement: data.agreement,
           card_holder: data.card_holder,
@@ -232,8 +226,7 @@ const IyzicoSavedCardOption = ({
           card_month: data.card_month,
           card_year: data.card_year,
           card_cvv: data.card_cvv,
-          register_consumer_card:
-            window.universalCardStorage.registerConsumerCard
+          register_consumer_card: data.register_consumer_card || false
         });
 
         if ('data' in res && res.data?.errors) {
@@ -301,7 +294,6 @@ const IyzicoSavedCardOption = ({
   useEffect(() => {
     if (window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST') {
       if (
-        !window.universalCardStorage?.consumerToken ||
         window.universalCardStorage?.cardToken
       ) {
         setType('existing-card');
@@ -312,20 +304,15 @@ const IyzicoSavedCardOption = ({
       setType('new-card');
     }
 
-    const checkInterval = setInterval(() => {
-      if (window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST') {
-        if (
-          !window.universalCardStorage?.consumerToken ||
-          window.universalCardStorage?.cardToken
-        ) {
-          setType('existing-card');
-        } else {
-          setType('new-card');
-        }
+    const checkboxInterval = setInterval(() => {
+      if (window.universalCardStorage?.cardToken !== undefined) {
+        setType('existing-card');
+      } else {
+        setType('new-card');
       }
-    }, 500);
+    }, 100);
 
-    return () => clearInterval(checkInterval);
+    return () => clearInterval(checkboxInterval);
   }, [type]);
 
   return (