@blocklet/payment-react 1.21.12 → 1.21.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.aigne/doc-smith/config.yaml +2 -2
- package/es/components/country-select.d.ts +6 -2
- package/es/components/country-select.js +170 -30
- package/es/components/source-data-viewer.js +25 -14
- package/es/history/credit/transactions-list.js +11 -1
- package/es/index.d.ts +1 -0
- package/es/libs/validator.d.ts +161 -0
- package/es/libs/validator.js +172 -61
- package/es/locales/en.js +1 -0
- package/es/locales/zh.js +1 -0
- package/es/payment/form/address.d.ts +1 -2
- package/es/payment/form/address.js +38 -41
- package/es/payment/form/index.js +130 -13
- package/lib/components/country-select.d.ts +6 -2
- package/lib/components/country-select.js +173 -40
- package/lib/components/source-data-viewer.js +5 -3
- package/lib/history/credit/transactions-list.js +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/libs/validator.d.ts +161 -0
- package/lib/libs/validator.js +173 -6
- package/lib/locales/en.js +1 -0
- package/lib/locales/zh.js +1 -0
- package/lib/payment/form/address.d.ts +1 -2
- package/lib/payment/form/address.js +51 -55
- package/lib/payment/form/index.js +168 -12
- package/package.json +3 -3
- package/src/components/country-select.tsx +176 -25
- package/src/components/source-data-viewer.tsx +9 -3
- package/src/history/credit/transactions-list.tsx +6 -1
- package/src/index.ts +2 -0
- package/src/libs/validator.ts +173 -61
- package/src/locales/en.tsx +1 -0
- package/src/locales/zh.tsx +1 -0
- package/src/payment/form/address.tsx +45 -50
- package/src/payment/form/index.tsx +157 -12
package/lib/libs/validator.js
CHANGED
|
@@ -4,17 +4,184 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getFieldValidation = getFieldValidation;
|
|
7
|
+
exports.postalCodePatterns = void 0;
|
|
7
8
|
exports.validatePostalCode = validatePostalCode;
|
|
8
|
-
var _isPostalCode = _interopRequireDefault(require("validator/lib/isPostalCode"));
|
|
9
9
|
var _locales = require("../locales");
|
|
10
|
-
|
|
11
|
-
const
|
|
10
|
+
const threeDigit = /^\d{3}$/;
|
|
11
|
+
const fourDigit = /^\d{4}$/;
|
|
12
|
+
const fiveDigit = /^\d{5}$/;
|
|
13
|
+
const sixDigit = /^\d{6}$/;
|
|
14
|
+
const postalCodePatterns = exports.postalCodePatterns = {
|
|
15
|
+
GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
|
|
16
|
+
JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
|
|
17
|
+
GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
|
|
18
|
+
IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
|
|
19
|
+
US: /^\d{5}([ -]\d{4})?$/,
|
|
20
|
+
CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
|
|
21
|
+
DE: /^\d{5}$/,
|
|
22
|
+
JP: /^\d{3}-?\d{4}$/,
|
|
23
|
+
FR: /^\d{2}[ ]?\d{3}$/,
|
|
24
|
+
AU: fourDigit,
|
|
25
|
+
IT: /^\d{5}$/,
|
|
26
|
+
CH: fourDigit,
|
|
27
|
+
AT: fourDigit,
|
|
28
|
+
ES: /^\d{5}$/,
|
|
29
|
+
NL: /^\d{4}[ ]?[A-Z]{2}$/i,
|
|
30
|
+
BE: fourDigit,
|
|
31
|
+
DK: fourDigit,
|
|
32
|
+
SE: /^\d{3}[ ]?\d{2}$/,
|
|
33
|
+
NO: fourDigit,
|
|
34
|
+
BR: /^\d{5}-?\d{3}$/,
|
|
35
|
+
PT: /^\d{4}(-\d{3})?$/,
|
|
36
|
+
FI: fiveDigit,
|
|
37
|
+
AX: /^22\d{3}$/,
|
|
38
|
+
KR: /^\d{5}$/,
|
|
39
|
+
// 2015年起使用5位数字邮编
|
|
40
|
+
CN: /^\d{6}$/,
|
|
41
|
+
TW: /^\d{3}(\d{2})?$/,
|
|
42
|
+
SG: sixDigit,
|
|
43
|
+
DZ: fiveDigit,
|
|
44
|
+
AD: /^AD\d{3}$/,
|
|
45
|
+
AR: /^([A-HJ-NP-Z])?\d{4}([A-Z]{3})?$/i,
|
|
46
|
+
AM: /^(37)?\d{4}$/,
|
|
47
|
+
AZ: /^\d{4}$/,
|
|
48
|
+
BH: /^((1[0-2]|[2-9])\d{2})?$/,
|
|
49
|
+
BD: fourDigit,
|
|
50
|
+
BB: /^(BB\d{5})?$/i,
|
|
51
|
+
BY: sixDigit,
|
|
52
|
+
BM: /^[A-Z]{2}[ ]?[A-Z0-9]{2}$/i,
|
|
53
|
+
BA: /^\d{5}$/,
|
|
54
|
+
IO: /^BBND 1ZZ$/i,
|
|
55
|
+
BN: /^[A-Z]{2}[ ]?\d{4}$/i,
|
|
56
|
+
BG: fourDigit,
|
|
57
|
+
KH: fiveDigit,
|
|
58
|
+
CV: fourDigit,
|
|
59
|
+
CL: /^\d{7}$/,
|
|
60
|
+
CR: /^\d{4,5}|\d{3}-\d{4}$/,
|
|
61
|
+
HR: /^\d{5}$/,
|
|
62
|
+
CY: fourDigit,
|
|
63
|
+
CZ: /^\d{3}[ ]?\d{2}$/,
|
|
64
|
+
DO: fiveDigit,
|
|
65
|
+
EC: /^([A-Z]\d{4}[A-Z]|(?:[A-Z]{2})?\d{6})?$/i,
|
|
66
|
+
EG: fiveDigit,
|
|
67
|
+
EE: fiveDigit,
|
|
68
|
+
FO: threeDigit,
|
|
69
|
+
GE: fourDigit,
|
|
70
|
+
GR: /^\d{3}[ ]?\d{2}$/,
|
|
71
|
+
GL: /^39\d{2}$/,
|
|
72
|
+
GT: fiveDigit,
|
|
73
|
+
HT: /^\d{4}$/,
|
|
74
|
+
HN: /^(?:\d{5})?$/,
|
|
75
|
+
HU: fourDigit,
|
|
76
|
+
IS: threeDigit,
|
|
77
|
+
IN: /^[1-9]\d{5}$/,
|
|
78
|
+
ID: fiveDigit,
|
|
79
|
+
IL: fiveDigit,
|
|
80
|
+
JO: fiveDigit,
|
|
81
|
+
KZ: sixDigit,
|
|
82
|
+
KE: fiveDigit,
|
|
83
|
+
KW: fiveDigit,
|
|
84
|
+
LA: fiveDigit,
|
|
85
|
+
LV: fourDigit,
|
|
86
|
+
LB: /^(\d{4}([ ]?\d{4})?)?$/,
|
|
87
|
+
LI: /^(948[5-9])|(949[0-7])$/,
|
|
88
|
+
LT: fiveDigit,
|
|
89
|
+
LU: fourDigit,
|
|
90
|
+
MK: fourDigit,
|
|
91
|
+
MY: fiveDigit,
|
|
92
|
+
MV: fiveDigit,
|
|
93
|
+
MT: /^[A-Z]{3}[ ]?\d{2,4}$/i,
|
|
94
|
+
MU: /^(\d{3}[A-Z]{2}\d{3})?$/i,
|
|
95
|
+
MX: fiveDigit,
|
|
96
|
+
MD: fourDigit,
|
|
97
|
+
MC: /^980\d{2}$/,
|
|
98
|
+
MA: fiveDigit,
|
|
99
|
+
NP: fiveDigit,
|
|
100
|
+
NZ: fourDigit,
|
|
101
|
+
NI: /^((\d{4}-)?\d{3}-\d{3}(-\d{1})?)?$/,
|
|
102
|
+
NG: /^(\d{6})?$/,
|
|
103
|
+
OM: /^(PC )?\d{3}$/i,
|
|
104
|
+
PK: fiveDigit,
|
|
105
|
+
PY: fourDigit,
|
|
106
|
+
PH: fourDigit,
|
|
107
|
+
PL: /^\d{2}-\d{3}$/,
|
|
108
|
+
PR: /^00[679]\d{2}([ -]\d{4})?$/,
|
|
109
|
+
RO: sixDigit,
|
|
110
|
+
RU: sixDigit,
|
|
111
|
+
SM: /^4789\d$/,
|
|
112
|
+
SA: fiveDigit,
|
|
113
|
+
SN: fiveDigit,
|
|
114
|
+
SK: /^\d{3}[ ]?\d{2}$/,
|
|
115
|
+
SI: fourDigit,
|
|
116
|
+
ZA: fourDigit,
|
|
117
|
+
LK: fiveDigit,
|
|
118
|
+
TJ: sixDigit,
|
|
119
|
+
TH: fiveDigit,
|
|
120
|
+
TN: fourDigit,
|
|
121
|
+
TR: fiveDigit,
|
|
122
|
+
TM: sixDigit,
|
|
123
|
+
UA: fiveDigit,
|
|
124
|
+
UY: fiveDigit,
|
|
125
|
+
UZ: sixDigit,
|
|
126
|
+
VA: /^00120$/,
|
|
127
|
+
VE: fourDigit,
|
|
128
|
+
ZM: fiveDigit,
|
|
129
|
+
// Territories & special regions
|
|
130
|
+
AS: /^96799$/,
|
|
131
|
+
CC: /^6799$/,
|
|
132
|
+
CK: fourDigit,
|
|
133
|
+
RS: sixDigit,
|
|
134
|
+
ME: /^8\d{4}$/,
|
|
135
|
+
CS: /^\d{5}$/,
|
|
136
|
+
// historical
|
|
137
|
+
YU: /^\d{5}$/,
|
|
138
|
+
// historical
|
|
139
|
+
CX: /^6798$/,
|
|
140
|
+
ET: fourDigit,
|
|
141
|
+
FK: /^FIQQ 1ZZ$/i,
|
|
142
|
+
NF: /^2899$/,
|
|
143
|
+
FM: /^(9694[1-4])([ -]\d{4})?$/,
|
|
144
|
+
GF: /^9[78]3\d{2}$/,
|
|
145
|
+
GN: threeDigit,
|
|
146
|
+
GP: /^9[78][01]\d{2}$/,
|
|
147
|
+
GS: /^SIQQ 1ZZ$/i,
|
|
148
|
+
GU: /^969[123]\d([ -]\d{4})?$/,
|
|
149
|
+
GW: fourDigit,
|
|
150
|
+
HM: fourDigit,
|
|
151
|
+
IQ: fiveDigit,
|
|
152
|
+
KG: sixDigit,
|
|
153
|
+
LR: fourDigit,
|
|
154
|
+
LS: threeDigit,
|
|
155
|
+
MG: threeDigit,
|
|
156
|
+
MH: /^969[67]\d([ -]\d{4})?$/,
|
|
157
|
+
MN: sixDigit,
|
|
158
|
+
MP: /^9695[012]([ -]\d{4})?$/,
|
|
159
|
+
MQ: /^9[78]2\d{2}$/,
|
|
160
|
+
NC: /^988\d{2}$/,
|
|
161
|
+
NE: fourDigit,
|
|
162
|
+
VI: /^008(([0-4]\d)|(5[01]))([ -]\d{4})?$/,
|
|
163
|
+
VN: sixDigit,
|
|
164
|
+
PF: /^987\d{2}$/,
|
|
165
|
+
PG: threeDigit,
|
|
166
|
+
PM: /^9[78]5\d{2}$/,
|
|
167
|
+
PN: /^PCRN 1ZZ$/i,
|
|
168
|
+
PW: /^96940$/,
|
|
169
|
+
RE: /^9[78]4\d{2}$/,
|
|
170
|
+
SH: /^(ASCN|STHL) 1ZZ$/i,
|
|
171
|
+
SJ: fourDigit,
|
|
172
|
+
SO: fiveDigit,
|
|
173
|
+
SZ: /^[HLMS]\d{3}$/i,
|
|
174
|
+
TC: /^TKCA 1ZZ$/i,
|
|
175
|
+
WF: /^986\d{2}$/,
|
|
176
|
+
XK: fiveDigit,
|
|
177
|
+
YT: /^976\d{2}$/
|
|
178
|
+
};
|
|
12
179
|
function validatePostalCode(postalCode, country) {
|
|
13
180
|
if (!postalCode) return true;
|
|
14
|
-
const countryUpper = country?.toUpperCase();
|
|
15
|
-
const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
|
|
16
181
|
try {
|
|
17
|
-
|
|
182
|
+
const countryUpper = country?.toUpperCase();
|
|
183
|
+
if (!countryUpper) return false;
|
|
184
|
+
return !postalCodePatterns[countryUpper] || postalCodePatterns[countryUpper].test(postalCode);
|
|
18
185
|
} catch (error) {
|
|
19
186
|
console.error(error);
|
|
20
187
|
return false;
|
package/lib/locales/en.js
CHANGED
|
@@ -228,6 +228,7 @@ module.exports = (0, _flat.default)({
|
|
|
228
228
|
phonePlaceholder: "Phone number",
|
|
229
229
|
phoneTip: "In case we need to contact you about your order"
|
|
230
230
|
},
|
|
231
|
+
customerInfo: "Customer Information",
|
|
231
232
|
upsell: {
|
|
232
233
|
save: "Save with {recurring} billing",
|
|
233
234
|
revert: "Switch to {recurring} billing",
|
package/lib/locales/zh.js
CHANGED
|
@@ -228,6 +228,7 @@ module.exports = (0, _flat.default)({
|
|
|
228
228
|
phonePlaceholder: "\u7535\u8BDD\u53F7\u7801",
|
|
229
229
|
phoneTip: "\u4EE5\u9632\u9700\u8981\u4E0E\u60A8\u8054\u7CFB\u6709\u5173\u60A8\u7684\u8BA2\u5355"
|
|
230
230
|
},
|
|
231
|
+
customerInfo: "\u5BA2\u6237\u4FE1\u606F",
|
|
231
232
|
upsell: {
|
|
232
233
|
save: "\u4F7F\u7528{recurring}\u8BA1\u8D39\u65B9\u5F0F",
|
|
233
234
|
revert: "\u5207\u6362\u5230{recurring}\u8BA1\u8D39\u65B9\u5F0F",
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type { SxProps } from '@mui/material';
|
|
2
2
|
type Props = {
|
|
3
3
|
mode: string;
|
|
4
|
-
stripe: boolean;
|
|
5
4
|
sx?: SxProps;
|
|
6
5
|
fieldValidation?: Record<string, any>;
|
|
7
6
|
errorPosition?: 'right' | 'bottom';
|
|
8
7
|
};
|
|
9
|
-
export default function AddressForm({ mode,
|
|
8
|
+
export default function AddressForm({ mode, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element;
|
|
10
9
|
export {};
|
|
@@ -15,7 +15,6 @@ var _validator = require("../../libs/validator");
|
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
function AddressForm({
|
|
17
17
|
mode,
|
|
18
|
-
stripe,
|
|
19
18
|
sx = {},
|
|
20
19
|
fieldValidation = {},
|
|
21
20
|
errorPosition = "right"
|
|
@@ -122,64 +121,61 @@ function AddressForm({
|
|
|
122
121
|
})
|
|
123
122
|
});
|
|
124
123
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
124
|
+
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
|
|
125
|
+
in: true,
|
|
126
|
+
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
|
|
127
|
+
className: "cko-payment-address cko-payment-form",
|
|
128
|
+
sx,
|
|
129
|
+
children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
130
|
+
direction: "column",
|
|
131
|
+
className: "cko-payment-form",
|
|
132
|
+
spacing: 0,
|
|
133
|
+
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
|
|
134
|
+
className: "base-label",
|
|
135
|
+
children: t("payment.checkout.billing.postal_code")
|
|
136
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
|
|
137
|
+
direction: "row",
|
|
134
138
|
spacing: 0,
|
|
135
|
-
children:
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
name: "billing_address.postal_code",
|
|
143
|
-
rules: {
|
|
144
|
-
required: t("payment.checkout.required"),
|
|
145
|
-
validate: x => {
|
|
146
|
-
const isValid = (0, _validator.validatePostalCode)(x, country);
|
|
147
|
-
return isValid ? true : t("payment.checkout.invalid");
|
|
148
|
-
},
|
|
149
|
-
...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
|
|
139
|
+
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
|
|
140
|
+
name: "billing_address.postal_code",
|
|
141
|
+
rules: {
|
|
142
|
+
required: t("payment.checkout.required"),
|
|
143
|
+
validate: x => {
|
|
144
|
+
const isValid = (0, _validator.validatePostalCode)(x, country);
|
|
145
|
+
return isValid ? true : t("payment.checkout.invalid");
|
|
150
146
|
},
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
147
|
+
...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale)
|
|
148
|
+
},
|
|
149
|
+
errorPosition,
|
|
150
|
+
variant: "outlined",
|
|
151
|
+
placeholder: t("payment.checkout.billing.postal_code"),
|
|
152
|
+
InputProps: {
|
|
153
|
+
startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
|
|
154
|
+
position: "start",
|
|
155
|
+
style: {
|
|
156
|
+
marginRight: "2px",
|
|
157
|
+
marginLeft: "-8px"
|
|
158
|
+
},
|
|
159
|
+
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
|
160
|
+
name: "billing_address.country",
|
|
161
|
+
control,
|
|
162
|
+
render: ({
|
|
163
|
+
field
|
|
164
|
+
}) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
|
|
165
|
+
...field,
|
|
166
|
+
ref: field.ref,
|
|
167
|
+
sx: {
|
|
168
|
+
".MuiOutlinedInput-notchedOutline": {
|
|
169
|
+
borderColor: "transparent !important"
|
|
173
170
|
}
|
|
174
|
-
}
|
|
171
|
+
}
|
|
175
172
|
})
|
|
176
173
|
})
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
})
|
|
180
|
-
})
|
|
174
|
+
})
|
|
175
|
+
}
|
|
176
|
+
})
|
|
177
|
+
})]
|
|
181
178
|
})
|
|
182
|
-
})
|
|
183
|
-
}
|
|
184
|
-
return null;
|
|
179
|
+
})
|
|
180
|
+
});
|
|
185
181
|
}
|
|
@@ -8,6 +8,7 @@ exports.waitForCheckoutComplete = exports.hasDidWallet = void 0;
|
|
|
8
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
9
|
require("react-international-phone/style.css");
|
|
10
10
|
var _context = require("@arcblock/ux/lib/Locale/context");
|
|
11
|
+
var _reactInternationalPhone = require("react-international-phone");
|
|
11
12
|
var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
|
|
12
13
|
var _material = require("@mui/material");
|
|
13
14
|
var _ahooks = require("ahooks");
|
|
@@ -159,7 +160,8 @@ function PaymentForm({
|
|
|
159
160
|
customerLimited: false,
|
|
160
161
|
stripePaying: false,
|
|
161
162
|
fastCheckoutInfo: null,
|
|
162
|
-
creditInsufficientInfo: null
|
|
163
|
+
creditInsufficientInfo: null,
|
|
164
|
+
showEditForm: false
|
|
163
165
|
});
|
|
164
166
|
const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
|
|
165
167
|
const searchParams = (0, _util2.getQueryParams)(window.location.href);
|
|
@@ -277,25 +279,100 @@ function PaymentForm({
|
|
|
277
279
|
const paymentCurrency = currencies.find(x => x.id === paymentCurrencyId);
|
|
278
280
|
const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
|
|
279
281
|
const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
|
|
280
|
-
const
|
|
282
|
+
const validateUserInfo = () => {
|
|
281
283
|
if (!session?.user) {
|
|
282
284
|
return false;
|
|
283
285
|
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
+
const {
|
|
287
|
+
fullName,
|
|
288
|
+
name,
|
|
289
|
+
email,
|
|
290
|
+
phone,
|
|
291
|
+
address
|
|
292
|
+
} = session.user;
|
|
293
|
+
const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
|
|
294
|
+
const hasName = !!(fullName || name);
|
|
295
|
+
if (!hasName) {
|
|
296
|
+
return false;
|
|
286
297
|
}
|
|
287
|
-
|
|
288
|
-
|
|
298
|
+
const hasValidEmail = email && (0, _isEmail.default)(email);
|
|
299
|
+
if (!hasValidEmail) {
|
|
300
|
+
return false;
|
|
289
301
|
}
|
|
290
|
-
const
|
|
291
|
-
if (
|
|
292
|
-
|
|
302
|
+
const nameValidation = (0, _validator.getFieldValidation)("customer_name", fieldValidation, locale);
|
|
303
|
+
if (nameValidation.pattern && fullName) {
|
|
304
|
+
const pattern = nameValidation.pattern.value;
|
|
305
|
+
if (!pattern.test(fullName)) {
|
|
306
|
+
return false;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
const emailValidation = (0, _validator.getFieldValidation)("customer_email", fieldValidation, locale);
|
|
310
|
+
if (emailValidation.pattern && email) {
|
|
311
|
+
const pattern = emailValidation.pattern.value;
|
|
312
|
+
if (!pattern.test(email)) {
|
|
313
|
+
return false;
|
|
314
|
+
}
|
|
293
315
|
}
|
|
294
|
-
if (
|
|
316
|
+
if (!address || !address.postalCode || !(0, _validator.validatePostalCode)(address.postalCode, address.country)) {
|
|
295
317
|
return false;
|
|
296
318
|
}
|
|
319
|
+
const postalCodeValidation = (0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation, locale);
|
|
320
|
+
if (postalCodeValidation.pattern) {
|
|
321
|
+
const pattern = postalCodeValidation.pattern.value;
|
|
322
|
+
if (!pattern.test(address.postalCode)) {
|
|
323
|
+
return false;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
if (checkoutSession.phone_number_collection?.enabled) {
|
|
327
|
+
if (!phone || phone.trim() === "") {
|
|
328
|
+
return false;
|
|
329
|
+
}
|
|
330
|
+
const phoneValidation = (0, _validator.getFieldValidation)("customer_phone", fieldValidation, locale);
|
|
331
|
+
if (phoneValidation.pattern) {
|
|
332
|
+
const pattern = phoneValidation.pattern.value;
|
|
333
|
+
if (!pattern.test(phone)) {
|
|
334
|
+
return false;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
const addressMode = checkoutSession.billing_address_collection;
|
|
339
|
+
if (addressMode === "required") {
|
|
340
|
+
if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
|
|
341
|
+
return false;
|
|
342
|
+
}
|
|
343
|
+
const line1Validation = (0, _validator.getFieldValidation)("billing_address.line1", fieldValidation, locale);
|
|
344
|
+
if (line1Validation.pattern) {
|
|
345
|
+
const pattern = line1Validation.pattern.value;
|
|
346
|
+
if (!pattern.test(address.line1)) {
|
|
347
|
+
return false;
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
const cityValidation = (0, _validator.getFieldValidation)("billing_address.city", fieldValidation, locale);
|
|
351
|
+
if (cityValidation.pattern) {
|
|
352
|
+
const pattern = cityValidation.pattern.value;
|
|
353
|
+
if (!pattern.test(address.city)) {
|
|
354
|
+
return false;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
const stateValidation = (0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale);
|
|
358
|
+
if (stateValidation.pattern) {
|
|
359
|
+
const pattern = stateValidation.pattern.value;
|
|
360
|
+
if (!pattern.test(address.province)) {
|
|
361
|
+
return false;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
297
365
|
return true;
|
|
298
|
-
}
|
|
366
|
+
};
|
|
367
|
+
const showForm = (0, _react.useMemo)(() => {
|
|
368
|
+
if (!session?.user) {
|
|
369
|
+
return false;
|
|
370
|
+
}
|
|
371
|
+
if (state.showEditForm) {
|
|
372
|
+
return true;
|
|
373
|
+
}
|
|
374
|
+
return !validateUserInfo();
|
|
375
|
+
}, [session?.user, method, state.showEditForm]);
|
|
299
376
|
const handleConnected = async () => {
|
|
300
377
|
if (processingRef.current) {
|
|
301
378
|
return;
|
|
@@ -822,6 +899,86 @@ function PaymentForm({
|
|
|
822
899
|
returnUrl: getRedirectUrl()
|
|
823
900
|
})]
|
|
824
901
|
})
|
|
902
|
+
}), !showForm && session?.user && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
903
|
+
spacing: 1.25,
|
|
904
|
+
sx: {
|
|
905
|
+
mt: 2,
|
|
906
|
+
p: 2,
|
|
907
|
+
pt: 1,
|
|
908
|
+
backgroundColor: "background.paper",
|
|
909
|
+
borderRadius: 1,
|
|
910
|
+
border: "1px solid",
|
|
911
|
+
borderColor: "divider"
|
|
912
|
+
},
|
|
913
|
+
children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
914
|
+
direction: "row",
|
|
915
|
+
justifyContent: "space-between",
|
|
916
|
+
alignItems: "center",
|
|
917
|
+
sx: {
|
|
918
|
+
mb: 0.25
|
|
919
|
+
},
|
|
920
|
+
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
921
|
+
variant: "subtitle2",
|
|
922
|
+
sx: {
|
|
923
|
+
color: "text.primary",
|
|
924
|
+
fontSize: "0.875rem"
|
|
925
|
+
},
|
|
926
|
+
children: t("payment.checkout.customerInfo")
|
|
927
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
|
|
928
|
+
size: "small",
|
|
929
|
+
variant: "text",
|
|
930
|
+
onClick: () => setState({
|
|
931
|
+
showEditForm: true
|
|
932
|
+
}),
|
|
933
|
+
sx: {
|
|
934
|
+
minWidth: 0
|
|
935
|
+
},
|
|
936
|
+
children: t("common.edit")
|
|
937
|
+
})]
|
|
938
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
939
|
+
spacing: 0.5,
|
|
940
|
+
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
941
|
+
variant: "body2",
|
|
942
|
+
sx: {
|
|
943
|
+
color: "text.primary",
|
|
944
|
+
fontWeight: 600,
|
|
945
|
+
fontSize: "0.9375rem"
|
|
946
|
+
},
|
|
947
|
+
children: session.user.fullName || session.user.name
|
|
948
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
949
|
+
variant: "body2",
|
|
950
|
+
sx: {
|
|
951
|
+
color: "text.secondary",
|
|
952
|
+
fontSize: "0.8125rem"
|
|
953
|
+
},
|
|
954
|
+
children: session.user.email
|
|
955
|
+
}), checkoutSession.phone_number_collection?.enabled && session.user.phone && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
956
|
+
variant: "body2",
|
|
957
|
+
sx: {
|
|
958
|
+
color: "text.secondary",
|
|
959
|
+
fontSize: "0.8125rem"
|
|
960
|
+
},
|
|
961
|
+
children: session.user.phone
|
|
962
|
+
}), session.user.address && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
963
|
+
direction: "row",
|
|
964
|
+
alignItems: "center",
|
|
965
|
+
spacing: 0.75,
|
|
966
|
+
children: [session.user.address.country && /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
|
|
967
|
+
iso2: session.user.address.country.toLowerCase(),
|
|
968
|
+
style: {
|
|
969
|
+
width: 18,
|
|
970
|
+
height: 14
|
|
971
|
+
}
|
|
972
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
|
|
973
|
+
variant: "body2",
|
|
974
|
+
sx: {
|
|
975
|
+
color: "text.secondary",
|
|
976
|
+
fontSize: "0.8125rem"
|
|
977
|
+
},
|
|
978
|
+
children: [[session.user.address.line1, session.user.address.city, session.user.address.province, session.user.address.country?.toUpperCase()].filter(Boolean).join(", "), session.user.address.postalCode && ` [ ${t("payment.checkout.billing.postal_code")}: ${session.user.address.postalCode} ]`]
|
|
979
|
+
})]
|
|
980
|
+
})]
|
|
981
|
+
})]
|
|
825
982
|
}), showForm && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
826
983
|
direction: "column",
|
|
827
984
|
className: "cko-payment-form",
|
|
@@ -876,7 +1033,6 @@ function PaymentForm({
|
|
|
876
1033
|
})]
|
|
877
1034
|
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
|
|
878
1035
|
mode: checkoutSession.billing_address_collection,
|
|
879
|
-
stripe: method?.type === "stripe",
|
|
880
1036
|
sx: {
|
|
881
1037
|
marginTop: "0 !important"
|
|
882
1038
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/payment-react",
|
|
3
|
-
"version": "1.21.
|
|
3
|
+
"version": "1.21.14",
|
|
4
4
|
"description": "Reusable react components for payment kit v2",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"@babel/core": "^7.27.4",
|
|
95
95
|
"@babel/preset-env": "^7.27.2",
|
|
96
96
|
"@babel/preset-react": "^7.27.1",
|
|
97
|
-
"@blocklet/payment-types": "1.21.
|
|
97
|
+
"@blocklet/payment-types": "1.21.14",
|
|
98
98
|
"@storybook/addon-essentials": "^7.6.20",
|
|
99
99
|
"@storybook/addon-interactions": "^7.6.20",
|
|
100
100
|
"@storybook/addon-links": "^7.6.20",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"vite-plugin-babel": "^1.3.1",
|
|
126
126
|
"vite-plugin-node-polyfills": "^0.23.0"
|
|
127
127
|
},
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "31f93a8310fe5184be8dd4ff23b362906c8a66cf"
|
|
129
129
|
}
|