@akinon/pz-saved-card 1.60.0-rc.6 → 1.60.0-rc.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @akinon/pz-saved-card
 
+## 1.60.0-rc.7
+
+### Minor Changes
+
+- 63597bc: ZERO-2903: update saved card readme
+- ce25dac: ZERO-2903: optimize saved card
+
 ## 1.60.0-rc.6
 
 ### Minor Changes

package/package.json

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

package/readme.md

@@ -25,17 +25,20 @@ npx @akinon/projectzero@latest --plugins
 ##### File Path: src/views/checkout/steps/payment/options/saved-card.tsx
 
 ```jsx
-import { SavedCardOption } from '@akinon/pz-saved-card';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 const SavedCard = () => {
-  return (
-    <SavedCardOption
-      texts={{
-        title: 'Pay with Saved Card',
-        button: 'Pay Now'
-      }}
-    />
-  );
+    return (
+        <PluginModule
+            component={Component.SavedCard}
+            props={{
+                texts: {
+                    title: 'Pay with Saved Card',
+                    button: 'Pay Now'
+                }
+            }}
+        />
+    );
 };
 
 export default SavedCard;

package/src/components/agreement-and-submit.tsx

@@ -0,0 +1,25 @@
+import React, { cloneElement } from 'react';
+import { Button, Icon } from '@akinon/next/components';
+
+export const AgreementAndSubmit = ({
+  agreementCheckbox,
+  control,
+  errors,
+  buttonText
+}) => (
+  <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
+    {agreementCheckbox &&
+      cloneElement(agreementCheckbox, {
+        control,
+        error: errors.agreement,
+        fieldId: 'agreement'
+      })}
+    <Button
+      type="submit"
+      className="group uppercase mt-4 inline-flex items-center justify-center"
+    >
+      <span>{buttonText}</span>
+      <Icon name="chevron-end" size={12} className="ml-2 h-3" />
+    </Button>
+  </div>
+);

package/src/components/card-label.tsx

@@ -0,0 +1,17 @@
+import { getCreditCardType } from '../utils';
+import React from 'react';
+import { cardImages } from '../views/saved-card-option';
+import { Image } from '@akinon/next/components';
+
+export const CardLabel = ({ card }) => (
+  <label className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between">
+    <p className="w-full text-[10px] lg:w-1/3">{card.masked_card_number}</p>
+    <Image
+      className="w-8 h-6 object-contain flex items-center justify-center"
+      width={50}
+      height={50}
+      src={cardImages[getCreditCardType(card.masked_card_number)].src}
+      alt={card.name}
+    />
+  </label>
+);

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

@@ -0,0 +1,51 @@
+import { setDeletionModalId, setDeletionModalVisible } from '../redux/reducer';
+import React from 'react';
+import { ErrorText } from './error-text';
+import { CardLabel } from './card-label';
+import { DeleteIcon } from './delete-icon';
+
+export const CardSelectionSection = ({
+  title,
+  cards,
+  selectedCard,
+  onSelect,
+  register,
+  errors,
+  dispatch
+}) => (
+  <div className="border-solid border-gray-400 px-4 py-2">
+    <span className="text-black-800 text-lg font-medium">{title}</span>
+    <ul className="mt-4 text-xs w-full">
+      {cards?.map((card) => (
+        <li
+          key={card.token}
+          className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center cursor-pointer"
+          onClick={(e) => {
+            e.preventDefault();
+            onSelect(card);
+          }}
+        >
+          <input
+            name="card"
+            type="radio"
+            checked={selectedCard?.token === card.token}
+            value={card.token}
+            id={card.token}
+            className="mr-2"
+            onChange={() => {}}
+            {...register('card')}
+          />
+          <CardLabel card={card} />
+          <DeleteIcon
+            onClick={(e) => {
+              e.stopPropagation();
+              dispatch(setDeletionModalId(card.id));
+              dispatch(setDeletionModalVisible(true));
+            }}
+          />
+        </li>
+      ))}
+    </ul>
+    {errors.card && <ErrorText message={errors.card?.message} />}
+  </div>
+);

package/src/components/delete-icon.tsx

@@ -0,0 +1,8 @@
+import { Icon } from '@akinon/next/components';
+import React from 'react';
+
+export const DeleteIcon = ({ onClick }) => (
+  <span className="cursor-pointer p-1" onClick={onClick}>
+    <Icon name="close" size={12} />
+  </span>
+);

package/src/components/error-text.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const ErrorText = ({ message }) => (
+  <div className="w-full text-xs text-start px-1 mt-3 text-error">
+    {message}
+  </div>
+);

package/src/components/installment-section.tsx

@@ -0,0 +1,22 @@
+import SavedCardInstallments from './installments';
+import React from 'react';
+
+export const InstallmentSection = ({
+  title,
+  selectedCard,
+  installmentOptions,
+  translations,
+  errors
+}) => (
+  <div className="border-solid border-gray-400 bg-white">
+    <div className="px-4 py-2">
+      <span className="text-black-800 text-lg font-medium">{title}</span>
+    </div>
+    <SavedCardInstallments
+      selectedCard={selectedCard}
+      installmentOptions={installmentOptions}
+      translations={translations}
+      error={errors}
+    />
+  </div>
+);

package/src/types/index.ts

@@ -47,6 +47,5 @@ export type AgreementAndSubmitProps = {
   agreementCheckbox: ReactElement | undefined;
   control: any;
   errors: any;
-  formError: any;
   buttonText: string;
 };

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

@@ -3,28 +3,20 @@
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
-import React, { cloneElement, ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useMemo } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
   useCompleteSavedCardMutation,
   useGetSavedCardsQuery,
   useSetSavedCardMutation
 } from '../redux/api';
-import { Button, Icon, Image } from '@akinon/next/components';
-import { getCreditCardType } from '../utils';
 
 import amex from '../../assets/img/amex.jpg';
 import mastercard from '../../assets/img/mastercard.png';
 import other from '../../assets/img/other.png';
 import troy from '../../assets/img/troy.png';
 import visa from '../../assets/img/visa.png';
-
-import SavedCardInstallments from '../components/installments';
-import {
-  setCards,
-  setDeletionModalId,
-  setDeletionModalVisible
-} from '../redux/reducer';
+import { setCards } from '../redux/reducer';
 import { DeleteConfirmationModal } from '../components/delete-confirmation-modal';
 import {
   AgreementAndSubmitProps,
@@ -33,6 +25,9 @@ import {
   InstallmentSectionProps,
   SavedCardOptionTexts
 } from '../types';
+import { CardSelectionSection } from '../components/card-selection-section';
+import { InstallmentSection } from '../components/installment-section';
+import { AgreementAndSubmit } from '../components/agreement-and-submit';
 
 export const cardImages = { amex, mastercard, troy, visa, other };
 
@@ -107,10 +102,10 @@ const SavedCardOption = ({
   cardSelectionWrapperProps = {},
   installmentWrapperProps = {}
 }: SavedCardOptionProps) => {
-  const mergedTexts = mergeTranslations(texts, defaultTranslations);
-
-  const [selectedCard, setSelectedCard] = useState(null);
-  const [formError, setFormError] = useState(null);
+  const mergedTexts = useMemo(
+    () => mergeTranslations(texts, defaultTranslations),
+    [texts]
+  );
   const dispatch = useAppDispatch();
   const { data: savedCards } = useGetSavedCardsQuery();
   const [completeSavedCard] = useCompleteSavedCardMutation();
@@ -124,21 +119,29 @@ const SavedCardOption = ({
     register,
     handleSubmit,
     control,
-    formState: { errors }
+    formState: { errors },
+    setValue,
+    watch
   } = useForm({
     resolver: yupResolver(createFormSchema(mergedTexts.errors))
   });
 
+  const selectedCardToken = watch('card');
+  const selectedCard = useMemo(
+    () => cards?.find((card) => card.token === selectedCardToken),
+    [cards, selectedCardToken]
+  );
+
   const handleCardSelection = async (card) => {
     await setSavedCard({ card }).unwrap();
-    setSelectedCard(card);
+    setValue('card', card.token, { shouldValidate: true });
   };
 
   const onSubmit = async () => {
     try {
       await completeSavedCard({ agreement: true });
     } catch (error) {
-      setFormError(error);
+      console.error('Error completing saved card:', error);
     }
   };
 
@@ -146,7 +149,7 @@ const SavedCardOption = ({
     if (savedCards?.results && !cards?.length) {
       dispatch(setCards(savedCards.results));
     }
-  }, [savedCards]);
+  }, [savedCards, cards, dispatch]);
 
   return (
     <>
@@ -209,7 +212,6 @@ const SavedCardOption = ({
               agreementCheckbox,
               control,
               errors,
-              formError,
               buttonText: mergedTexts.button
             })
           ) : (
@@ -217,7 +219,6 @@ const SavedCardOption = ({
               agreementCheckbox={agreementCheckbox}
               control={control}
               errors={errors}
-              formError={formError}
               buttonText={mergedTexts.button}
             />
           )}
@@ -228,118 +229,4 @@ const SavedCardOption = ({
   );
 };
 
-const CardSelectionSection = ({
-  title,
-  cards,
-  selectedCard,
-  onSelect,
-  register,
-  errors,
-  dispatch
-}) => (
-  <div className="border-solid border-gray-400 px-4 py-2">
-    <span className="text-black-800 text-lg font-medium">{title}</span>
-    <ul className="mt-4 text-xs w-full">
-      {cards?.map((card) => (
-        <li
-          key={card.token}
-          className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center cursor-pointer"
-          onClick={() => onSelect(card)}
-        >
-          <input
-            name="card"
-            type="radio"
-            checked={selectedCard?.token === card.token}
-            value={card.token}
-            id={card.token}
-            className="mr-2"
-            onChange={() => {}}
-            {...register('card')}
-          />
-          <CardLabel card={card} />
-          <DeleteIcon
-            onClick={() => {
-              dispatch(setDeletionModalId(card.id));
-              dispatch(setDeletionModalVisible(true));
-            }}
-          />
-        </li>
-      ))}
-    </ul>
-    {errors.card && <ErrorText message={errors.card?.message} />}
-  </div>
-);
-
-const CardLabel = ({ card }) => (
-  <label className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between">
-    <p className="w-full text-[10px] lg:w-1/3">{card.masked_card_number}</p>
-    <Image
-      className="w-8 h-6 object-contain flex items-center justify-center"
-      width={50}
-      height={50}
-      src={cardImages[getCreditCardType(card.masked_card_number)].src}
-      alt={card.name}
-    />
-  </label>
-);
-
-const DeleteIcon = ({ onClick }) => (
-  <span className="cursor-pointer p-1" onClick={onClick}>
-    <Icon name="close" size={12} />
-  </span>
-);
-
-const InstallmentSection = ({
-  title,
-  selectedCard,
-  installmentOptions,
-  translations,
-  errors
-}) => (
-  <div className="border-solid border-gray-400 bg-white">
-    <div className="px-4 py-2">
-      <span className="text-black-800 text-lg font-medium">{title}</span>
-    </div>
-    <SavedCardInstallments
-      selectedCard={selectedCard}
-      installmentOptions={installmentOptions}
-      translations={translations}
-      error={errors}
-    />
-  </div>
-);
-
-const AgreementAndSubmit = ({
-  agreementCheckbox,
-  control,
-  errors,
-  formError,
-  buttonText
-}) => (
-  <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
-    {agreementCheckbox &&
-      cloneElement(agreementCheckbox, {
-        control,
-        error: errors.agreement,
-        fieldId: 'agreement'
-      })}
-    {formError && (
-      <ErrorText message={formError.non_field_errors ?? formError.status} />
-    )}
-    <Button
-      type="submit"
-      className="group uppercase mt-4 inline-flex items-center justify-center"
-    >
-      <span>{buttonText}</span>
-      <Icon name="chevron-end" size={12} className="ml-2 h-3" />
-    </Button>
-  </div>
-);
-
-const ErrorText = ({ message }) => (
-  <div className="w-full text-xs text-start px-1 mt-3 text-error">
-    {message}
-  </div>
-);
-
 export default SavedCardOption;