fontdue-js 2.16.0 → 2.17.0
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/CHANGELOG.md +11 -0
- package/dist/__generated__/AddressFieldsRefetchQuery.graphql.d.ts +1 -1
- package/dist/__generated__/AddressFieldsRefetchQuery.graphql.js +25 -4
- package/dist/__generated__/AddressFields_viewer.graphql.d.ts +5 -1
- package/dist/__generated__/AddressFields_viewer.graphql.js +23 -2
- package/dist/__generated__/CartOrderCompleteOrderMutation.graphql.d.ts +1 -1
- package/dist/__generated__/CartOrderCompleteOrderMutation.graphql.js +10 -4
- package/dist/__generated__/CartOrderRemoveDiscountMutation.graphql.d.ts +1 -1
- package/dist/__generated__/CartOrderRemoveDiscountMutation.graphql.js +10 -4
- package/dist/__generated__/CartOrderUpdateMutation.graphql.d.ts +3 -2
- package/dist/__generated__/CartOrderUpdateMutation.graphql.js +10 -4
- package/dist/__generated__/CartQuery.graphql.d.ts +1 -1
- package/dist/__generated__/CartQuery.graphql.js +22 -4
- package/dist/__generated__/CartStateRemoveDiscountMutation.graphql.d.ts +1 -1
- package/dist/__generated__/CartStateRemoveDiscountMutation.graphql.js +43 -4
- package/dist/__generated__/CartStateUpdateMutation.graphql.d.ts +3 -2
- package/dist/__generated__/CartStateUpdateMutation.graphql.js +60 -53
- package/dist/__generated__/CartState_order.graphql.d.ts +2 -1
- package/dist/__generated__/CartState_order.graphql.js +8 -2
- package/dist/__generated__/CheckoutUpdateCustomerMutation.graphql.d.ts +1 -1
- package/dist/__generated__/CheckoutUpdateCustomerMutation.graphql.js +10 -4
- package/dist/__generated__/CheckoutUpdateOrderMutation.graphql.d.ts +5 -4
- package/dist/__generated__/CheckoutUpdateOrderMutation.graphql.js +10 -4
- package/dist/__generated__/Checkout_UpdateOrderErrors.graphql.d.ts +3 -3
- package/dist/__generated__/Checkout_UpdateOrderErrors.graphql.js +3 -3
- package/dist/__generated__/Checkout_identity.graphql.d.ts +2 -2
- package/dist/__generated__/Checkout_identity.graphql.js +3 -3
- package/dist/__generated__/Checkout_order.graphql.d.ts +3 -3
- package/dist/__generated__/Checkout_order.graphql.js +2 -2
- package/dist/__generated__/CouponCodeInputApplyCouponMutation.graphql.d.ts +1 -1
- package/dist/__generated__/CouponCodeInputApplyCouponMutation.graphql.js +43 -4
- package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.d.ts +4 -1
- package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.js +1 -1
- package/dist/__generated__/FontFamiliesQuery.graphql.d.ts +2 -1
- package/dist/__generated__/FontFamiliesQuery.graphql.js +1 -1
- package/dist/__generated__/OrderVariableSelectionRedux_viewer.graphql.d.ts +6 -1
- package/dist/__generated__/OrderVariableSelectionRedux_viewer.graphql.js +29 -2
- package/dist/__generated__/OrderVariableSelection_variables.graphql.d.ts +5 -1
- package/dist/__generated__/OrderVariableSelection_variables.graphql.js +31 -15
- package/dist/__generated__/PrecartAddToCartMutation.graphql.d.ts +2 -1
- package/dist/__generated__/PrecartAddToCartMutation.graphql.js +10 -4
- package/dist/__generated__/PriceBarSectionRefetchQuery.graphql.d.ts +2 -1
- package/dist/__generated__/PriceBarSectionRefetchQuery.graphql.js +1 -1
- package/dist/__generated__/StoreModalCartQuery.graphql.d.ts +8 -2
- package/dist/__generated__/StoreModalCartQuery.graphql.js +174 -127
- package/dist/__generated__/StoreModalIndexItem_fontCollection.graphql.d.ts +2 -1
- package/dist/__generated__/StoreModalIndexItem_fontCollection.graphql.js +8 -2
- package/dist/__generated__/StoreModalIndexQuery.graphql.d.ts +1 -1
- package/dist/__generated__/StoreModalIndexQuery.graphql.js +9 -3
- package/dist/__generated__/StoreModalOrderVariableSelection_order.graphql.d.ts +30 -0
- package/dist/__generated__/StoreModalOrderVariableSelection_order.graphql.js +98 -0
- package/dist/__generated__/StoreModalOrderVariableSelection_viewer.graphql.d.ts +1 -16
- package/dist/__generated__/StoreModalOrderVariableSelection_viewer.graphql.js +40 -104
- package/dist/__generated__/StoreModalProductQuery.graphql.d.ts +2 -1
- package/dist/__generated__/StoreModalProductQuery.graphql.js +24 -3
- package/dist/__generated__/StoreModalProductRefetchQuery.graphql.d.ts +2 -1
- package/dist/__generated__/StoreModalProductRefetchQuery.graphql.js +1 -1
- package/dist/__generated__/StoreModalProductSummaryAddToCartMutation.graphql.d.ts +2 -1
- package/dist/__generated__/StoreModalProductSummaryAddToCartMutation.graphql.js +1 -1
- package/dist/__generated__/StoreModalProductSummaryRefetchQuery.graphql.d.ts +2 -1
- package/dist/__generated__/StoreModalProductSummaryRefetchQuery.graphql.js +1 -1
- package/dist/__generated__/StoreModalUnifiedCheckoutCompleteOrderMutation.graphql.d.ts +1 -1
- package/dist/__generated__/StoreModalUnifiedCheckoutCompleteOrderMutation.graphql.js +43 -4
- package/dist/__generated__/StoreModalUnifiedCheckoutUpdateCustomerMutation.graphql.d.ts +1 -1
- package/dist/__generated__/StoreModalUnifiedCheckoutUpdateCustomerMutation.graphql.js +43 -4
- package/dist/__generated__/StoreModalUnifiedCheckoutUpdateOrderMutation.graphql.d.ts +6 -5
- package/dist/__generated__/StoreModalUnifiedCheckoutUpdateOrderMutation.graphql.js +156 -11
- package/dist/__generated__/StoreModalUnifiedCheckout_order.graphql.d.ts +13 -3
- package/dist/__generated__/StoreModalUnifiedCheckout_order.graphql.js +50 -4
- package/dist/__generated__/StoreModalUnifiedCheckout_viewer.graphql.d.ts +2 -1
- package/dist/__generated__/StoreModalUnifiedCheckout_viewer.graphql.js +10 -4
- package/dist/__generated__/TestFontsFormUpdateCustomerMutation.graphql.d.ts +1 -1
- package/dist/__generated__/TestFontsFormUpdateCustomerMutation.graphql.js +10 -4
- package/dist/__generated__/TypeTesterStandaloneChangedStylesQuery.graphql.d.ts +2 -1
- package/dist/__generated__/TypeTesterStandaloneChangedStylesQuery.graphql.js +9 -3
- package/dist/__generated__/TypeTesterStandaloneQuery.graphql.d.ts +1 -1
- package/dist/__generated__/TypeTesterStandaloneQuery.graphql.js +30 -14
- package/dist/__generated__/TypeTesterStyleSelectData_fontStyle.graphql.d.ts +2 -1
- package/dist/__generated__/TypeTesterStyleSelectData_fontStyle.graphql.js +8 -2
- package/dist/__generated__/TypeTesterStyleSelectData_viewer.graphql.d.ts +4 -1
- package/dist/__generated__/TypeTesterStyleSelectData_viewer.graphql.js +17 -2
- package/dist/__generated__/TypeTestersChangedStylesQuery.graphql.d.ts +2 -1
- package/dist/__generated__/TypeTestersChangedStylesQuery.graphql.js +9 -3
- package/dist/__generated__/TypeTestersIDQuery.graphql.d.ts +1 -1
- package/dist/__generated__/TypeTestersIDQuery.graphql.js +53 -37
- package/dist/__generated__/TypeTestersRefetchQuery.graphql.d.ts +2 -1
- package/dist/__generated__/TypeTestersRefetchQuery.graphql.js +9 -3
- package/dist/__generated__/TypeTestersSlugQuery.graphql.d.ts +1 -1
- package/dist/__generated__/TypeTestersSlugQuery.graphql.js +53 -37
- package/dist/components/Cart/AddressFields.d.ts +3 -2
- package/dist/components/Cart/AddressFields.js +45 -47
- package/dist/components/Cart/CartState.js +1 -1
- package/dist/components/Cart/CartTotals.d.ts +5 -2
- package/dist/components/Cart/CartTotals.js +24 -10
- package/dist/components/Cart/Checkout.js +33 -6
- package/dist/components/Cart/CustomerFields.js +5 -2
- package/dist/components/Cart/types.d.ts +1 -1
- package/dist/components/OrderVariableSelection/OrderVariableSelectionRedux.js +21 -1
- package/dist/components/OrderVariableSelection/index.d.ts +1 -0
- package/dist/components/OrderVariableSelection/index.js +23 -10
- package/dist/components/StoreModal/StoreModalCart.js +9 -6
- package/dist/components/StoreModal/StoreModalCheckout.js +0 -37
- package/dist/components/StoreModal/StoreModalIndexItem.js +3 -3
- package/dist/components/StoreModal/StoreModalOrderVariableSelection.d.ts +3 -1
- package/dist/components/StoreModal/StoreModalOrderVariableSelection.js +9 -5
- package/dist/components/StoreModal/StoreModalStyleButton.js +1 -8
- package/dist/components/StripeProvider/index.js +5 -3
- package/dist/components/TypeTester/TypeTesterStyleSelectData.js +12 -3
- package/dist/components/elements/StoreModalUnifiedCheckout.d.ts +60 -1
- package/dist/components/elements/StoreModalUnifiedCheckout.js +410 -202
- package/dist/fontdue.css +36 -10
- package/dist/reducer.d.ts +1 -0
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +11 -2
- package/package.json +2 -1
|
@@ -18,7 +18,7 @@ function OrderVariableSelectionRedux(_ref) {
|
|
|
18
18
|
disabled,
|
|
19
19
|
children
|
|
20
20
|
} = _ref;
|
|
21
|
-
const viewer = (0, _reactRelay.useFragment)((_OrderVariableSelectionRedux_viewer2.default.hash && _OrderVariableSelectionRedux_viewer2.default.hash !== "
|
|
21
|
+
const viewer = (0, _reactRelay.useFragment)((_OrderVariableSelectionRedux_viewer2.default.hash && _OrderVariableSelectionRedux_viewer2.default.hash !== "2856c16fbbcd6be41aaf1bd8a0f79409" && console.error("The definition of 'OrderVariableSelectionRedux_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelectionRedux_viewer2.default), viewerKey);
|
|
22
22
|
const dispatch = (0, _reactRedux.useDispatch)();
|
|
23
23
|
const selections = (0, _reactRedux.useSelector)(state => state.orderVariableSelections);
|
|
24
24
|
const handleSelectionChange = (0, _react.useCallback)(newSelections => {
|
|
@@ -27,6 +27,26 @@ function OrderVariableSelectionRedux(_ref) {
|
|
|
27
27
|
selections: newSelections
|
|
28
28
|
});
|
|
29
29
|
}, [dispatch]);
|
|
30
|
+
|
|
31
|
+
// Auto-populate Redux state with detected country for country-type variables
|
|
32
|
+
(0, _react.useEffect)(() => {
|
|
33
|
+
if (!viewer.detectedCountry || !viewer.orderVariables) return;
|
|
34
|
+
|
|
35
|
+
// Find country-type variables that don't have a selection yet
|
|
36
|
+
const countryVariablesNeedingSelection = viewer.orderVariables.filter(v => v.variableType === 'country').filter(v => !selections.find(s => s.orderVariableId === v.id));
|
|
37
|
+
if (countryVariablesNeedingSelection.length === 0) return;
|
|
38
|
+
|
|
39
|
+
// Pre-populate with detected country
|
|
40
|
+
const newSelections = [...selections, ...countryVariablesNeedingSelection.map(v => ({
|
|
41
|
+
orderVariableId: v.id,
|
|
42
|
+
orderVariableOptionId: null,
|
|
43
|
+
countryCode: viewer.detectedCountry
|
|
44
|
+
}))];
|
|
45
|
+
dispatch({
|
|
46
|
+
type: 'UPDATE_ORDER_VARIABLE_SELECTIONS',
|
|
47
|
+
selections: newSelections
|
|
48
|
+
});
|
|
49
|
+
}, [viewer.detectedCountry, viewer.orderVariables, selections, dispatch]);
|
|
30
50
|
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
31
51
|
variables: viewer,
|
|
32
52
|
selections: selections,
|
|
@@ -3,6 +3,7 @@ import { OrderVariableSelection_variables$key } from '__generated__/OrderVariabl
|
|
|
3
3
|
export interface OrderVariableSelectionInput {
|
|
4
4
|
orderVariableId: string;
|
|
5
5
|
orderVariableOptionId: string | null;
|
|
6
|
+
countryCode?: string | null;
|
|
6
7
|
}
|
|
7
8
|
export type GhostVariable = {
|
|
8
9
|
orderVariable: {
|
|
@@ -24,7 +24,8 @@ function Variable(_ref) {
|
|
|
24
24
|
selection,
|
|
25
25
|
onToggle,
|
|
26
26
|
ghost = false,
|
|
27
|
-
onRemoveGhost
|
|
27
|
+
onRemoveGhost,
|
|
28
|
+
countries
|
|
28
29
|
} = _ref;
|
|
29
30
|
const {
|
|
30
31
|
form: config
|
|
@@ -39,7 +40,7 @@ function Variable(_ref) {
|
|
|
39
40
|
// For unselected select variables, select the first option by default
|
|
40
41
|
onToggle(variable.id, variable.orderVariableOptions[0].id);
|
|
41
42
|
}
|
|
42
|
-
//
|
|
43
|
+
// Country variables are now static (non-editable)
|
|
43
44
|
}, [variable, isSelected, onToggle]);
|
|
44
45
|
const handleChangeVariableOption = (0, _react.useCallback)(e => {
|
|
45
46
|
onToggle(variable.id, e.target.value);
|
|
@@ -61,6 +62,7 @@ function Variable(_ref) {
|
|
|
61
62
|
});
|
|
62
63
|
}
|
|
63
64
|
const selectedOption = (_options = options) === null || _options === void 0 ? void 0 : _options.find(o => o.id === (selection === null || selection === void 0 ? void 0 : selection.orderVariableOptionId));
|
|
65
|
+
const selectedCountry = countries === null || countries === void 0 ? void 0 : countries.find(c => c.code === (selection === null || selection === void 0 ? void 0 : selection.countryCode));
|
|
64
66
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
65
67
|
className: "store-modal__order-variable-selection__item",
|
|
66
68
|
"data-variable-type": variable.variableType,
|
|
@@ -94,7 +96,9 @@ function Variable(_ref) {
|
|
|
94
96
|
value: id,
|
|
95
97
|
disabled: disabled
|
|
96
98
|
}, amount, " ", disabled ? '(Deprecated)' : null);
|
|
97
|
-
}))) : null
|
|
99
|
+
}))) : null, variable.variableType === 'country' && selectedCountry ? /*#__PURE__*/_react.default.createElement("span", {
|
|
100
|
+
className: "store-modal__order-variable-selection__country-value"
|
|
101
|
+
}, selectedCountry.name) : null), variable.description ? /*#__PURE__*/_react.default.createElement("div", {
|
|
98
102
|
className: "store-modal__order-variable-selection__description",
|
|
99
103
|
dangerouslySetInnerHTML: {
|
|
100
104
|
__html: variable.description
|
|
@@ -118,13 +122,14 @@ function OrderVariableSelection(_ref3) {
|
|
|
118
122
|
label
|
|
119
123
|
}
|
|
120
124
|
} = _ref3;
|
|
121
|
-
const variables = (0, _reactRelay.useFragment)((_OrderVariableSelection_variables2.default.hash && _OrderVariableSelection_variables2.default.hash !== "
|
|
122
|
-
const handleSelectionChange = (0, _react.useCallback)((variableId, optionId) => {
|
|
125
|
+
const variables = (0, _reactRelay.useFragment)((_OrderVariableSelection_variables2.default.hash && _OrderVariableSelection_variables2.default.hash !== "0bf7cc073cfd6f730927e57ddce09413" && console.error("The definition of 'OrderVariableSelection_variables' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _OrderVariableSelection_variables2.default), variablesKey);
|
|
126
|
+
const handleSelectionChange = (0, _react.useCallback)((variableId, optionId, countryCode) => {
|
|
123
127
|
var _variables$orderVaria;
|
|
124
128
|
// Update the selections with the new value
|
|
125
129
|
const newSelections = selections.map(selection => ({
|
|
126
130
|
orderVariableId: selection.orderVariableId,
|
|
127
|
-
orderVariableOptionId: selection.orderVariableOptionId
|
|
131
|
+
orderVariableOptionId: selection.orderVariableOptionId,
|
|
132
|
+
countryCode: selection.countryCode
|
|
128
133
|
}));
|
|
129
134
|
const existingIndex = newSelections.findIndex(s => s.orderVariableId === variableId);
|
|
130
135
|
|
|
@@ -137,16 +142,21 @@ function OrderVariableSelection(_ref3) {
|
|
|
137
142
|
newSelections.splice(existingIndex, 1);
|
|
138
143
|
} else {
|
|
139
144
|
// Update existing selection
|
|
145
|
+
// For country variables: clear orderVariableOptionId when setting countryCode
|
|
146
|
+
// For select/boolean variables: clear countryCode when setting orderVariableOptionId
|
|
147
|
+
const isCountryVariable = (variable === null || variable === void 0 ? void 0 : variable.variableType) === 'country';
|
|
140
148
|
newSelections[existingIndex] = {
|
|
141
149
|
...newSelections[existingIndex],
|
|
142
|
-
orderVariableOptionId: optionId
|
|
150
|
+
orderVariableOptionId: isCountryVariable ? null : optionId,
|
|
151
|
+
countryCode: isCountryVariable ? countryCode ?? newSelections[existingIndex].countryCode : null
|
|
143
152
|
};
|
|
144
153
|
}
|
|
145
154
|
} else {
|
|
146
155
|
// Add new selection
|
|
147
156
|
newSelections.push({
|
|
148
157
|
orderVariableId: variableId,
|
|
149
|
-
orderVariableOptionId: optionId
|
|
158
|
+
orderVariableOptionId: optionId,
|
|
159
|
+
countryCode: countryCode
|
|
150
160
|
});
|
|
151
161
|
}
|
|
152
162
|
onSelectionChange(newSelections);
|
|
@@ -160,15 +170,17 @@ function OrderVariableSelection(_ref3) {
|
|
|
160
170
|
}, /*#__PURE__*/_react.default.createElement("h3", {
|
|
161
171
|
className: "store-modal__order-variable-selection__title"
|
|
162
172
|
}, label), variables.orderVariables.map(variable => {
|
|
173
|
+
var _variables$countries;
|
|
163
174
|
const currentSelection = selections.find(s => s.orderVariableId === variable.id);
|
|
164
175
|
return /*#__PURE__*/_react.default.createElement(Variable, {
|
|
165
176
|
key: variable.id,
|
|
166
177
|
variable: variable,
|
|
167
178
|
selection: currentSelection,
|
|
168
|
-
|
|
179
|
+
countries: ((_variables$countries = variables.countries) === null || _variables$countries === void 0 ? void 0 : _variables$countries.filter(c => c !== null)) ?? null,
|
|
180
|
+
onToggle: (orderVariableId, orderVariableOptionId, countryCode) => handleSelectionChange(orderVariableId, orderVariableOptionId !== undefined ? orderVariableOptionId : null, countryCode)
|
|
169
181
|
});
|
|
170
182
|
}), ghostVariables.map(ghost => {
|
|
171
|
-
var _ghost$orderVariableO, _ghost$orderVariableO2;
|
|
183
|
+
var _ghost$orderVariableO, _ghost$orderVariableO2, _variables$countries2;
|
|
172
184
|
return /*#__PURE__*/_react.default.createElement(Variable, {
|
|
173
185
|
key: ghost.orderVariable.id,
|
|
174
186
|
variable: {
|
|
@@ -180,6 +192,7 @@ function OrderVariableSelection(_ref3) {
|
|
|
180
192
|
orderVariableOptionId: ((_ghost$orderVariableO = ghost.orderVariableOption) === null || _ghost$orderVariableO === void 0 ? void 0 : _ghost$orderVariableO.id) ?? null,
|
|
181
193
|
orderVariableOptionAmount: ((_ghost$orderVariableO2 = ghost.orderVariableOption) === null || _ghost$orderVariableO2 === void 0 ? void 0 : _ghost$orderVariableO2.amount) ?? null
|
|
182
194
|
},
|
|
195
|
+
countries: ((_variables$countries2 = variables.countries) === null || _variables$countries2 === void 0 ? void 0 : _variables$countries2.filter(c => c !== null)) ?? null,
|
|
183
196
|
ghost: true,
|
|
184
197
|
onToggle: () => {} // Ghost variables don't toggle
|
|
185
198
|
,
|
|
@@ -27,7 +27,7 @@ const StoreModalCart = _ref => {
|
|
|
27
27
|
let {
|
|
28
28
|
prepared
|
|
29
29
|
} = _ref;
|
|
30
|
-
const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCartQuery2.default.hash && _StoreModalCartQuery2.default.hash !== "
|
|
30
|
+
const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCartQuery2.default.hash && _StoreModalCartQuery2.default.hash !== "cfbbbef5d65b35eacebf30617fe2538e" && console.error("The definition of 'StoreModalCartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalCartQuery2.default), prepared.cartQuery);
|
|
31
31
|
const order = data.viewer.currentOrder;
|
|
32
32
|
const orderHasItems = ((order === null || order === void 0 ? void 0 : (_order$orderItems = order.orderItems) === null || _order$orderItems === void 0 ? void 0 : _order$orderItems.length) ?? 0) > 0;
|
|
33
33
|
const checkoutEnabled = (0, _utils.textVariablesAllHaveText)(order);
|
|
@@ -35,7 +35,7 @@ const StoreModalCart = _ref => {
|
|
|
35
35
|
body: order && orderHasItems ? /*#__PURE__*/_react.default.createElement(_CartState.default, {
|
|
36
36
|
order: order
|
|
37
37
|
}, _ref2 => {
|
|
38
|
-
var _order$orderItems2, _order$total;
|
|
38
|
+
var _data$viewer, _data$viewer$currentO, _data$viewer$currentO2, _order$orderItems2, _order$total, _data$viewer2, _data$viewer2$setting;
|
|
39
39
|
let {
|
|
40
40
|
onUpdateOrderVariableSelections,
|
|
41
41
|
onRemoveDiscount,
|
|
@@ -45,10 +45,11 @@ const StoreModalCart = _ref => {
|
|
|
45
45
|
return /*#__PURE__*/_react.default.createElement(_StoreModalCartLayout.default, {
|
|
46
46
|
checkoutEnabled: checkoutEnabled
|
|
47
47
|
}, {
|
|
48
|
-
orderVariables:
|
|
48
|
+
orderVariables: (_data$viewer = data.viewer) !== null && _data$viewer !== void 0 && (_data$viewer$currentO = _data$viewer.currentOrder) !== null && _data$viewer$currentO !== void 0 && (_data$viewer$currentO2 = _data$viewer$currentO.orderVariableSelections) !== null && _data$viewer$currentO2 !== void 0 && _data$viewer$currentO2.length ? /*#__PURE__*/_react.default.createElement(_StoreModalOrderVariableSelection.default, {
|
|
49
49
|
viewer: data.viewer,
|
|
50
|
+
order: order,
|
|
50
51
|
onSelectionChange: onUpdateOrderVariableSelections
|
|
51
|
-
}),
|
|
52
|
+
}) : null,
|
|
52
53
|
items: order === null || order === void 0 ? void 0 : (_order$orderItems2 = order.orderItems) === null || _order$orderItems2 === void 0 ? void 0 : _order$orderItems2.map((item, i) => {
|
|
53
54
|
var _errors$orderItems;
|
|
54
55
|
return /*#__PURE__*/_react.default.createElement(_CartItem.default, {
|
|
@@ -65,7 +66,8 @@ const StoreModalCart = _ref => {
|
|
|
65
66
|
totals: /*#__PURE__*/_react.default.createElement(_CartTotals.default, {
|
|
66
67
|
order: order,
|
|
67
68
|
onRemoveDiscount: onRemoveDiscount,
|
|
68
|
-
|
|
69
|
+
billingIdentity: order.billingIdentity,
|
|
70
|
+
taxSystem: (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.taxSystem
|
|
69
71
|
}),
|
|
70
72
|
checkout: /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
|
|
71
73
|
viewer: data.viewer,
|
|
@@ -73,7 +75,8 @@ const StoreModalCart = _ref => {
|
|
|
73
75
|
}, /*#__PURE__*/_react.default.createElement(_StoreModalUnifiedCheckout.default, {
|
|
74
76
|
viewer: data.viewer,
|
|
75
77
|
order: order,
|
|
76
|
-
onScrollToTop: () => {}
|
|
78
|
+
onScrollToTop: () => {},
|
|
79
|
+
onUpdateOrderVariableSelections: onUpdateOrderVariableSelections
|
|
77
80
|
}))
|
|
78
81
|
});
|
|
79
82
|
}) : /*#__PURE__*/_react.default.createElement(_EmptyCart.default, null)
|
|
@@ -16,43 +16,6 @@ const StoreModalCheckout = _ref => {
|
|
|
16
16
|
} = _ref;
|
|
17
17
|
const data = (0, _reactRelay.usePreloadedQuery)((_StoreModalCheckoutQuery2.default.hash && _StoreModalCheckoutQuery2.default.hash !== "70ae58665e32b49a33ffd9d27ff5e0cc" && console.error("The definition of 'StoreModalCheckoutQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalCheckoutQuery2.default), prepared.checkoutQuery);
|
|
18
18
|
const viewer = data.viewer;
|
|
19
|
-
/* const dispatch = useDispatch();
|
|
20
|
-
* const { checkoutStep, setCheckoutStep, checkoutError, setCheckoutError } = useContext(
|
|
21
|
-
* StoreModalCheckoutContext,
|
|
22
|
-
* );
|
|
23
|
-
* const handleComplete = () => {
|
|
24
|
-
* dispatch({ type: 'STORE_MODAL_NAVIGATE', route: 'review' });
|
|
25
|
-
* };
|
|
26
|
-
* const canSkipCheckout = Boolean(viewer.currentOrder?.stripePaymentMethod?.id);
|
|
27
|
-
* const handleSetCheckoutStep = (step: CheckoutSteps) => {
|
|
28
|
-
* setCheckoutError?.(null);
|
|
29
|
-
* if (canSkipCheckout) {
|
|
30
|
-
* dispatch({ type: 'STORE_MODAL_NAVIGATE', route: 'review' });
|
|
31
|
-
* return;
|
|
32
|
-
* }
|
|
33
|
-
* setCheckoutStep?.(step);
|
|
34
|
-
* };
|
|
35
|
-
* return (
|
|
36
|
-
* <StoreModalPageContainer>
|
|
37
|
-
* {{
|
|
38
|
-
* body: (
|
|
39
|
-
* <Checkout
|
|
40
|
-
* checkoutStep={checkoutStep}
|
|
41
|
-
* setCheckoutStep={handleSetCheckoutStep}
|
|
42
|
-
* viewer={viewer}
|
|
43
|
-
* order={viewer.currentOrder}
|
|
44
|
-
* onScrollToTop={() => {}}
|
|
45
|
-
* onCancel={() => {}}
|
|
46
|
-
* onComplete={handleComplete}
|
|
47
|
-
* saveText={canSkipCheckout ? 'Save' : 'Next'}
|
|
48
|
-
* error={checkoutError}
|
|
49
|
-
* skipPaymentMethod
|
|
50
|
-
* />
|
|
51
|
-
* ),
|
|
52
|
-
* }}
|
|
53
|
-
* </StoreModalPageContainer>
|
|
54
|
-
* ); */
|
|
55
|
-
|
|
56
19
|
return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
|
|
57
20
|
viewer: viewer,
|
|
58
21
|
providerType: "checkout"
|
|
@@ -18,14 +18,14 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
18
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
20
|
const StoreModalIndexItem = _ref => {
|
|
21
|
-
var _data$featureStyle$fa, _data$featureStyle$fa2;
|
|
21
|
+
var _data$featureStyle$fa, _data$featureStyle, _data$featureStyle$fa2;
|
|
22
22
|
let {
|
|
23
23
|
collection
|
|
24
24
|
} = _ref;
|
|
25
25
|
const {
|
|
26
26
|
storeModal: config
|
|
27
27
|
} = (0, _react.useContext)(_ConfigContext.default);
|
|
28
|
-
const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "
|
|
28
|
+
const data = (0, _reactRelay.useFragment)((_StoreModalIndexItem_fontCollection2.default.hash && _StoreModalIndexItem_fontCollection2.default.hash !== "c066b135c6b830ef95bfc0d307e46791" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection2.default), collection);
|
|
29
29
|
const dispatch = (0, _reactRedux.useDispatch)();
|
|
30
30
|
const handleClickProduct = productId => {
|
|
31
31
|
dispatch({
|
|
@@ -57,7 +57,7 @@ const StoreModalIndexItem = _ref => {
|
|
|
57
57
|
href: data.featureStyle.family.cssUrl
|
|
58
58
|
}), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
|
|
59
59
|
fontStyle: data.featureStyle
|
|
60
|
-
},
|
|
60
|
+
}, (0, _utils.getFeatureGlyphs)((_data$featureStyle = data.featureStyle) === null || _data$featureStyle === void 0 ? void 0 : _data$featureStyle.supportedLanguages))) : null),
|
|
61
61
|
name: config.indexLayout === 'styled-font-names' ? data.featureStyle && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, ((_data$featureStyle$fa2 = data.featureStyle.family) === null || _data$featureStyle$fa2 === void 0 ? void 0 : _data$featureStyle$fa2.cssUrl) && /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
|
|
62
62
|
href: data.featureStyle.family.cssUrl
|
|
63
63
|
}), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StoreModalOrderVariableSelection_viewer$key } from '__generated__/StoreModalOrderVariableSelection_viewer.graphql';
|
|
3
|
+
import { StoreModalOrderVariableSelection_order$key } from '__generated__/StoreModalOrderVariableSelection_order.graphql';
|
|
3
4
|
import { OrderVariableSelectionInput } from '../OrderVariableSelection';
|
|
4
5
|
interface StoreModalOrderVariableSelectionProps {
|
|
5
6
|
viewer: StoreModalOrderVariableSelection_viewer$key;
|
|
7
|
+
order: StoreModalOrderVariableSelection_order$key;
|
|
6
8
|
onSelectionChange: (selections: OrderVariableSelectionInput[]) => void;
|
|
7
9
|
}
|
|
8
|
-
export default function StoreModalOrderVariableSelection({ viewer: viewerKey, onSelectionChange, }: StoreModalOrderVariableSelectionProps): React.JSX.Element;
|
|
10
|
+
export default function StoreModalOrderVariableSelection({ viewer: viewerKey, order: orderKey, onSelectionChange, }: StoreModalOrderVariableSelectionProps): React.JSX.Element;
|
|
9
11
|
export {};
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = StoreModalOrderVariableSelection;
|
|
7
|
+
var _StoreModalOrderVariableSelection_order2 = _interopRequireDefault(require("../../__generated__/StoreModalOrderVariableSelection_order.graphql"));
|
|
7
8
|
var _StoreModalOrderVariableSelection_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalOrderVariableSelection_viewer.graphql"));
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
10
|
var _reactRelay = require("react-relay");
|
|
@@ -12,26 +13,29 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
12
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
15
|
function StoreModalOrderVariableSelection(_ref) {
|
|
15
|
-
var
|
|
16
|
+
var _order$orderVariableS, _viewer$orderVariable, _order$orderVariableS2, _viewer$settings;
|
|
16
17
|
let {
|
|
17
18
|
viewer: viewerKey,
|
|
19
|
+
order: orderKey,
|
|
18
20
|
onSelectionChange
|
|
19
21
|
} = _ref;
|
|
20
|
-
const viewer = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_viewer2.default.hash && _StoreModalOrderVariableSelection_viewer2.default.hash !== "
|
|
22
|
+
const viewer = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_viewer2.default.hash && _StoreModalOrderVariableSelection_viewer2.default.hash !== "b959e46df4274deb8a53ef227787c34a" && console.error("The definition of 'StoreModalOrderVariableSelection_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_viewer2.default), viewerKey);
|
|
23
|
+
const order = (0, _reactRelay.useFragment)((_StoreModalOrderVariableSelection_order2.default.hash && _StoreModalOrderVariableSelection_order2.default.hash !== "262ac9d359f03f24ea222258e17945a8" && console.error("The definition of 'StoreModalOrderVariableSelection_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalOrderVariableSelection_order2.default), orderKey);
|
|
21
24
|
|
|
22
25
|
// Transform order variable selections for the OrderVariableSelection component
|
|
23
|
-
const selections = (
|
|
26
|
+
const selections = (_order$orderVariableS = order.orderVariableSelections) === null || _order$orderVariableS === void 0 ? void 0 : _order$orderVariableS.map(selection => {
|
|
24
27
|
var _selection$orderVaria, _selection$orderVaria2;
|
|
25
28
|
return {
|
|
26
29
|
orderVariableId: selection.orderVariable.id,
|
|
27
30
|
orderVariableOptionId: ((_selection$orderVaria = selection.orderVariableOption) === null || _selection$orderVaria === void 0 ? void 0 : _selection$orderVaria.id) || null,
|
|
28
|
-
orderVariableOptionAmount: ((_selection$orderVaria2 = selection.orderVariableOption) === null || _selection$orderVaria2 === void 0 ? void 0 : _selection$orderVaria2.amount) || null
|
|
31
|
+
orderVariableOptionAmount: ((_selection$orderVaria2 = selection.orderVariableOption) === null || _selection$orderVaria2 === void 0 ? void 0 : _selection$orderVaria2.amount) || null,
|
|
32
|
+
countryCode: selection.countryCode || null
|
|
29
33
|
};
|
|
30
34
|
});
|
|
31
35
|
const orderVariableIds = new Set(((_viewer$orderVariable = viewer.orderVariables) === null || _viewer$orderVariable === void 0 ? void 0 : _viewer$orderVariable.map(variable => variable.id)) || []);
|
|
32
36
|
|
|
33
37
|
// Find ghost variables (variables that exist in the order but not in the available list)
|
|
34
|
-
const ghostVariables = ((
|
|
38
|
+
const ghostVariables = ((_order$orderVariableS2 = order.orderVariableSelections) === null || _order$orderVariableS2 === void 0 ? void 0 : _order$orderVariableS2.filter(selection => !orderVariableIds.has(selection.orderVariable.id))) ?? [];
|
|
35
39
|
|
|
36
40
|
// Handle updating the order when selections change
|
|
37
41
|
const handleSelectionChange = (0, _react.useCallback)(newSelections => {
|
|
@@ -17,13 +17,6 @@ var _utils = require("../../utils");
|
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
18
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
19
19
|
const THIN_SPACE = '\u2009';
|
|
20
|
-
function getFeatureGlyphs(supportedLanguages) {
|
|
21
|
-
if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('en')) return 'Aa';
|
|
22
|
-
if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('ar')) return 'ت';
|
|
23
|
-
if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('gr')) return 'Αα';
|
|
24
|
-
if (supportedLanguages !== null && supportedLanguages !== void 0 && supportedLanguages.includes('ru')) return 'Аа';
|
|
25
|
-
return null;
|
|
26
|
-
}
|
|
27
20
|
function StoreModalStyleButton(_ref) {
|
|
28
21
|
var _fontStyle$variableIn;
|
|
29
22
|
let {
|
|
@@ -48,7 +41,7 @@ function StoreModalStyleButton(_ref) {
|
|
|
48
41
|
}, isVariableFont ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.map((instance, i) => /*#__PURE__*/_react.default.createElement("span", {
|
|
49
42
|
key: instance.name,
|
|
50
43
|
style: (0, _utils.variableInstanceCSS)(instance)
|
|
51
|
-
}, i !== 0 && THIN_SPACE, getFeatureGlyphs(fontStyle.supportedLanguages))) : getFeatureGlyphs(fontStyle.supportedLanguages)),
|
|
44
|
+
}, i !== 0 && THIN_SPACE, (0, _utils.getFeatureGlyphs)(fontStyle.supportedLanguages))) : (0, _utils.getFeatureGlyphs)(fontStyle.supportedLanguages)),
|
|
52
45
|
// for variable fonts, only show the name of the style if there are
|
|
53
46
|
// multiple styles
|
|
54
47
|
name: isVariableFont ? fontStyle.sku ? fontStyle.name : undefined : fontStyle.name,
|
|
@@ -88,15 +88,16 @@ const StripeProvider = _ref => {
|
|
|
88
88
|
fontWeightBold: '400',
|
|
89
89
|
colorBackground: customProperties['--secondary_background_color'],
|
|
90
90
|
colorText: customProperties['--primary_text_color'],
|
|
91
|
+
colorDanger: customProperties['--error_color'],
|
|
91
92
|
colorBackgroundText: customProperties['--primary_text_color'],
|
|
92
93
|
colorSuccessText: customProperties['--success_color'],
|
|
93
94
|
colorDangerText: customProperties['--error_color'],
|
|
94
95
|
colorTextPlaceholder: customProperties['--secondary_text_color'],
|
|
95
96
|
focusBoxShadow: `0 0 0 1px ${customProperties['--primary_text_color']}`,
|
|
96
97
|
fontSizeBase: '16px',
|
|
97
|
-
fontSmooth: '
|
|
98
|
+
fontSmooth: 'auto',
|
|
98
99
|
gridRowSpacing: '30px',
|
|
99
|
-
spacingUnit: '
|
|
100
|
+
spacingUnit: '3px',
|
|
100
101
|
accordionItemSpacing: '20px'
|
|
101
102
|
},
|
|
102
103
|
rules: {
|
|
@@ -153,7 +154,8 @@ const StripeProvider = _ref => {
|
|
|
153
154
|
}
|
|
154
155
|
},
|
|
155
156
|
fonts: customFontSource ? [customFontSource] : undefined,
|
|
156
|
-
clientSecret
|
|
157
|
+
clientSecret,
|
|
158
|
+
syncAddressCheckbox: 'none'
|
|
157
159
|
};
|
|
158
160
|
if (providerType === 'checkout') {
|
|
159
161
|
return /*#__PURE__*/_react.default.createElement(_reactStripeJs.EmbeddedCheckoutProvider, {
|
|
@@ -48,9 +48,18 @@ function TypeTesterStyleSelectData(_ref) {
|
|
|
48
48
|
variableSettings,
|
|
49
49
|
includeVariableAxesOption
|
|
50
50
|
} = _ref;
|
|
51
|
-
const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "
|
|
52
|
-
const viewer = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_viewer2.default.hash && _TypeTesterStyleSelectData_viewer2.default.hash !== "
|
|
53
|
-
const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty)
|
|
51
|
+
const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "187778816a910be9ab709431d1d818b3" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle2.default), fontStyleKey);
|
|
52
|
+
const viewer = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_viewer2.default.hash && _TypeTesterStyleSelectData_viewer2.default.hash !== "5e5834d9202f90bdde5a0a7db49e8639" && console.error("The definition of 'TypeTesterStyleSelectData_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_viewer2.default), viewerKey);
|
|
53
|
+
const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty).filter(family => {
|
|
54
|
+
var _family$featureStyle, _family$featureStyle$;
|
|
55
|
+
return (// make sure the family options' supportedLanguages intersect with the current selection's supportedLanuages.
|
|
56
|
+
// e.g. if the current font style only supports 'ar', only show families that include 'ar'
|
|
57
|
+
(_family$featureStyle = family.featureStyle) === null || _family$featureStyle === void 0 ? void 0 : (_family$featureStyle$ = _family$featureStyle.supportedLanguages) === null || _family$featureStyle$ === void 0 ? void 0 : _family$featureStyle$.some(lang => {
|
|
58
|
+
var _fontStyle$supportedL;
|
|
59
|
+
return (_fontStyle$supportedL = fontStyle.supportedLanguages) === null || _fontStyle$supportedL === void 0 ? void 0 : _fontStyle$supportedL.includes(lang);
|
|
60
|
+
})
|
|
61
|
+
);
|
|
62
|
+
});
|
|
54
63
|
const handleSelectFamilyId = (0, _react.useCallback)(id => {
|
|
55
64
|
const family = familyData && familyData.find(family => family.id === id);
|
|
56
65
|
if (!family) return;
|
|
@@ -1,3 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* StoreModalUnifiedCheckout
|
|
3
|
+
*
|
|
4
|
+
* This component handles the checkout flow for orders, collecting customer information,
|
|
5
|
+
* billing/licensee details, and processing payment through Stripe.
|
|
6
|
+
*
|
|
7
|
+
* Key implementation details:
|
|
8
|
+
*
|
|
9
|
+
* 1. Auto-save billing identity (fontdue tax system only):
|
|
10
|
+
* - When using fontdue's tax system (not Stripe Tax), we need the billing address
|
|
11
|
+
* to calculate taxes before showing the final amount
|
|
12
|
+
* - The billing identity is auto-saved (with 500ms debounce) once the Stripe Address
|
|
13
|
+
* Element reports complete (name + address fields)
|
|
14
|
+
* - Email is a separate field (not part of Address Element), so auto-save may trigger
|
|
15
|
+
* before email is filled, which will cause backend validation errors to display
|
|
16
|
+
* - This ensures taxes are calculated and displayed before the user clicks Pay
|
|
17
|
+
* - On page reload, if billing identity already exists, billingAddressComplete starts
|
|
18
|
+
* as true to prevent re-triggering auto-save
|
|
19
|
+
*
|
|
20
|
+
* 2. Billing identity diff tracking:
|
|
21
|
+
* - We track differences between local state and saved backend data (billingIdentityDiff)
|
|
22
|
+
* - This determines isBillingIdentitySaved, which controls when payment can proceed
|
|
23
|
+
* - If the user edits any field after auto-save, it triggers another save cycle
|
|
24
|
+
* - All fields are normalized (null/undefined/empty string treated as equivalent)
|
|
25
|
+
*
|
|
26
|
+
* 3. Pay button validation:
|
|
27
|
+
* - The Pay button is always enabled (as long as EULA is checked) even if billing
|
|
28
|
+
* info isn't fully saved yet
|
|
29
|
+
* - This is intentional: we need to allow the user to click Pay so we can call
|
|
30
|
+
* elements.submit(), which triggers Stripe's validation and shows any validation
|
|
31
|
+
* errors inline in the Stripe UI elements
|
|
32
|
+
* - After Stripe validation passes, we check if billing identity is saved
|
|
33
|
+
* - If not saved, we show an error message above the Pay button asking them to
|
|
34
|
+
* complete billing information (validation errors should now be visible above)
|
|
35
|
+
*
|
|
36
|
+
* 4. Customer info pre-fill:
|
|
37
|
+
* - When customer submits their contact info, if billing name/email are empty,
|
|
38
|
+
* we pre-fill them from customer data as a convenience
|
|
39
|
+
*
|
|
40
|
+
* 5. Country mismatch handling (order snapshots):
|
|
41
|
+
* - When loading a hydrated order (e.g., from quote/snapshot), the order may have
|
|
42
|
+
* a country variable that differs from the user's detected country
|
|
43
|
+
* - In this case, we force licenseeIsBillingIdentity to false and always collect
|
|
44
|
+
* separate licensee information to ensure the licensee country matches the quote
|
|
45
|
+
* - This preserves pricing/availability from the original quote
|
|
46
|
+
*
|
|
47
|
+
* 6. Licensee country syncing:
|
|
48
|
+
* - When licensee country changes, it automatically updates any country-type order
|
|
49
|
+
* variables to maintain consistent pricing based on the selected country
|
|
50
|
+
*
|
|
51
|
+
* 7. Zero-order/coupon flow:
|
|
52
|
+
* - Orders with $0 total (due to coupons) bypass Stripe payment entirely
|
|
53
|
+
* - These use the completeOrder mutation instead of confirmPayment
|
|
54
|
+
*
|
|
55
|
+
* 8. Tax system variations:
|
|
56
|
+
* - Stripe Tax system: Uses embedded checkout, billing handled by Stripe
|
|
57
|
+
* - Fontdue tax system: Collects billing info directly, auto-saves for tax calculation
|
|
58
|
+
*/
|
|
1
59
|
import React from 'react';
|
|
2
60
|
import { StoreModalUnifiedCheckout_viewer$key } from '__generated__/StoreModalUnifiedCheckout_viewer.graphql';
|
|
3
61
|
import { StoreModalUnifiedCheckout_order$key } from '__generated__/StoreModalUnifiedCheckout_order.graphql';
|
|
@@ -5,6 +63,7 @@ interface Props {
|
|
|
5
63
|
order: StoreModalUnifiedCheckout_order$key;
|
|
6
64
|
viewer: StoreModalUnifiedCheckout_viewer$key;
|
|
7
65
|
onScrollToTop: () => void;
|
|
66
|
+
onUpdateOrderVariableSelections: (selections: any[]) => void;
|
|
8
67
|
}
|
|
9
|
-
export default function StoreModalUnifiedCheckout({ order: orderKey, viewer: viewerKey, onScrollToTop, }: Props): React.JSX.Element;
|
|
68
|
+
export default function StoreModalUnifiedCheckout({ order: orderKey, viewer: viewerKey, onScrollToTop, onUpdateOrderVariableSelections, }: Props): React.JSX.Element;
|
|
10
69
|
export {};
|