@ikas/storefront 1.0.11 → 1.0.12

package/build/components/checkout/model.d.ts

@@ -17,6 +17,7 @@ export default class CheckoutViewModel {
     isStepLoading: boolean;
     isTermsAndConditionsChecked: boolean;
     isChangingShippingMethod: boolean;
+    isContactModalVisible: boolean;
     step: CheckoutStep;
     merchantSettings?: IkasMerchantSettings;
     cardData?: CreditCardData | null;
@@ -95,6 +96,7 @@ export default class CheckoutViewModel {
     setInstallmentCount: (count: number) => void;
     changeStep: (step: CheckoutStep) => Promise<void>;
     logout: () => Promise<void>;
+    setContactModalVisible: (value: boolean) => void;
 }
 export declare enum CheckoutStep {
     INFO = "info",

package/build/index.es.js

@@ -26266,6 +26266,7 @@ var CheckoutViewModel = /** @class */ (function () {
         this.isStepLoading = false;
         this.isTermsAndConditionsChecked = false;
         this.isChangingShippingMethod = false;
+        this.isContactModalVisible = false;
         this.step = CheckoutStep.INFO;
         this.cardData = null;
         this.paymentGateways = [];
@@ -27153,6 +27154,9 @@ var CheckoutViewModel = /** @class */ (function () {
                 }
             });
         }); };
+        this.setContactModalVisible = function (value) {
+            _this.isContactModalVisible = value;
+        };
         this.checkout = checkout;
         this.checkoutSettings = checkoutSettings;
         this.router = router;
@@ -71623,7 +71627,6 @@ var StepSuccess = observer(function (_a) {
     var _b, _c, _d, _e;
     var vm = _a.vm;
     var t = useTranslation().t;
-    var _f = useState(false), isContactModalVisible = _f[0], setContactModalVisible = _f[1];
     useEffect(function () {
         if (typeof localStorage !== "undefined") {
             var lsCartId = localStorage.getItem(CART_LS_KEY);
@@ -71723,57 +71726,8 @@ var StepSuccess = observer(function (_a) {
         createElement("div", { className: styles$i.Actions },
             createElement("div", { className: styles$i.HelpText },
                 createElement("span", null, t("checkout-page:helpCtaQuestion")),
-                createElement("span", { className: styles$i.Cta, onClick: function () { return setContactModalVisible(true); } }, t("checkout-page:helpCta"))),
-            createElement(Button, { text: t("checkout-page:actions.backToShopping"), onClick: vm.onBackToShoppingClick, style: { flex: "0 0 auto" } })),
-        isContactModalVisible && (createElement(ContactUsModal, { vm: vm, setVisible: setContactModalVisible }))));
-});
-var ContactUsModal = observer(function (_a) {
-    var _b, _c;
-    var vm = _a.vm, setVisible = _a.setVisible;
-    var t = useTranslation().t;
-    var _d = useState(false), isLoading = _d[0], setLoading = _d[1];
-    var _e = useState(false), isSuccess = _e[0], setSuccess = _e[1];
-    var form = useState(new ContactForm({
-        message: {
-            requiredRule: "",
-            emailRule: "",
-            minRule: "",
-        },
-        store: vm.store,
-    }))[0];
-    form.email = vm.checkout.customerEmail;
-    form.firstName = ((_b = vm.checkout.customer) === null || _b === void 0 ? void 0 : _b.firstName) || "";
-    form.lastName = ((_c = vm.checkout.customer) === null || _c === void 0 ? void 0 : _c.lastName) || "";
-    var onSave = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var success;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (isSuccess) {
-                        return [2 /*return*/, setVisible(false)];
-                    }
-                    setLoading(true);
-                    return [4 /*yield*/, form.saveContactForm()];
-                case 1:
-                    success = _a.sent();
-                    if (success) {
-                        setSuccess(true);
-                    }
-                    setLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [isLoading]);
-    return (createElement(Modal, { title: t("checkout-page:contactForm"), modalContent: createElement("div", null,
-            isSuccess && (createElement("div", { style: { marginBottom: "12px", maxWidth: "352px" } },
-                createElement(NotificationBox$1, { type: "success", title: t("checkout-page:contactFormSent"), content: t("checkout-page:contactFormDescription") }))),
-            createElement(FormItem, { type: FormItemType.TEXT_AREA, label: "", value: form.message || "", onChange: form.onMessageChange, textAreaPlaceholder: t("checkout-page:contactFormCta") }),
-            createElement(Button, { style: {
-                    width: "100%",
-                    marginTop: "24px",
-                }, text: isSuccess
-                    ? t("checkout-page:actions.close")
-                    : t("checkout-page:actions.sendMessage"), isLoading: isLoading, isDisabled: !form.message, onClick: onSave })), onClose: function () { return setVisible(false); } }));
+                createElement("span", { className: styles$i.Cta, onClick: function () { return vm.setContactModalVisible(true); } }, t("checkout-page:helpCta"))),
+            createElement(Button, { text: t("checkout-page:actions.backToShopping"), onClick: vm.onBackToShoppingClick, style: { flex: "0 0 auto" } }))));
 });
 var OrderStatus = observer(function (_a) {
     var _b, _c, _d;
@@ -72046,7 +72000,8 @@ var IkasCheckoutPage = function (_a) {
                                     ? "/tr"
                                     : ""), target: "_blank" },
                             createElement(SVGIkas, null))))),
-            !!vm.policyModalText && (createElement(Modal, { title: vm.policyModalTitle, modalContent: vm.policyModalText, onClose: onPolicyModalClose })))));
+            !!vm.policyModalText && (createElement(Modal, { title: vm.policyModalTitle, modalContent: vm.policyModalText, onClose: onPolicyModalClose })),
+            vm.isContactModalVisible && (createElement(ContactUsModal, { vm: vm, setVisible: vm.setContactModalVisible })))));
 };
 var IkasCheckoutPage$1 = observer(IkasCheckoutPage);
 var Header = observer(function (_a) {
@@ -72136,6 +72091,54 @@ var Footer = observer(function (_a) {
         createElement("div", { className: styles$4.FooterBullet }, "\u2022"),
         createElement("div", { className: styles$4.FooterItem, onClick: onTermsOfServiceClick }, t("checkout-page:termsOfService"))));
 });
+var ContactUsModal = observer(function (_a) {
+    var _b, _c;
+    var vm = _a.vm, setVisible = _a.setVisible;
+    var t = useTranslation().t;
+    var _d = useState(false), isLoading = _d[0], setLoading = _d[1];
+    var _e = useState(false), isSuccess = _e[0], setSuccess = _e[1];
+    var form = useState(new ContactForm({
+        message: {
+            requiredRule: "",
+            emailRule: "",
+            minRule: "",
+        },
+        store: vm.store,
+    }))[0];
+    form.email = vm.checkout.customerEmail;
+    form.firstName = ((_b = vm.checkout.customer) === null || _b === void 0 ? void 0 : _b.firstName) || "";
+    form.lastName = ((_c = vm.checkout.customer) === null || _c === void 0 ? void 0 : _c.lastName) || "";
+    var onSave = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var success;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (isSuccess) {
+                        return [2 /*return*/, setVisible(false)];
+                    }
+                    setLoading(true);
+                    return [4 /*yield*/, form.saveContactForm()];
+                case 1:
+                    success = _a.sent();
+                    if (success) {
+                        setSuccess(true);
+                    }
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [isLoading]);
+    return (createElement(Modal, { title: t("checkout-page:contactForm"), modalContent: createElement("div", null,
+            isSuccess && (createElement("div", { style: { marginBottom: "12px", maxWidth: "352px" } },
+                createElement(NotificationBox$1, { type: "success", title: t("checkout-page:contactFormSent"), content: t("checkout-page:contactFormDescription") }))),
+            createElement(FormItem, { type: FormItemType.TEXT_AREA, label: "", value: form.message || "", onChange: form.onMessageChange, textAreaPlaceholder: t("checkout-page:contactFormCta") }),
+            createElement(Button, { style: {
+                    width: "100%",
+                    marginTop: "24px",
+                }, text: isSuccess
+                    ? t("checkout-page:actions.close")
+                    : t("checkout-page:actions.sendMessage"), isLoading: isLoading, isDisabled: !form.message, onClick: onSave })), onClose: function () { return setVisible(false); } }));
+});
 function setCheckoutCustomizationProps(customizationProps) {
     document.documentElement.style.setProperty("--checkout-button-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonBgColor) || "#272727");
     document.documentElement.style.setProperty("--checkout-button-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonTextColor) || "#FFFFFF");

package/build/index.js

@@ -26246,6 +26246,7 @@ var CheckoutViewModel = /** @class */ (function () {
         this.isStepLoading = false;
         this.isTermsAndConditionsChecked = false;
         this.isChangingShippingMethod = false;
+        this.isContactModalVisible = false;
         this.step = CheckoutStep.INFO;
         this.cardData = null;
         this.paymentGateways = [];
@@ -27133,6 +27134,9 @@ var CheckoutViewModel = /** @class */ (function () {
                 }
             });
         }); };
+        this.setContactModalVisible = function (value) {
+            _this.isContactModalVisible = value;
+        };
         this.checkout = checkout;
         this.checkoutSettings = checkoutSettings;
         this.router = router;
@@ -71600,7 +71604,6 @@ var StepSuccess = mobxReactLite.observer(function (_a) {
     var _b, _c, _d, _e;
     var vm = _a.vm;
     var t = useTranslation().t;
-    var _f = React.useState(false), isContactModalVisible = _f[0], setContactModalVisible = _f[1];
     React.useEffect(function () {
         if (typeof localStorage !== "undefined") {
             var lsCartId = localStorage.getItem(CART_LS_KEY);
@@ -71700,57 +71703,8 @@ var StepSuccess = mobxReactLite.observer(function (_a) {
         React.createElement("div", { className: styles$i.Actions },
             React.createElement("div", { className: styles$i.HelpText },
                 React.createElement("span", null, t("checkout-page:helpCtaQuestion")),
-                React.createElement("span", { className: styles$i.Cta, onClick: function () { return setContactModalVisible(true); } }, t("checkout-page:helpCta"))),
-            React.createElement(Button, { text: t("checkout-page:actions.backToShopping"), onClick: vm.onBackToShoppingClick, style: { flex: "0 0 auto" } })),
-        isContactModalVisible && (React.createElement(ContactUsModal, { vm: vm, setVisible: setContactModalVisible }))));
-});
-var ContactUsModal = mobxReactLite.observer(function (_a) {
-    var _b, _c;
-    var vm = _a.vm, setVisible = _a.setVisible;
-    var t = useTranslation().t;
-    var _d = React.useState(false), isLoading = _d[0], setLoading = _d[1];
-    var _e = React.useState(false), isSuccess = _e[0], setSuccess = _e[1];
-    var form = React.useState(new ContactForm({
-        message: {
-            requiredRule: "",
-            emailRule: "",
-            minRule: "",
-        },
-        store: vm.store,
-    }))[0];
-    form.email = vm.checkout.customerEmail;
-    form.firstName = ((_b = vm.checkout.customer) === null || _b === void 0 ? void 0 : _b.firstName) || "";
-    form.lastName = ((_c = vm.checkout.customer) === null || _c === void 0 ? void 0 : _c.lastName) || "";
-    var onSave = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var success;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (isSuccess) {
-                        return [2 /*return*/, setVisible(false)];
-                    }
-                    setLoading(true);
-                    return [4 /*yield*/, form.saveContactForm()];
-                case 1:
-                    success = _a.sent();
-                    if (success) {
-                        setSuccess(true);
-                    }
-                    setLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [isLoading]);
-    return (React.createElement(Modal, { title: t("checkout-page:contactForm"), modalContent: React.createElement("div", null,
-            isSuccess && (React.createElement("div", { style: { marginBottom: "12px", maxWidth: "352px" } },
-                React.createElement(NotificationBox$1, { type: "success", title: t("checkout-page:contactFormSent"), content: t("checkout-page:contactFormDescription") }))),
-            React.createElement(FormItem, { type: FormItemType.TEXT_AREA, label: "", value: form.message || "", onChange: form.onMessageChange, textAreaPlaceholder: t("checkout-page:contactFormCta") }),
-            React.createElement(Button, { style: {
-                    width: "100%",
-                    marginTop: "24px",
-                }, text: isSuccess
-                    ? t("checkout-page:actions.close")
-                    : t("checkout-page:actions.sendMessage"), isLoading: isLoading, isDisabled: !form.message, onClick: onSave })), onClose: function () { return setVisible(false); } }));
+                React.createElement("span", { className: styles$i.Cta, onClick: function () { return vm.setContactModalVisible(true); } }, t("checkout-page:helpCta"))),
+            React.createElement(Button, { text: t("checkout-page:actions.backToShopping"), onClick: vm.onBackToShoppingClick, style: { flex: "0 0 auto" } }))));
 });
 var OrderStatus = mobxReactLite.observer(function (_a) {
     var _b, _c, _d;
@@ -72023,7 +71977,8 @@ var IkasCheckoutPage = function (_a) {
                                     ? "/tr"
                                     : ""), target: "_blank" },
                             React.createElement(SVGIkas, null))))),
-            !!vm.policyModalText && (React.createElement(Modal, { title: vm.policyModalTitle, modalContent: vm.policyModalText, onClose: onPolicyModalClose })))));
+            !!vm.policyModalText && (React.createElement(Modal, { title: vm.policyModalTitle, modalContent: vm.policyModalText, onClose: onPolicyModalClose })),
+            vm.isContactModalVisible && (React.createElement(ContactUsModal, { vm: vm, setVisible: vm.setContactModalVisible })))));
 };
 var IkasCheckoutPage$1 = mobxReactLite.observer(IkasCheckoutPage);
 var Header = mobxReactLite.observer(function (_a) {
@@ -72113,6 +72068,54 @@ var Footer = mobxReactLite.observer(function (_a) {
         React.createElement("div", { className: styles$4.FooterBullet }, "\u2022"),
         React.createElement("div", { className: styles$4.FooterItem, onClick: onTermsOfServiceClick }, t("checkout-page:termsOfService"))));
 });
+var ContactUsModal = mobxReactLite.observer(function (_a) {
+    var _b, _c;
+    var vm = _a.vm, setVisible = _a.setVisible;
+    var t = useTranslation().t;
+    var _d = React.useState(false), isLoading = _d[0], setLoading = _d[1];
+    var _e = React.useState(false), isSuccess = _e[0], setSuccess = _e[1];
+    var form = React.useState(new ContactForm({
+        message: {
+            requiredRule: "",
+            emailRule: "",
+            minRule: "",
+        },
+        store: vm.store,
+    }))[0];
+    form.email = vm.checkout.customerEmail;
+    form.firstName = ((_b = vm.checkout.customer) === null || _b === void 0 ? void 0 : _b.firstName) || "";
+    form.lastName = ((_c = vm.checkout.customer) === null || _c === void 0 ? void 0 : _c.lastName) || "";
+    var onSave = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var success;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (isSuccess) {
+                        return [2 /*return*/, setVisible(false)];
+                    }
+                    setLoading(true);
+                    return [4 /*yield*/, form.saveContactForm()];
+                case 1:
+                    success = _a.sent();
+                    if (success) {
+                        setSuccess(true);
+                    }
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [isLoading]);
+    return (React.createElement(Modal, { title: t("checkout-page:contactForm"), modalContent: React.createElement("div", null,
+            isSuccess && (React.createElement("div", { style: { marginBottom: "12px", maxWidth: "352px" } },
+                React.createElement(NotificationBox$1, { type: "success", title: t("checkout-page:contactFormSent"), content: t("checkout-page:contactFormDescription") }))),
+            React.createElement(FormItem, { type: FormItemType.TEXT_AREA, label: "", value: form.message || "", onChange: form.onMessageChange, textAreaPlaceholder: t("checkout-page:contactFormCta") }),
+            React.createElement(Button, { style: {
+                    width: "100%",
+                    marginTop: "24px",
+                }, text: isSuccess
+                    ? t("checkout-page:actions.close")
+                    : t("checkout-page:actions.sendMessage"), isLoading: isLoading, isDisabled: !form.message, onClick: onSave })), onClose: function () { return setVisible(false); } }));
+});
 function setCheckoutCustomizationProps(customizationProps) {
     document.documentElement.style.setProperty("--checkout-button-bg-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonBgColor) || "#272727");
     document.documentElement.style.setProperty("--checkout-button-text-color", (customizationProps === null || customizationProps === void 0 ? void 0 : customizationProps.buttonTextColor) || "#FFFFFF");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
   "author": "Umut Ozan Yıldırım",