@ikas/storefront 4.0.0-alpha.48 → 4.0.0-alpha.5
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/package.json +13 -13
- package/src/analytics/analytics.ts +1 -2
- package/src/analytics/googleUniversal.ts +2 -12
- package/src/analytics/head/index.tsx +2 -1
- package/src/analytics/ikas.ts +7 -25
- package/src/components/checkout/components/address-form/index.tsx +1 -1
- package/src/components/checkout/components/address-form/model.ts +0 -1
- package/src/components/checkout/components/button/style.module.scss +2 -2
- package/src/components/checkout/components/cart-summary/cart-item/index.tsx +29 -16
- package/src/components/checkout/components/cart-summary/cart-item/style.module.scss +23 -60
- package/src/components/checkout/components/cart-summary/index.tsx +27 -58
- package/src/components/checkout/components/cart-summary/style.module.scss +3 -48
- package/src/components/checkout/components/customer-addresses/index.tsx +2 -7
- package/src/components/checkout/components/customer-addresses/model.ts +8 -16
- package/src/components/checkout/components/error/index.tsx +1 -1
- package/src/components/checkout/components/error/unknown-error/index.tsx +2 -4
- package/src/components/checkout/components/form-item/index.tsx +11 -9
- package/src/components/checkout/components/master-pass/credit-card-form/index.tsx +0 -2
- package/src/components/checkout/components/offer-product/index.tsx +19 -16
- package/src/components/checkout/components/offer-product/style.module.scss +3 -1
- package/src/components/checkout/components/phone-number-input/get-countries.ts +5 -37
- package/src/components/checkout/components/phone-number-input/index.tsx +10 -15
- package/src/components/checkout/components/phone-number-input/locale/en.ts +257 -0
- package/src/components/checkout/index.tsx +19 -28
- package/src/components/checkout/model.ts +91 -214
- package/src/components/checkout/modelMasterPass.ts +2 -2
- package/src/components/checkout/steps/step-info/index.tsx +3 -9
- package/src/components/checkout/steps/step-payment/billing-address/index.tsx +1 -1
- package/src/components/checkout/steps/step-payment/index.tsx +2 -11
- package/src/components/checkout/steps/step-payment/payment-gateways/index.tsx +3 -12
- package/src/components/checkout/steps/step-payment/payment-gateways/installments/index.tsx +3 -5
- package/src/components/checkout/steps/step-payment/style.module.scss +0 -5
- package/src/components/checkout/steps/step-shipping/index.tsx +4 -9
- package/src/components/checkout/steps/step-success/index.tsx +7 -15
- package/src/components/page/head.tsx +0 -12
- package/src/components/page/index.tsx +9 -10
- package/src/components/page-editor/ThemeComponentEditor.tsx +8 -19
- package/src/components/page-editor/model.ts +107 -44
- package/src/models/data/cart/campaign-offer/index.ts +2 -13
- package/src/models/data/cart/index.ts +1 -1
- package/src/models/data/category/init.ts +33 -0
- package/src/models/data/category/path-item/index.ts +0 -4
- package/src/models/data/checkout/index.ts +4 -36
- package/src/models/data/checkout-settings/price/index.ts +0 -2
- package/src/models/data/country/index.ts +0 -4
- package/src/models/data/index.ts +0 -3
- package/src/models/data/merchant-settings/index.ts +0 -9
- package/src/models/data/order/index.ts +32 -51
- package/src/models/data/order/line-item/index.ts +18 -76
- package/src/models/data/order/line-item/variant/index.ts +0 -8
- package/src/models/data/order/line-item/variant/price/index.ts +0 -2
- package/src/models/data/order/line-item/variant/value/index.ts +1 -1
- package/src/models/data/order/transaction/index.ts +5 -2
- package/src/models/data/product/attribute-value/index.ts +0 -40
- package/src/models/data/product/filter/index.ts +13 -4
- package/src/models/data/product/index.ts +7 -45
- package/src/models/data/product/option-set/index.ts +3 -8
- package/src/models/data/product/option-set/option/index.ts +13 -36
- package/src/models/data/product/variant/index.ts +1 -26
- package/src/models/data/product/variant/price/index.ts +9 -25
- package/src/models/data/product/variant-type/index.ts +0 -2
- package/src/models/data/raffle/index.ts +7 -9
- package/src/models/data/state/index.ts +2 -6
- package/src/models/data/storefront/index.ts +0 -2
- package/src/models/data/storefront/routing/index.tsx +0 -4
- package/src/models/ui/product-list/index.ts +17 -26
- package/src/models/ui/raffle-list/index.ts +1 -1
- package/src/models/ui/validator/form/raffle-form.ts +3 -16
- package/src/models/ui/validator/rules/index.ts +13 -14
- package/src/page-data-init/index.ts +404 -159
- package/src/pages/checkout.tsx +1 -2
- package/src/pages/editor.tsx +2 -5
- package/src/store/base.ts +2 -2
- package/src/store/cart/index.ts +2 -2
- package/src/store/customer/index.ts +17 -7
- package/src/store/index.ts +0 -2
- package/src/store/raffle/index.ts +10 -7
- package/src/utils/constants.ts +1 -1
- package/src/utils/currency.ts +183 -9
- package/src/models/data/country/location-translations/index.ts +0 -15
- package/src/models/data/order/line-item/base-unit/index.ts +0 -22
- package/src/models/data/order/line-item/base-unit/unit-type/index.ts +0 -14
- package/src/models/data/order/line-item/variant/unit/index.ts +0 -17
- package/src/models/data/product/base-unit/index.ts +0 -32
- package/src/models/data/product/variant/unit/index.ts +0 -17
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { observer } from "mobx-react-lite";
|
|
3
3
|
import CheckoutViewModel from "../../model";
|
|
4
|
-
import {
|
|
4
|
+
import { formatMoney, useTranslation } from "../../../../utils";
|
|
5
5
|
|
|
6
6
|
import styles from "./style.module.scss";
|
|
7
7
|
import { Button } from "../../components/button";
|
|
@@ -59,11 +59,7 @@ const ShippingMethods: React.FC<CommonProps> = observer(({ vm }) => {
|
|
|
59
59
|
<div className={styles.ShippingPrice}>
|
|
60
60
|
{asm.price === 0
|
|
61
61
|
? t("checkout-page:free")
|
|
62
|
-
:
|
|
63
|
-
asm.price,
|
|
64
|
-
vm.checkout.currencyCode,
|
|
65
|
-
vm.checkout.currencySymbol
|
|
66
|
-
)}
|
|
62
|
+
: formatMoney(asm.price, vm.checkout.currencyCode)}
|
|
67
63
|
</div>
|
|
68
64
|
}
|
|
69
65
|
onClick={() => vm.onShippingMethodChange(asm)}
|
|
@@ -99,10 +95,9 @@ const GiftPackage: React.FC<CommonProps> = observer(({ vm }) => {
|
|
|
99
95
|
const checkboxLabel =
|
|
100
96
|
t("checkout-page:giftPackageCta") +
|
|
101
97
|
(giftPackagePrice && giftPackagePrice.price
|
|
102
|
-
? ` (+ ${
|
|
98
|
+
? ` (+ ${formatMoney(
|
|
103
99
|
giftPackagePrice!.price,
|
|
104
|
-
giftPackagePrice!.currencyCode
|
|
105
|
-
giftPackagePrice!.currencySymbol
|
|
100
|
+
giftPackagePrice!.currencyCode
|
|
106
101
|
)})`
|
|
107
102
|
: "");
|
|
108
103
|
|
|
@@ -11,7 +11,7 @@ import SVGAmex from "../../components/credit-card-form/svg/amex";
|
|
|
11
11
|
import SVGMasterCard from "../../components/credit-card-form/svg/master-card";
|
|
12
12
|
import SVGTroy from "../../components/credit-card-form/svg/troy";
|
|
13
13
|
import SVGVisa from "../../components/credit-card-form/svg/visa";
|
|
14
|
-
import {
|
|
14
|
+
import { formatMoney, useTranslation } from "../../../../utils";
|
|
15
15
|
import { IkasOrderPackageStatus } from "../../../../models";
|
|
16
16
|
import {
|
|
17
17
|
IkasPaymentGatewayType,
|
|
@@ -19,7 +19,6 @@ import {
|
|
|
19
19
|
} from "../../../../models/data/payment-gateway";
|
|
20
20
|
import OfferProduct from "../../components/offer-product";
|
|
21
21
|
import { IkasTransactionCardAssociation } from "@ikas/storefront-models";
|
|
22
|
-
import { Analytics } from "../../../../analytics";
|
|
23
22
|
|
|
24
23
|
type Props = {
|
|
25
24
|
vm: CheckoutViewModel;
|
|
@@ -32,12 +31,8 @@ export const StepSuccess: React.FC<Props> = observer(({ vm }) => {
|
|
|
32
31
|
if (typeof localStorage !== "undefined") {
|
|
33
32
|
const lsCartId = localStorage.getItem(CART_LS_KEY);
|
|
34
33
|
|
|
35
|
-
if (lsCartId && lsCartId === vm.checkout.id)
|
|
36
|
-
if (vm.successTransaction)
|
|
37
|
-
Analytics.purchase(vm.checkout, vm.successTransaction);
|
|
38
|
-
|
|
34
|
+
if (lsCartId && lsCartId === vm.checkout.id)
|
|
39
35
|
localStorage.removeItem(CART_LS_KEY);
|
|
40
|
-
}
|
|
41
36
|
}
|
|
42
37
|
}, []);
|
|
43
38
|
|
|
@@ -130,10 +125,9 @@ export const StepSuccess: React.FC<Props> = observer(({ vm }) => {
|
|
|
130
125
|
null && (
|
|
131
126
|
<div className={styles.InfoText}>{`${
|
|
132
127
|
paymentMethodDetail.installment.installmentCount
|
|
133
|
-
} x ${
|
|
128
|
+
} x ${formatMoney(
|
|
134
129
|
paymentMethodDetail.installment.installmentPrice,
|
|
135
|
-
vm.checkout.currencyCode
|
|
136
|
-
vm.checkout.currencySymbol
|
|
130
|
+
vm.checkout.currencyCode
|
|
137
131
|
)}`}</div>
|
|
138
132
|
)}
|
|
139
133
|
</React.Fragment>
|
|
@@ -251,11 +245,9 @@ export const StepSuccess: React.FC<Props> = observer(({ vm }) => {
|
|
|
251
245
|
<ExpandableSection title={t("checkout-page:paymentSummary")}>
|
|
252
246
|
{paymentInfoGrid}
|
|
253
247
|
</ExpandableSection>
|
|
254
|
-
{
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
</ExpandableSection>
|
|
258
|
-
)}
|
|
248
|
+
<ExpandableSection title={t("checkout-page:shippingSummary")}>
|
|
249
|
+
{contactInfoGrid}
|
|
250
|
+
</ExpandableSection>
|
|
259
251
|
|
|
260
252
|
<div className={styles.Actions}>
|
|
261
253
|
<div className={styles.HelpText}>
|
|
@@ -251,18 +251,6 @@ function createStoreSchema(merchantSettings: IkasMerchantSettings) {
|
|
|
251
251
|
logo: logo,
|
|
252
252
|
image: logo,
|
|
253
253
|
url: "https://" + IkasStorefrontConfig.getDomain(),
|
|
254
|
-
telephone: merchantSettings?.phone,
|
|
255
|
-
address: {
|
|
256
|
-
"@type": "PostalAddress",
|
|
257
|
-
streetAddress: merchantSettings.address?.addressLine1,
|
|
258
|
-
addressLocality: merchantSettings.address?.city?.name,
|
|
259
|
-
...(merchantSettings.address &&
|
|
260
|
-
merchantSettings.address.state && {
|
|
261
|
-
addressRegion: merchantSettings.address.state.code,
|
|
262
|
-
}),
|
|
263
|
-
postalCode: merchantSettings.address?.postalCode,
|
|
264
|
-
addressCountry: merchantSettings.address?.country?.code,
|
|
265
|
-
},
|
|
266
254
|
};
|
|
267
255
|
}
|
|
268
256
|
|
|
@@ -19,7 +19,6 @@ import { ThemeComponent } from "./ThemeComponent";
|
|
|
19
19
|
import { IkasBaseStore } from "../../store";
|
|
20
20
|
import { initIkasEvents } from "../../analytics/events";
|
|
21
21
|
import { IkasPageDataInit } from "../../page-data-init";
|
|
22
|
-
import { setAPIClientConfig } from "@ikas/storefront-api";
|
|
23
22
|
|
|
24
23
|
export type IkasPageProps = {
|
|
25
24
|
propValues: IkasPageComponentPropValue[];
|
|
@@ -56,16 +55,15 @@ export const IkasPage: React.FC<IkasPageProps> = observer(
|
|
|
56
55
|
productReviewSummary,
|
|
57
56
|
}) => {
|
|
58
57
|
const router = useRouter();
|
|
58
|
+
const store = IkasBaseStore.getInstance();
|
|
59
|
+
store.router = router;
|
|
59
60
|
|
|
60
61
|
IkasStorefrontConfig.init({
|
|
61
62
|
...configJson,
|
|
62
63
|
currentPageComponents: components,
|
|
63
64
|
});
|
|
64
65
|
IkasBaseStore.getInstance().router = router;
|
|
65
|
-
setAPIClientConfig();
|
|
66
66
|
|
|
67
|
-
const store = IkasBaseStore.getInstance();
|
|
68
|
-
store.router = router;
|
|
69
67
|
store.currentPageType = pageType;
|
|
70
68
|
|
|
71
69
|
const [isBrowser, setIsBrowser] = React.useState(false);
|
|
@@ -75,11 +73,7 @@ export const IkasPage: React.FC<IkasPageProps> = observer(
|
|
|
75
73
|
pageType,
|
|
76
74
|
isBrowser
|
|
77
75
|
);
|
|
78
|
-
return IkasPageDataInit.
|
|
79
|
-
propValues,
|
|
80
|
-
settings,
|
|
81
|
-
isBrowser
|
|
82
|
-
);
|
|
76
|
+
return IkasPageDataInit.initPropValues(propValues, settings, isBrowser);
|
|
83
77
|
}, [isBrowser, propValues, pageType, settings, pageSpecificData]);
|
|
84
78
|
|
|
85
79
|
React.useEffect(() => {
|
|
@@ -105,7 +99,7 @@ export const IkasPage: React.FC<IkasPageProps> = observer(
|
|
|
105
99
|
|
|
106
100
|
React.useEffect(() => {
|
|
107
101
|
handleAnalytics(pageType, IkasPageDataInit.pageSpecificData);
|
|
108
|
-
}, [pageType, pageSpecificData]);
|
|
102
|
+
}, [pageType, IkasPageDataInit.pageSpecificData]);
|
|
109
103
|
|
|
110
104
|
const renderedComponents = React.useMemo(() => {
|
|
111
105
|
const headerComponentPropValue = _propValues.find(
|
|
@@ -187,6 +181,11 @@ async function handleAnalytics(
|
|
|
187
181
|
if (pageType === IkasThemeJsonPageType.PRODUCT) {
|
|
188
182
|
const product = pageSpecificData as IkasProduct;
|
|
189
183
|
|
|
184
|
+
const isBrowser = typeof window !== "undefined";
|
|
185
|
+
// if (isBrowser) {
|
|
186
|
+
// IkasPageDataInit._initProductOnBrowser(product);
|
|
187
|
+
// }
|
|
188
|
+
|
|
190
189
|
Analytics.productView(product);
|
|
191
190
|
|
|
192
191
|
//@ts-ignore
|
|
@@ -15,11 +15,6 @@ import {
|
|
|
15
15
|
import { IkasStorefrontConfig } from "@ikas/storefront-config";
|
|
16
16
|
import { IkasPageDataInit } from "../../page-data-init";
|
|
17
17
|
import { IkasBaseStore } from "../../store";
|
|
18
|
-
import {
|
|
19
|
-
IkasCheckout,
|
|
20
|
-
IkasOrderLineItem,
|
|
21
|
-
IkasCheckoutSettings,
|
|
22
|
-
} from "../../models/data";
|
|
23
18
|
|
|
24
19
|
type Props = {
|
|
25
20
|
vm: IkasPageEditorViewModel;
|
|
@@ -64,7 +59,7 @@ export class ThemeEditorComponent extends React.Component<Props> {
|
|
|
64
59
|
get pageComponentPropValue() {
|
|
65
60
|
const { vm, pageComponent } = this.props;
|
|
66
61
|
|
|
67
|
-
return vm.
|
|
62
|
+
return vm.pageDataProvider?.pageComponentPropValues.find(
|
|
68
63
|
(pc) => pc.pageComponent.id === pageComponent.id
|
|
69
64
|
);
|
|
70
65
|
}
|
|
@@ -75,16 +70,13 @@ export class ThemeEditorComponent extends React.Component<Props> {
|
|
|
75
70
|
|
|
76
71
|
if (vm.page?.type === IkasThemeJsonPageType.CHECKOUT) {
|
|
77
72
|
const checkoutProps: IkasCheckoutPageProps = {
|
|
78
|
-
checkout:
|
|
79
|
-
currencyCode: "TRY",
|
|
80
|
-
currencySymbol: "₺",
|
|
73
|
+
checkout: {
|
|
81
74
|
orderLineItems: [
|
|
82
|
-
|
|
75
|
+
{
|
|
83
76
|
id: "",
|
|
84
77
|
createdAt: 0,
|
|
85
78
|
updatedAt: 0,
|
|
86
79
|
currencyCode: "TRY",
|
|
87
|
-
currencySymbol: "₺",
|
|
88
80
|
discount: null,
|
|
89
81
|
discountPrice: null,
|
|
90
82
|
finalPrice: 100,
|
|
@@ -96,8 +88,6 @@ export class ThemeEditorComponent extends React.Component<Props> {
|
|
|
96
88
|
statusUpdatedAt: null,
|
|
97
89
|
stockLocationId: null,
|
|
98
90
|
taxValue: null,
|
|
99
|
-
unitPrice: null,
|
|
100
|
-
finalUnitPrice: null,
|
|
101
91
|
variant: {
|
|
102
92
|
barcodeList: null,
|
|
103
93
|
brand: null,
|
|
@@ -114,14 +104,13 @@ export class ThemeEditorComponent extends React.Component<Props> {
|
|
|
114
104
|
type: null,
|
|
115
105
|
weight: null,
|
|
116
106
|
variantValues: [],
|
|
117
|
-
baseUnit: null,
|
|
118
|
-
unit: null,
|
|
119
107
|
},
|
|
120
108
|
orderedAt: 0,
|
|
121
|
-
|
|
109
|
+
refundQuantity: null,
|
|
110
|
+
},
|
|
122
111
|
],
|
|
123
|
-
}
|
|
124
|
-
checkoutSettings:
|
|
112
|
+
} as any,
|
|
113
|
+
checkoutSettings: {
|
|
125
114
|
createdAt: 0,
|
|
126
115
|
updatedAt: 0,
|
|
127
116
|
id: "",
|
|
@@ -137,7 +126,7 @@ export class ThemeEditorComponent extends React.Component<Props> {
|
|
|
137
126
|
showCheckoutNote: true,
|
|
138
127
|
showTermsAndConditionsCheckbox: true,
|
|
139
128
|
storefrontId: "",
|
|
140
|
-
}
|
|
129
|
+
},
|
|
141
130
|
customizationProps: {
|
|
142
131
|
...propValues,
|
|
143
132
|
},
|
|
@@ -14,10 +14,7 @@ import {
|
|
|
14
14
|
IkasThemeJsonSettings,
|
|
15
15
|
IkasVariantValue,
|
|
16
16
|
} from "../../models";
|
|
17
|
-
import {
|
|
18
|
-
IkasPageComponentPropValue,
|
|
19
|
-
IkasPageDataProvider,
|
|
20
|
-
} from "@ikas/storefront-providers";
|
|
17
|
+
import { IkasPageDataProvider } from "@ikas/storefront-providers";
|
|
21
18
|
import { makeAutoObservable, reaction } from "mobx";
|
|
22
19
|
import { NextRouter } from "next/router.js";
|
|
23
20
|
import { IkasPageDataInit } from "../../page-data-init";
|
|
@@ -26,8 +23,6 @@ import HtmlMetaDataStore from "../../store/html-meta-data";
|
|
|
26
23
|
import BlogStore from "../../store/blog";
|
|
27
24
|
import RaffleStore from "../../store/raffle";
|
|
28
25
|
import ProductStore from "../../store/product";
|
|
29
|
-
import { setAPIClientConfig } from "@ikas/storefront-api";
|
|
30
|
-
import { runInAction } from "mobx";
|
|
31
26
|
|
|
32
27
|
const PACKAGE_VERSION = "2.0.20";
|
|
33
28
|
// import { version as PACKAGE_VERSION } from "../../../package.json";
|
|
@@ -48,7 +43,6 @@ export default class IkasPageEditorViewModel {
|
|
|
48
43
|
pageParams: Record<string, any> = {};
|
|
49
44
|
apiKey?: string | null = null;
|
|
50
45
|
pageDataProvider?: IkasPageDataProvider | null = null;
|
|
51
|
-
initializedPropValues: IkasPageComponentPropValue[] = [];
|
|
52
46
|
|
|
53
47
|
router: NextRouter;
|
|
54
48
|
|
|
@@ -372,20 +366,18 @@ export default class IkasPageEditorViewModel {
|
|
|
372
366
|
this.pageParams
|
|
373
367
|
);
|
|
374
368
|
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
this.pageDataProvider = pageDataProvider;
|
|
369
|
+
IkasBaseStore.getInstance().currentPageType = pageType;
|
|
370
|
+
this.pageDataProvider = pageDataProvider;
|
|
378
371
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
372
|
+
if (pageType === IkasThemeJsonPageType.CUSTOM)
|
|
373
|
+
this.page = this.theme?.pages.find(
|
|
374
|
+
(p) => p.type === pageType && p.slug === this.pageParams.slug
|
|
375
|
+
);
|
|
376
|
+
else this.page = this.theme?.pages.find((p) => p.type === pageType);
|
|
384
377
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
});
|
|
378
|
+
requestAnimationFrame(() => {
|
|
379
|
+
document.body.scrollTop = 0;
|
|
380
|
+
if (document.scrollingElement) document.scrollingElement.scrollTop = 0;
|
|
389
381
|
});
|
|
390
382
|
|
|
391
383
|
this.sendMessage(BridgeMessageType.EDITOR_PAGE_CHANGE, {
|
|
@@ -512,8 +504,8 @@ export default class IkasPageEditorViewModel {
|
|
|
512
504
|
IkasPageDataInit.pageSpecificData = undefined;
|
|
513
505
|
}
|
|
514
506
|
|
|
515
|
-
|
|
516
|
-
pageDataProvider
|
|
507
|
+
pageDataProvider.pageComponentPropValues = IkasPageDataInit.initPropValues(
|
|
508
|
+
pageDataProvider.pageComponentPropValues,
|
|
517
509
|
theme!.settings,
|
|
518
510
|
false
|
|
519
511
|
);
|
|
@@ -573,13 +565,7 @@ export default class IkasPageEditorViewModel {
|
|
|
573
565
|
translations: this.translations || {},
|
|
574
566
|
isEditor: true,
|
|
575
567
|
apiKey: data.apiKey,
|
|
576
|
-
apiUrl: data.apiUrl,
|
|
577
|
-
adminApiUrl: data.adminApiUrl,
|
|
578
|
-
cdnUrl: data.cdnUrl,
|
|
579
|
-
merchantSettings: data.merchantSettings,
|
|
580
568
|
});
|
|
581
|
-
|
|
582
|
-
setAPIClientConfig();
|
|
583
569
|
}
|
|
584
570
|
|
|
585
571
|
// (window as any).editorApiKey = data.apiKey;
|
|
@@ -615,28 +601,96 @@ export default class IkasPageEditorViewModel {
|
|
|
615
601
|
|
|
616
602
|
if (!prop || !this.selectedPageComponent) return;
|
|
617
603
|
|
|
618
|
-
const pageComponentPropValues =
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
604
|
+
const pageComponentPropValues =
|
|
605
|
+
this.pageDataProvider?.pageComponentPropValues.find(
|
|
606
|
+
(pv) => pv.pageComponent.id === this.selectedPageComponentId
|
|
607
|
+
);
|
|
622
608
|
|
|
623
609
|
this.selectedPageComponent.propValues[propName] = value;
|
|
624
610
|
|
|
611
|
+
if (!this.pageDataProvider) return;
|
|
612
|
+
|
|
625
613
|
const propValue = await this.pageDataProvider.getPageComponentPropValue(
|
|
626
614
|
this.selectedPageComponent,
|
|
627
615
|
prop
|
|
628
616
|
);
|
|
629
617
|
|
|
630
|
-
|
|
631
|
-
await this.pageDataProvider.setLinkSlugs();
|
|
618
|
+
await this.pageDataProvider.setLinkSlugs();
|
|
632
619
|
|
|
633
|
-
pageComponentPropValues
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
620
|
+
if (pageComponentPropValues) {
|
|
621
|
+
pageComponentPropValues.propValues[propName] = propValue;
|
|
622
|
+
|
|
623
|
+
if (prop.type === IkasThemeJsonComponentPropType.CUSTOM) {
|
|
624
|
+
IkasPageDataInit.initCustomDataPropValue(
|
|
625
|
+
prop,
|
|
626
|
+
propValue,
|
|
627
|
+
pageComponentPropValues,
|
|
628
|
+
this.theme!.settings,
|
|
629
|
+
true
|
|
630
|
+
);
|
|
631
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.COMPONENT) {
|
|
632
|
+
IkasPageDataInit.initComponentPropValue(
|
|
633
|
+
prop,
|
|
634
|
+
propValue,
|
|
635
|
+
pageComponentPropValues,
|
|
636
|
+
this.theme!.settings,
|
|
637
|
+
true
|
|
638
|
+
);
|
|
639
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.COMPONENT_LIST) {
|
|
640
|
+
IkasPageDataInit.initComponentListPropValue(
|
|
641
|
+
prop,
|
|
642
|
+
propValue,
|
|
643
|
+
pageComponentPropValues,
|
|
644
|
+
this.theme!.settings,
|
|
645
|
+
true
|
|
646
|
+
);
|
|
647
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.PRODUCT_DETAIL) {
|
|
648
|
+
IkasPageDataInit.initProductPropValue(
|
|
649
|
+
prop,
|
|
650
|
+
propValue,
|
|
651
|
+
pageComponentPropValues
|
|
652
|
+
);
|
|
653
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.CATEGORY) {
|
|
654
|
+
IkasPageDataInit.initCategoryPropValue(
|
|
655
|
+
prop,
|
|
656
|
+
propValue,
|
|
657
|
+
pageComponentPropValues
|
|
658
|
+
);
|
|
659
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.BRAND) {
|
|
660
|
+
IkasPageDataInit.initBrandPropValue(
|
|
661
|
+
prop,
|
|
662
|
+
propValue,
|
|
663
|
+
pageComponentPropValues
|
|
664
|
+
);
|
|
665
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.BLOG) {
|
|
666
|
+
IkasPageDataInit.initBlogPropValue(
|
|
667
|
+
prop,
|
|
668
|
+
propValue,
|
|
669
|
+
pageComponentPropValues
|
|
670
|
+
);
|
|
671
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.BLOG_CATEGORY) {
|
|
672
|
+
IkasPageDataInit.initBlogCategoryPropValue(
|
|
673
|
+
prop,
|
|
674
|
+
propValue,
|
|
675
|
+
pageComponentPropValues
|
|
676
|
+
);
|
|
677
|
+
} else if (prop.type === IkasThemeJsonComponentPropType.RAFFLE) {
|
|
678
|
+
IkasPageDataInit.initRafflePropValue(
|
|
679
|
+
prop,
|
|
680
|
+
propValue,
|
|
681
|
+
pageComponentPropValues
|
|
682
|
+
);
|
|
683
|
+
} else if (
|
|
684
|
+
prop.type === IkasThemeJsonComponentPropType.LINK ||
|
|
685
|
+
prop.type === IkasThemeJsonComponentPropType.LIST_OF_LINK
|
|
686
|
+
) {
|
|
687
|
+
IkasPageDataInit.initLinkPropValue(
|
|
688
|
+
prop,
|
|
689
|
+
propValue,
|
|
690
|
+
pageComponentPropValues
|
|
691
|
+
);
|
|
692
|
+
}
|
|
693
|
+
}
|
|
640
694
|
};
|
|
641
695
|
|
|
642
696
|
handleUpdatePageParams = async (data: any) => {
|
|
@@ -704,15 +758,24 @@ export default class IkasPageEditorViewModel {
|
|
|
704
758
|
const pageComponentPropValues =
|
|
705
759
|
await this.pageDataProvider!.getPageComponentPropValues(pageComponent);
|
|
706
760
|
|
|
707
|
-
const
|
|
708
|
-
|
|
761
|
+
const customDataProps = pageComponentPropValues.component.props.filter(
|
|
762
|
+
(p) => p.type === IkasThemeJsonComponentPropType.CUSTOM
|
|
763
|
+
);
|
|
764
|
+
|
|
765
|
+
customDataProps.forEach((customDataProp) => {
|
|
766
|
+
IkasPageDataInit.initCustomDataPropValue(
|
|
767
|
+
customDataProp,
|
|
768
|
+
pageComponentPropValues.propValues[customDataProp.name],
|
|
709
769
|
pageComponentPropValues,
|
|
710
770
|
this.theme!.settings,
|
|
711
771
|
true
|
|
712
772
|
);
|
|
713
773
|
|
|
714
|
-
|
|
715
|
-
|
|
774
|
+
this.pageDataProvider!.pageComponentPropValues.push(
|
|
775
|
+
pageComponentPropValues
|
|
776
|
+
);
|
|
777
|
+
this.pageComponents.push(pageComponent);
|
|
778
|
+
});
|
|
716
779
|
};
|
|
717
780
|
|
|
718
781
|
handleDeletePageComponent = (data: any) => {
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
IkasCartCampaignOfferStatus,
|
|
4
4
|
IkasCartCampaignOffer as ICartCampaignOffer,
|
|
5
5
|
} from "@ikas/storefront-models";
|
|
6
|
-
import { makeAutoObservable
|
|
6
|
+
import { makeAutoObservable } from "mobx";
|
|
7
7
|
import { IkasBaseModel } from "../../base";
|
|
8
8
|
import { IkasCampaignOffer } from "../../campaign-offer";
|
|
9
9
|
|
|
@@ -36,18 +36,7 @@ export class IkasCartCampaignOffer
|
|
|
36
36
|
this.targetPageTypes = data.targetPageTypes;
|
|
37
37
|
this.triggerSourceOrderLineId = data.triggerSourceOrderLineId;
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
makeObservable(this, {
|
|
41
|
-
appliedOrderLineId: observable,
|
|
42
|
-
campaignOfferId: observable,
|
|
43
|
-
campaignOffer: observable,
|
|
44
|
-
campaignOfferProductId: observable,
|
|
45
|
-
offerEndDate: observable,
|
|
46
|
-
offerStartDate: observable,
|
|
47
|
-
status: observable,
|
|
48
|
-
targetPageTypes: observable,
|
|
49
|
-
triggerSourceOrderLineId: observable,
|
|
50
|
-
});
|
|
39
|
+
makeAutoObservable(this);
|
|
51
40
|
}
|
|
52
41
|
}
|
|
53
42
|
|
|
@@ -12,7 +12,7 @@ export class IkasCart extends IkasOrder implements ICart {
|
|
|
12
12
|
shippingZoneRateId: string | null = null;
|
|
13
13
|
stockLocationId: string | null = null;
|
|
14
14
|
|
|
15
|
-
constructor(data:
|
|
15
|
+
constructor(data: ICart) {
|
|
16
16
|
super(data);
|
|
17
17
|
|
|
18
18
|
this.availableShippingMethods =
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { IkasCategory } from ".";
|
|
2
|
+
import { IkasCategoryTranslation } from "./translations";
|
|
3
|
+
import { initIkasHTMLMetaData } from "../html-meta-data/init";
|
|
4
|
+
|
|
5
|
+
export function initIkasCategory(
|
|
6
|
+
category: IkasCategory,
|
|
7
|
+
locale: string | null
|
|
8
|
+
) {
|
|
9
|
+
category.image = category.imageId
|
|
10
|
+
? { id: category.imageId, isVideo: false }
|
|
11
|
+
: undefined;
|
|
12
|
+
|
|
13
|
+
category.metaData && initIkasHTMLMetaData(category.metaData, locale);
|
|
14
|
+
|
|
15
|
+
if (category.translations && locale) {
|
|
16
|
+
setTranslations(category, category.translations, locale);
|
|
17
|
+
delete category.translations;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function setTranslations(
|
|
22
|
+
category: IkasCategory,
|
|
23
|
+
translations: IkasCategoryTranslation[],
|
|
24
|
+
locale: string
|
|
25
|
+
) {
|
|
26
|
+
if (translations && translations.some((t) => t.locale === locale)) {
|
|
27
|
+
const localeTranslations = translations.find((t) => t.locale === locale);
|
|
28
|
+
|
|
29
|
+
if (localeTranslations?.name) category.name = localeTranslations.name;
|
|
30
|
+
if (localeTranslations?.description)
|
|
31
|
+
category.description = localeTranslations.description;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -3,8 +3,6 @@ import { IkasBaseModel } from "../../base";
|
|
|
3
3
|
import { IkasCategoryPathItem as ICategoryPathItem } from "@ikas/storefront-models";
|
|
4
4
|
import { computed, makeObservable, observable } from "mobx";
|
|
5
5
|
import { IkasCategoryPathItemFunctions } from "@ikas/storefront-model-functions";
|
|
6
|
-
import { IkasCategoryTranslation } from "../translations";
|
|
7
|
-
import { IkasStorefrontConfig } from "@ikas/storefront-config";
|
|
8
6
|
|
|
9
7
|
export class IkasCategoryPathItem
|
|
10
8
|
extends IkasBaseModel
|
|
@@ -14,7 +12,6 @@ export class IkasCategoryPathItem
|
|
|
14
12
|
description: string | null;
|
|
15
13
|
imageId: string | null;
|
|
16
14
|
name: string;
|
|
17
|
-
translations?: IkasCategoryTranslation[] | null = null;
|
|
18
15
|
|
|
19
16
|
constructor(data: ICategoryPathItem) {
|
|
20
17
|
super(data);
|
|
@@ -23,7 +20,6 @@ export class IkasCategoryPathItem
|
|
|
23
20
|
this.description = data.description || null;
|
|
24
21
|
this.imageId = data.imageId || null;
|
|
25
22
|
this.name = data.name;
|
|
26
|
-
this.translations = data.translations || null;
|
|
27
23
|
|
|
28
24
|
makeObservable(this, {
|
|
29
25
|
metaData: observable,
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { IkasCart } from "../cart";
|
|
2
2
|
import { IkasCheckout as ICheckout } from "@ikas/storefront-models";
|
|
3
|
-
import {
|
|
4
|
-
IkasCheckoutFunctions,
|
|
5
|
-
IkasOrderFunctions,
|
|
6
|
-
} from "@ikas/storefront-model-functions";
|
|
3
|
+
import { IkasCheckoutFunctions } from "@ikas/storefront-model-functions";
|
|
7
4
|
import { IkasPaymentGateway } from "../payment-gateway";
|
|
8
|
-
import {
|
|
5
|
+
import { formatMoney } from "../../../utils/currency";
|
|
9
6
|
import { computed, makeObservable, observable } from "mobx";
|
|
10
7
|
import { formatDate } from "../../../utils/helper";
|
|
11
8
|
|
|
@@ -20,13 +17,9 @@ export class IkasCheckout extends IkasCart implements ICheckout {
|
|
|
20
17
|
selectedPaymentGateway?: IkasPaymentGateway | null = null;
|
|
21
18
|
masterPassPaymentGateway?: IkasPaymentGateway | null = null;
|
|
22
19
|
|
|
23
|
-
constructor(data:
|
|
20
|
+
constructor(data: IkasCheckoutConstructorData) {
|
|
24
21
|
super(data);
|
|
25
22
|
|
|
26
|
-
this.appliedCouponCode = data.couponCode;
|
|
27
|
-
this.selectedPaymentGateway = data.selectedPaymentGateway;
|
|
28
|
-
this.masterPassPaymentGateway = data.masterPassPaymentGateway;
|
|
29
|
-
|
|
30
23
|
makeObservable(this, {
|
|
31
24
|
appliedCouponCode: observable,
|
|
32
25
|
selectedPaymentGateway: observable,
|
|
@@ -34,9 +27,6 @@ export class IkasCheckout extends IkasCart implements ICheckout {
|
|
|
34
27
|
|
|
35
28
|
isComplete: computed,
|
|
36
29
|
$totalFinalPrice: computed,
|
|
37
|
-
$totalFinalPriceTaxModifier: computed,
|
|
38
|
-
$totalTax: computed,
|
|
39
|
-
$formattedTotalTax: computed,
|
|
40
30
|
$formattedTotalFinalPrice: computed,
|
|
41
31
|
});
|
|
42
32
|
}
|
|
@@ -53,30 +43,8 @@ export class IkasCheckout extends IkasCart implements ICheckout {
|
|
|
53
43
|
);
|
|
54
44
|
}
|
|
55
45
|
|
|
56
|
-
get $totalFinalPriceTaxModifier() {
|
|
57
|
-
return this.$totalFinalPrice / this.totalFinalPrice;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
get $totalTax() {
|
|
61
|
-
return (
|
|
62
|
-
IkasOrderFunctions.getTotalTax(this) * this.$totalFinalPriceTaxModifier
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
get $formattedTotalTax() {
|
|
67
|
-
return formatCurrency(
|
|
68
|
-
this.totalTax,
|
|
69
|
-
this.currencyCode,
|
|
70
|
-
this.currencySymbol || ""
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
46
|
get $formattedTotalFinalPrice() {
|
|
75
|
-
return
|
|
76
|
-
this.$totalFinalPrice,
|
|
77
|
-
this.currencyCode,
|
|
78
|
-
this.currencySymbol
|
|
79
|
-
);
|
|
47
|
+
return formatMoney(this.$totalFinalPrice, this.currencySymbol);
|
|
80
48
|
}
|
|
81
49
|
|
|
82
50
|
get dateStr() {
|
|
@@ -3,12 +3,10 @@ import { makeAutoObservable } from "mobx";
|
|
|
3
3
|
|
|
4
4
|
export class IkasCheckoutSettingsPrice implements ICheckoutSettingsPrice {
|
|
5
5
|
currencyCode: string;
|
|
6
|
-
currencySymbol: string | null;
|
|
7
6
|
price: number;
|
|
8
7
|
|
|
9
8
|
constructor(data: ICheckoutSettingsPrice) {
|
|
10
9
|
this.currencyCode = data.currencyCode;
|
|
11
|
-
this.currencySymbol = data.currencySymbol || null;
|
|
12
10
|
this.price = data.price;
|
|
13
11
|
|
|
14
12
|
makeAutoObservable(this);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { IkasBaseModel } from "../base";
|
|
2
|
-
import { IkasLocationTranslations } from "./location-translations";
|
|
3
2
|
import { IkasCountry as ICountry } from "@ikas/storefront-models";
|
|
4
3
|
import { makeObservable, observable } from "mobx";
|
|
5
4
|
|
|
@@ -10,7 +9,6 @@ export class IkasCountry extends IkasBaseModel implements ICountry {
|
|
|
10
9
|
emojiString: string | null = null;
|
|
11
10
|
iso2: string | null = null;
|
|
12
11
|
iso3: string | null = null;
|
|
13
|
-
locationTranslations?: IkasLocationTranslations | null = null;
|
|
14
12
|
name: string;
|
|
15
13
|
native: string | null = null;
|
|
16
14
|
phoneCode: string | null = null;
|
|
@@ -25,7 +23,6 @@ export class IkasCountry extends IkasBaseModel implements ICountry {
|
|
|
25
23
|
this.emojiString = data.emojiString || null;
|
|
26
24
|
this.iso2 = data.iso2 || null;
|
|
27
25
|
this.iso3 = data.iso3 || null;
|
|
28
|
-
this.locationTranslations = data.locationTranslations || null;
|
|
29
26
|
this.name = data.name || "";
|
|
30
27
|
this.native = data.native || null;
|
|
31
28
|
this.phoneCode = data.phoneCode || null;
|
|
@@ -39,7 +36,6 @@ export class IkasCountry extends IkasBaseModel implements ICountry {
|
|
|
39
36
|
emojiString: observable,
|
|
40
37
|
iso2: observable,
|
|
41
38
|
iso3: observable,
|
|
42
|
-
locationTranslations: observable,
|
|
43
39
|
name: observable,
|
|
44
40
|
native: observable,
|
|
45
41
|
phoneCode: observable,
|