@akinon/pz-saved-card 1.59.0-rc.4 → 1.59.0-rc.5
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
# @akinon/pz-saved-card
|
|
2
2
|
|
|
3
|
+
## 1.59.0-rc.5
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- b92001c: ZERO-2903: fix missing dependency in useEffect hook
|
|
8
|
+
- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
|
|
9
|
+
|
|
3
10
|
## 1.59.0-rc.4
|
|
4
11
|
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- b92001c: ZERO-2903: fix missing dependency in useEffect hook
|
|
15
|
+
- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
|
|
16
|
+
|
|
5
17
|
## 1.59.0-rc.3
|
|
6
18
|
|
|
7
19
|
## 1.59.0-rc.2
|
package/package.json
CHANGED
|
@@ -40,7 +40,7 @@ const SavedCardInstallments = ({
|
|
|
40
40
|
});
|
|
41
41
|
setInstallmentOption(firstOptionPk);
|
|
42
42
|
}
|
|
43
|
-
}, [installmentOptions, installmentOption, setInstallment]);
|
|
43
|
+
}, [installmentOptions, installmentOption, setInstallment, selectedCard]);
|
|
44
44
|
|
|
45
45
|
if (installmentOptions.length === 0) {
|
|
46
46
|
return (
|
|
@@ -5,7 +5,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
|
|
|
5
5
|
import { useForm } from 'react-hook-form';
|
|
6
6
|
import React, { cloneElement, ReactElement, useEffect, useState } from 'react';
|
|
7
7
|
import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
|
|
8
|
-
import { RootState } from 'projectzeronext/src/redux/store';
|
|
9
8
|
import {
|
|
10
9
|
useCompleteSavedCardMutation,
|
|
11
10
|
useGetSavedCardsQuery,
|
|
@@ -35,7 +34,7 @@ import {
|
|
|
35
34
|
SavedCardOptionTexts
|
|
36
35
|
} from '../types';
|
|
37
36
|
|
|
38
|
-
const cardImages = { amex, mastercard, troy, visa, other };
|
|
37
|
+
export const cardImages = { amex, mastercard, troy, visa, other };
|
|
39
38
|
|
|
40
39
|
type SavedCardOptionProps = {
|
|
41
40
|
texts?: SavedCardOptionTexts;
|
|
@@ -45,6 +44,12 @@ type SavedCardOptionProps = {
|
|
|
45
44
|
installmentSection?: (props: InstallmentSectionProps) => ReactElement;
|
|
46
45
|
agreementAndSubmit?: (props: AgreementAndSubmitProps) => ReactElement;
|
|
47
46
|
};
|
|
47
|
+
formWrapperClassName?: string;
|
|
48
|
+
cardSelectionWrapperClassName?: string;
|
|
49
|
+
installmentWrapperClassName?: string;
|
|
50
|
+
formProps?: React.FormHTMLAttributes<HTMLFormElement>;
|
|
51
|
+
cardSelectionWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
52
|
+
installmentWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
48
53
|
};
|
|
49
54
|
|
|
50
55
|
const defaultTranslations: SavedCardOptionTexts = {
|
|
@@ -94,7 +99,13 @@ const createFormSchema = (errors: ErrorTexts) =>
|
|
|
94
99
|
const SavedCardOption = ({
|
|
95
100
|
texts = defaultTranslations,
|
|
96
101
|
agreementCheckbox,
|
|
97
|
-
customRender
|
|
102
|
+
customRender,
|
|
103
|
+
formWrapperClassName = 'flex flex-wrap w-full',
|
|
104
|
+
cardSelectionWrapperClassName = 'w-full flex flex-col xl:w-6/10',
|
|
105
|
+
installmentWrapperClassName = 'w-full xl:w-4/10 xl:border-l xl:border-t-0',
|
|
106
|
+
formProps = {},
|
|
107
|
+
cardSelectionWrapperProps = {},
|
|
108
|
+
installmentWrapperProps = {}
|
|
98
109
|
}: SavedCardOptionProps) => {
|
|
99
110
|
const mergedTexts = mergeTranslations(texts, defaultTranslations);
|
|
100
111
|
|
|
@@ -105,9 +116,9 @@ const SavedCardOption = ({
|
|
|
105
116
|
const [completeSavedCard] = useCompleteSavedCardMutation();
|
|
106
117
|
const [setSavedCard] = useSetSavedCardMutation();
|
|
107
118
|
const installmentOptions = useAppSelector(
|
|
108
|
-
(state
|
|
119
|
+
(state) => state.checkout.installmentOptions
|
|
109
120
|
);
|
|
110
|
-
const cards = useAppSelector((state
|
|
121
|
+
const cards = useAppSelector((state) => state.savedCard.cards);
|
|
111
122
|
|
|
112
123
|
const {
|
|
113
124
|
register,
|
|
@@ -139,8 +150,15 @@ const SavedCardOption = ({
|
|
|
139
150
|
|
|
140
151
|
return (
|
|
141
152
|
<>
|
|
142
|
-
<form
|
|
143
|
-
|
|
153
|
+
<form
|
|
154
|
+
className={formWrapperClassName}
|
|
155
|
+
onSubmit={handleSubmit(onSubmit)}
|
|
156
|
+
{...formProps}
|
|
157
|
+
>
|
|
158
|
+
<div
|
|
159
|
+
className={cardSelectionWrapperClassName}
|
|
160
|
+
{...cardSelectionWrapperProps}
|
|
161
|
+
>
|
|
144
162
|
{customRender?.cardSelectionSection ? (
|
|
145
163
|
customRender.cardSelectionSection({
|
|
146
164
|
title: mergedTexts.title,
|
|
@@ -164,7 +182,10 @@ const SavedCardOption = ({
|
|
|
164
182
|
)}
|
|
165
183
|
</div>
|
|
166
184
|
|
|
167
|
-
<div
|
|
185
|
+
<div
|
|
186
|
+
className={installmentWrapperClassName}
|
|
187
|
+
{...installmentWrapperProps}
|
|
188
|
+
>
|
|
168
189
|
{customRender?.installmentSection ? (
|
|
169
190
|
customRender.installmentSection({
|
|
170
191
|
title: mergedTexts.installment?.title,
|