@ikas/storefront 4.0.0-alpha.7 → 4.0.0-alpha.70

package/src/components/checkout/index.tsx

@@ -1,641 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router.js";
-import Link from "next/link.js";
-import ReactTooltip from "react-tooltip";
-
-import CheckoutViewModel, { CheckoutStep } from "./model";
-import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
-import { IkasCheckout } from "../../models/data/checkout";
-import { formatMoney, useTranslation } from "../../utils";
-
-import CheckoutStepInfo from "./steps/step-info";
-import { CheckoutStepShipping } from "./steps/step-shipping";
-import { CheckoutStepPayment } from "./steps/step-payment";
-import { CartSummary } from "./components/cart-summary";
-import { ContactForm, IkasThemeJsonPageType } from "../../models";
-import { StepSuccess } from "./steps/step-success";
-
-import { Modal } from "./components/modal";
-
-import MasterPassOtpModal from "./components/master-pass/modal-otp";
-import MasterPassLinkCardToClientModal from "./components/master-pass/modal-link-card-to-client";
-import MasterPassResponseModal from "./components/master-pass/modal-response";
-import MasterPassSuccessModal from "./components/master-pass/modal-success";
-
-import { Image } from "../image";
-import StepContainer, { Step } from "./components/step-container";
-import { StockError } from "./components/error/stock-error";
-import { FullscreenLoading } from "./components/fullscreen-loading";
-import NotificationBox from "./components/notification-box";
-import { FormItem } from "./components/form-item";
-import { FormItemType } from "./components/form-item/model";
-import { Button } from "./components/button";
-import { IkasPageHead } from "../page/head";
-import OfferProduct from "./components/offer-product";
-
-import SVGIkas from "./components/svg/ikas";
-
-import styles from "./style.module.scss";
-import { Analytics } from "../../analytics";
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
-
-export type IkasCheckoutPageProps = {
-  checkout: IkasCheckout;
-  checkoutSettings: IkasCheckoutSettings;
-  customizationProps?: IkasCheckoutCustomizationProps;
-  returnPolicy: string;
-  privacyPolicy: string;
-  termsOfService: string;
-};
-
-export type IkasCheckoutCustomizationProps = {
-  showTax?: boolean;
-  buttonBgColor?: string;
-  buttonTextColor?: string;
-  buttonDisabledBgColor?: string;
-  buttonDisabledTextColor?: string;
-
-  primaryTextColor?: string;
-  secondaryTextColor?: string;
-
-  primaryBgColor?: string;
-  secondaryBgColor?: string;
-  borderColor?: string;
-  cardBgColor?: string;
-
-  errorColor?: string;
-  errorLightColor?: string;
-  warningColor?: string;
-  warningLightColor?: string;
-  successColor?: string;
-  successLightColor?: string;
-};
-
-const IkasCheckoutPage: React.FC<IkasCheckoutPageProps> = ({
-  checkout,
-  checkoutSettings,
-  customizationProps,
-  returnPolicy,
-  privacyPolicy,
-  termsOfService,
-}) => {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const [vm] = React.useState(
-    () =>
-      new CheckoutViewModel(
-        checkout,
-        checkoutSettings,
-        router,
-        returnPolicy,
-        privacyPolicy,
-        termsOfService,
-        t,
-        customizationProps || {}
-      )
-  );
-
-  const onPolicyModalClose = () => {
-    vm.policyModalText = "";
-  };
-
-  if (vm.step === CheckoutStep.PAYMENT) {
-    Analytics.disableHTML();
-  }
-
-  React.useEffect(() => {
-    if (vm.checkoutSettings.isAccountRequired && !vm.checkout.hasCustomer) {
-      router.push(
-        "/account/login?redirect=" + encodeURIComponent(vm.checkoutUrl)
-      );
-    }
-
-    Analytics.beginCheckout(vm.checkout);
-    Analytics.pageView(IkasThemeJsonPageType.CHECKOUT);
-  }, []);
-
-  React.useEffect(() => {
-    vm.customizationProps = customizationProps;
-    setCheckoutCustomizationProps(customizationProps);
-  }, [customizationProps]);
-
-  if (!vm.isCheckoutLoaded || !vm.store.customerStore.initialized)
-    return <FullscreenLoading />;
-
-  if (
-    vm.checkout.hasCustomer &&
-    vm.store.customerStore.customer?.id !== vm.checkout.customer?.id
-  ) {
-    router.push(
-      "/account/login?redirect=" + encodeURIComponent(vm.checkoutUrl)
-    );
-    return null;
-  }
-
-  return (
-    <React.Fragment>
-      <IkasPageHead
-        pageType={IkasThemeJsonPageType.CHECKOUT}
-        pageTitle={
-          (vm.merchantSettings?.merchantName || "") +
-          " - " +
-          t("checkout-page:securePayment")
-        }
-        pageDescription={t("checkout-page:securePayment")}
-      />
-      <div id="Checkout" className={styles.CheckoutPage}>
-        <ReactTooltip
-          place="top"
-          type="dark"
-          effect="solid"
-          arrowColor="transparent"
-          multiline={true}
-          className={styles.ReactTooltipWrap}
-          globalEventOff="touchstart"
-        />
-        <div className={styles.Left}>
-          <div className={styles.LeftContent}>
-            <div>
-              <Header vm={vm} />
-              {vm.hasStockError && (
-                <div className={styles.ErrorContainer}>
-                  <StockError vm={vm} error={vm.error!} />
-                </div>
-              )}
-              {!vm.hasStockError && (
-                <React.Fragment>
-                  <CartSummary vm={vm} allowExpand={true} />
-                  {vm.step === CheckoutStep.SUCCESS ? (
-                    <StepSuccess vm={vm} />
-                  ) : (
-                    <React.Fragment>
-                      {vm.checkoutCampaignOffer && (
-                        <OfferProduct
-                          vm={vm}
-                          campaignOffer={vm.checkoutCampaignOffer}
-                        />
-                      )}
-                      <Steps vm={vm} />
-                    </React.Fragment>
-                  )}
-                </React.Fragment>
-              )}
-              <div className={styles.Space} />
-            </div>
-            <Footer vm={vm} />
-          </div>
-        </div>
-        <div className={styles.Right}>
-          <div className={styles.RightContent}>
-            <CartSummary vm={vm} />
-            <div className={styles.PoweredBy}>
-              <span>powered by</span>
-              <a
-                href={
-                  "https://ikas.com" +
-                  (IkasStorefrontConfig.getCurrentLocale() === "tr"
-                    ? "/tr"
-                    : "")
-                }
-                target="_blank"
-              >
-                <SVGIkas />
-              </a>
-            </div>
-          </div>
-        </div>
-        {!!vm.policyModalText && (
-          <Modal
-            title={vm.policyModalTitle}
-            modalContent={vm.policyModalText}
-            onClose={onPolicyModalClose}
-          />
-        )}
-        {vm.isContactModalVisible && (
-          <ContactUsModal vm={vm} setVisible={vm.setContactModalVisible} />
-        )}
-        {vm.mpVM.isLinkCardToClientModalVisible && (
-          <MasterPassLinkCardToClientModal
-            visible={vm.mpVM.isLinkCardToClientModalVisible}
-            vm={vm}
-            onClose={vm.mpVM.hideLinkCardToClientModal}
-          />
-        )}
-        {vm.mpVM.isOtpModalVisible && (
-          <MasterPassOtpModal
-            vm={vm}
-            visible={vm.mpVM.isOtpModalVisible}
-            type={vm.mpVM.otpModalType}
-            onClose={vm.mpVM.hideOtpModal}
-          />
-        )}
-        {vm.mpVM.isResponseModalVisible && (
-          <MasterPassResponseModal
-            visible={vm.mpVM.isResponseModalVisible}
-            text={vm.mpVM.mfsResponseModalText!}
-            onClose={vm.mpVM.onResponseModalClose}
-          />
-        )}
-        {vm.mpVM.isSuccessModalVisible && (
-          <MasterPassSuccessModal
-            visible={vm.mpVM.isSuccessModalVisible}
-            type={vm.mpVM.successModalType}
-            onClose={vm.mpVM.onSuccessModalClose}
-          />
-        )}
-      </div>
-    </React.Fragment>
-  );
-};
-
-export default observer(IkasCheckoutPage);
-
-type CommonProps = {
-  vm: CheckoutViewModel;
-};
-
-type ContactUsModalProps = {
-  vm: CheckoutViewModel;
-  setVisible: (value: boolean) => void;
-};
-
-const Header: React.FC<CommonProps> = observer(({ vm }) => {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.Header}>
-      <Link href="/" passHref>
-        <a>
-          {!!vm.merchantSettings?.logo ? (
-            <div className={styles.Logo}>
-              <Image
-                layout="fill"
-                image={vm.merchantSettings.logo}
-                sizes="360px"
-              />
-            </div>
-          ) : (
-            vm.merchantSettings?.merchantName || ""
-          )}
-        </a>
-      </Link>
-      {!vm.checkout.hasCustomer && (
-        <div className={styles.LoginText}>
-          <span className={styles.LoginCta}>
-            {t("checkout-page:alreadyHaveAnAccount")}
-          </span>
-          <Link
-            href={
-              "/account/login?redirect=" + encodeURIComponent(vm.checkoutUrl)
-            }
-            passHref
-          >
-            <a className={styles.LoginBtn}>
-              {t("checkout-page:actions.login")}
-            </a>
-          </Link>
-        </div>
-      )}
-      {vm.checkout.hasCustomer && (
-        <div className={styles.CustomerInfo}>
-          <div className={styles.Name}>{vm.checkout.customerFullName}</div>
-          <div className={styles.Email}>{vm.checkout.customer?.email}</div>
-        </div>
-      )}
-    </div>
-  );
-});
-
-const Steps: React.FC<CommonProps> = observer(({ vm }) => {
-  const { t } = useTranslation();
-
-  const step: JSX.Element | undefined = React.useMemo(() => {
-    switch (vm.step) {
-      case CheckoutStep.INFO:
-        return <CheckoutStepInfo vm={vm} />;
-
-      case CheckoutStep.SHIPPING:
-        return <CheckoutStepShipping vm={vm} />;
-
-      case CheckoutStep.PAYMENT:
-        return <CheckoutStepPayment vm={vm} />;
-
-      case CheckoutStep.SUCCESS:
-        return <StepSuccess vm={vm} />;
-
-      default:
-        break;
-    }
-  }, [vm, vm.step]);
-
-  const steps: Step[] = [
-    new Step(
-      t("checkout-page:address"),
-      vm.step === CheckoutStep.INFO,
-      vm.step !== CheckoutStep.INFO,
-      vm.step !== CheckoutStep.INFO ? (
-        <div className={styles.AdressStepInfo}>
-          <StepSummaryAddress vm={vm} />
-          <div className={styles.EditBtn} onClick={vm.onBackToInfoClick}>
-            {t("checkout-page:actions.edit")}
-          </div>
-        </div>
-      ) : undefined,
-      vm.step !== CheckoutStep.INFO ? (
-        <div className={styles.AddressStepInfoMobile}>
-          <StepSummaryAddress vm={vm} />
-        </div>
-      ) : undefined
-    ),
-
-    new Step(
-      t("checkout-page:payment"),
-      vm.step === CheckoutStep.PAYMENT,
-      false
-    ),
-  ];
-
-  if (vm.deliveryMethod === "address") {
-    steps.splice(
-      1,
-      0,
-      new Step(
-        t("checkout-page:shipping"),
-        vm.step === CheckoutStep.SHIPPING,
-        vm.step === CheckoutStep.PAYMENT,
-        vm.step === CheckoutStep.PAYMENT ? (
-          <div className={styles.AdressStepInfo}>
-            <StepSummaryShipping vm={vm} />
-            {vm.checkout.availableShippingMethods &&
-              vm.checkout.availableShippingMethods.length > 1 && (
-                <div
-                  className={styles.EditBtn}
-                  onClick={vm.onBackToShippingClick}
-                >
-                  {t("checkout-page:actions.edit")}
-                </div>
-              )}
-          </div>
-        ) : undefined,
-        vm.step === CheckoutStep.PAYMENT ? (
-          <div className={styles.AddressStepInfoMobile}>
-            <StepSummaryShipping vm={vm} />
-          </div>
-        ) : undefined
-      )
-    );
-  }
-
-  return <StepContainer steps={steps} stepContent={step!} />;
-});
-
-const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
-  const { t } = useTranslation();
-
-  const customerName =
-    (vm.checkout.shippingAddress?.firstName || "") +
-    " " +
-    (vm.checkout.shippingAddress?.lastName || "");
-
-  return (
-    <div className={styles.Address}>
-      <div className={[styles.Text, styles.WithMBottom].join(" ")}>
-        {vm.checkout.customer?.email || ""}
-      </div>
-      {vm.deliveryMethod === "address" ? (
-        <div className={styles.Text}>{customerName}</div>
-      ) : (
-        <>
-          <div className={styles.Text}>{t("checkout-page:receiver")}</div>
-          <div className={[styles.Text, styles.Gray].join(" ")}>
-            {customerName}
-          </div>
-        </>
-      )}
-
-      <div className={[styles.Text, styles.Gray].join(" ")}>
-        {vm.checkout.shippingAddress?.phone}
-      </div>
-
-      {vm.deliveryMethod === "in-store" && (
-        <>
-          <div className={[styles.Text, styles.WithMTop].join(" ")}>
-            {t("checkout-page:pickUpLocation")}
-          </div>
-        </>
-      )}
-      <div className={[styles.Text, styles.Gray].join(" ")}>
-        {vm.checkout.shippingAddress?.addressText}
-      </div>
-    </div>
-  );
-});
-
-const StepSummaryShipping: React.FC<CommonProps> = observer(({ vm }) => {
-  const { t } = useTranslation();
-
-  return (
-    <div className={styles.Address}>
-      {vm.checkout.shippingLines && !!vm.checkout.shippingLines.length ? (
-        <React.Fragment>
-          <span>{vm.checkout.shippingLines[0].title}</span>
-          <span className={styles.LightText}>
-            {" / " +
-              (vm.checkout.shippingLines[0].price === 0
-                ? t("checkout-page:free")
-                : formatMoney(
-                    vm.checkout.shippingLines[0].price,
-                    vm.checkout!.currencyCode
-                  ))}
-          </span>
-        </React.Fragment>
-      ) : (
-        t("checkout-page:standartShipping")
-      )}
-    </div>
-  );
-});
-
-const Footer: React.FC<CommonProps> = observer(({ vm }) => {
-  const { t } = useTranslation();
-
-  const onReturnPolicyClick = () => {
-    vm.policyModalTitle = t("checkout-page:returnPolicy");
-    vm.policyModalText = vm.returnPolicy;
-  };
-
-  const onPrivacyPolicyClick = () => {
-    vm.policyModalTitle = t("checkout-page:privacyPolicy");
-    vm.policyModalText = vm.privacyPolicy;
-  };
-
-  const onTermsOfServiceClick = () => {
-    vm.policyModalTitle = t("checkout-page:termsOfService");
-    vm.policyModalText = vm.termsOfService;
-  };
-
-  return (
-    <div className={styles.Footer}>
-      <div className={styles.FooterItem} onClick={onReturnPolicyClick}>
-        {t("checkout-page:returnPolicy")}
-      </div>
-      <div className={styles.FooterBullet}>&bull;</div>
-      <div className={styles.FooterItem} onClick={onPrivacyPolicyClick}>
-        {t("checkout-page:privacyPolicy")}
-      </div>
-      <div className={styles.FooterBullet}>&bull;</div>
-      <div className={styles.FooterItem} onClick={onTermsOfServiceClick}>
-        {t("checkout-page:termsOfService")}
-      </div>
-    </div>
-  );
-});
-
-const ContactUsModal: React.FC<ContactUsModalProps> = observer(
-  ({ vm, setVisible }) => {
-    const { t } = useTranslation();
-    const [isLoading, setLoading] = React.useState(false);
-    const [isSuccess, setSuccess] = React.useState(false);
-    const [form] = React.useState(
-      new ContactForm({
-        message: {
-          requiredRule: "",
-          emailRule: "",
-          minRule: "",
-        },
-      })
-    );
-
-    form.email = vm.checkout.customer?.email || "";
-    form.firstName = vm.checkout.customer?.firstName || "";
-    form.lastName = vm.checkout.customer?.lastName || "";
-
-    const onSave = React.useCallback(async () => {
-      if (isSuccess) {
-        return setVisible(false);
-      }
-
-      setLoading(true);
-
-      const success = await form.saveContactForm();
-      if (success) {
-        setSuccess(true);
-      }
-
-      setLoading(false);
-    }, [isLoading]);
-
-    return (
-      <Modal
-        title={t("checkout-page:contactForm")}
-        modalContent={
-          <div>
-            {isSuccess && (
-              <div style={{ marginBottom: "12px", maxWidth: "352px" }}>
-                <NotificationBox
-                  type="success"
-                  title={t("checkout-page:contactFormSent")}
-                  content={t("checkout-page:contactFormDescription")}
-                />
-              </div>
-            )}
-            <FormItem
-              type={FormItemType.TEXT_AREA}
-              label=""
-              value={form.message || ""}
-              onChange={form.onMessageChange}
-              textAreaPlaceholder={t("checkout-page:contactFormCta")}
-            />
-            <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}
-            />
-          </div>
-        }
-        onClose={() => setVisible(false)}
-      />
-    );
-  }
-);
-
-function setCheckoutCustomizationProps(
-  customizationProps?: IkasCheckoutCustomizationProps
-) {
-  document.documentElement.style.setProperty(
-    "--checkout-button-bg-color",
-    customizationProps?.buttonBgColor || "#272727"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-button-text-color",
-    customizationProps?.buttonTextColor || "#FFFFFF"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-button-disabled-bg-color",
-    customizationProps?.buttonDisabledBgColor || "#F7F7F9"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-button-disabled-text-color",
-    customizationProps?.buttonDisabledTextColor || "#8A8B94"
-  );
-
-  document.documentElement.style.setProperty(
-    "--checkout-primary-text-color",
-    customizationProps?.primaryTextColor || "#272727"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-secondary-text-color",
-    customizationProps?.secondaryTextColor || "#8A8B94"
-  );
-
-  document.documentElement.style.setProperty(
-    "--checkout-primary-bg-color",
-    customizationProps?.primaryBgColor || "#FFFFFF"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-secondary-bg-color",
-    customizationProps?.secondaryBgColor || "#F7F7F9"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-border-color",
-    customizationProps?.borderColor || "#E5E4E9"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-card-bg-color",
-    customizationProps?.cardBgColor || "#F7F7F9"
-  );
-
-  document.documentElement.style.setProperty(
-    "--checkout-error-color",
-    customizationProps?.errorColor || "#FB4E4E"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-error-light-color",
-    customizationProps?.errorLightColor || "#FCF3F4"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-warning-color",
-    customizationProps?.warningColor || "#FFBC1F"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-warning-light-color",
-    customizationProps?.warningLightColor || "#FFFAEE"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-success-color",
-    customizationProps?.successColor || "#2DCA73"
-  );
-  document.documentElement.style.setProperty(
-    "--checkout-success-light-color",
-    customizationProps?.successLightColor || "#F6FFED"
-  );
-}