@akinon/pz-saved-card 1.59.0-rc.3 → 1.59.0-rc.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @akinon/pz-saved-card
 
+## 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.3",
+  "version": "1.59.0-rc.5",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

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/views/saved-card-option.tsx

@@ -5,7 +5,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import React, { cloneElement, ReactElement, useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from 'projectzeronext/src/redux/store';
 import {
   useCompleteSavedCardMutation,
   useGetSavedCardsQuery,
@@ -35,7 +34,7 @@ import {
   SavedCardOptionTexts
 } from '../types';
 
-const cardImages = { amex, mastercard, troy, visa, other };
+export const cardImages = { amex, mastercard, troy, visa, other };
 
 type SavedCardOptionProps = {
   texts?: SavedCardOptionTexts;
@@ -45,6 +44,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,7 +99,13 @@ 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);
 
@@ -105,9 +116,9 @@ const SavedCardOption = ({
   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,
@@ -139,8 +150,15 @@ const SavedCardOption = ({
 
   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 +182,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,