@akinon/pz-saved-card 1.59.0-rc.4 → 1.60.0-rc.10

package/CHANGELOG.md

@@ -1,7 +1,39 @@
 # @akinon/pz-saved-card
 
+## 1.60.0-rc.10
+
+## 1.60.0-rc.9
+
+## 1.60.0-rc.8
+
+## 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
+
+- b92001c: ZERO-2903: fix missing dependency in useEffect hook
+- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
+
+## 1.59.0-rc.5
+
+### Minor Changes
+
+- b92001c: ZERO-2903: fix missing dependency in useEffect hook
+- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
+
 ## 1.59.0-rc.4
 
+### Minor Changes
+
+- b92001c: ZERO-2903: fix missing dependency in useEffect hook
+- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
+
 ## 1.59.0-rc.3
 
 ## 1.59.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-saved-card",
-  "version": "1.59.0-rc.4",
+  "version": "1.60.0-rc.10",
   "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/components/installments.tsx

@@ -40,7 +40,7 @@ const SavedCardInstallments = ({
       });
       setInstallmentOption(firstOptionPk);
     }
-  }, [installmentOptions, installmentOption, setInstallment]);
+  }, [installmentOptions, installmentOption, setInstallment, selectedCard]);
 
   if (installmentOptions.length === 0) {
     return (

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,29 +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 { RootState } from 'projectzeronext/src/redux/store';
 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,
@@ -34,8 +25,11 @@ 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';
 
-const cardImages = { amex, mastercard, troy, visa, other };
+export const cardImages = { amex, mastercard, troy, visa, other };
 
 type SavedCardOptionProps = {
   texts?: SavedCardOptionTexts;
@@ -45,6 +39,12 @@ type SavedCardOptionProps = {
     installmentSection?: (props: InstallmentSectionProps) => ReactElement;
     agreementAndSubmit?: (props: AgreementAndSubmitProps) => ReactElement;
   };
+  formWrapperClassName?: string;
+  cardSelectionWrapperClassName?: string;
+  installmentWrapperClassName?: string;
+  formProps?: React.FormHTMLAttributes<HTMLFormElement>;
+  cardSelectionWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+  installmentWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 };
 
 const defaultTranslations: SavedCardOptionTexts = {
@@ -94,40 +94,54 @@ const createFormSchema = (errors: ErrorTexts) =>
 const SavedCardOption = ({
   texts = defaultTranslations,
   agreementCheckbox,
-  customRender
+  customRender,
+  formWrapperClassName = 'flex flex-wrap w-full',
+  cardSelectionWrapperClassName = 'w-full flex flex-col xl:w-6/10',
+  installmentWrapperClassName = 'w-full xl:w-4/10 xl:border-l xl:border-t-0',
+  formProps = {},
+  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();
   const [setSavedCard] = useSetSavedCardMutation();
   const installmentOptions = useAppSelector(
-    (state: RootState) => state.checkout.installmentOptions
+    (state) => state.checkout.installmentOptions
   );
-  const cards = useAppSelector((state: RootState) => state.savedCard.cards);
+  const cards = useAppSelector((state) => state.savedCard.cards);
 
   const {
     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);
     }
   };
 
@@ -135,12 +149,19 @@ const SavedCardOption = ({
     if (savedCards?.results && !cards?.length) {
       dispatch(setCards(savedCards.results));
     }
-  }, [savedCards]);
+  }, [savedCards, cards, dispatch]);
 
   return (
     <>
-      <form className="flex flex-wrap w-full" onSubmit={handleSubmit(onSubmit)}>
-        <div className="w-full flex flex-col xl:w-6/10">
+      <form
+        className={formWrapperClassName}
+        onSubmit={handleSubmit(onSubmit)}
+        {...formProps}
+      >
+        <div
+          className={cardSelectionWrapperClassName}
+          {...cardSelectionWrapperProps}
+        >
           {customRender?.cardSelectionSection ? (
             customRender.cardSelectionSection({
               title: mergedTexts.title,
@@ -164,7 +185,10 @@ const SavedCardOption = ({
           )}
         </div>
 
-        <div className="w-full xl:w-4/10 xl:border-l xl:border-t-0">
+        <div
+          className={installmentWrapperClassName}
+          {...installmentWrapperProps}
+        >
           {customRender?.installmentSection ? (
             customRender.installmentSection({
               title: mergedTexts.installment?.title,
@@ -188,7 +212,6 @@ const SavedCardOption = ({
               agreementCheckbox,
               control,
               errors,
-              formError,
               buttonText: mergedTexts.button
             })
           ) : (
@@ -196,7 +219,6 @@ const SavedCardOption = ({
               agreementCheckbox={agreementCheckbox}
               control={control}
               errors={errors}
-              formError={formError}
               buttonText={mergedTexts.button}
             />
           )}
@@ -207,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;