@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/index.tsx

@@ -0,0 +1,476 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import CheckoutViewModel, { CheckoutStep } from "./model";
+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 {
+  IkasCheckout,
+  IkasMerchantSettings,
+  IkasThemePageType,
+} from "../../models";
+import { StepSuccess } from "./steps/step-success";
+import { Modal } from "./components/modal";
+import styles from "./style.module.scss";
+import { IkasPageHead } from "../page/head";
+import { Analytics } from "../../analytics";
+import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
+import { Image } from "../image";
+import Link from "next/link";
+import StepContainer, { Step } from "./components/step-container";
+import { formatMoney, useTranslation } from "../../utils";
+import { StockError } from "./components/error/stock-error";
+import SVGIkas from "./components/svg/ikas";
+import ReactTooltip from "react-tooltip";
+import { IkasStorefrontConfig } from "../../storefront";
+import { FullscreenLoading } from "./components/fullscreen-loading";
+
+export type IkasCheckoutPageProps = {
+  checkout: IkasCheckout;
+  checkoutSettings: IkasCheckoutSettings;
+  merchantSettings: IkasMerchantSettings | null;
+  customizationProps?: IkasCheckoutCustomizationProps;
+  returnPolicy: string;
+  privacyPolicy: string;
+  termsOfService: string;
+};
+
+export type IkasCheckoutCustomizationProps = {
+  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,
+  merchantSettings,
+  customizationProps,
+  returnPolicy,
+  privacyPolicy,
+  termsOfService,
+}) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [vm] = React.useState(
+    () =>
+      new CheckoutViewModel(
+        checkout,
+        checkoutSettings,
+        merchantSettings,
+        router,
+        returnPolicy,
+        privacyPolicy,
+        termsOfService,
+        t
+      )
+  );
+
+  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(IkasThemePageType.CHECKOUT);
+  }, []);
+
+  React.useEffect(() => {
+    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={IkasThemePageType.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>
+                  <div className={styles.MobileCartSummary}>
+                    <CartSummary vm={vm} allowExpand={true} />
+                  </div>
+                  {vm.step === CheckoutStep.SUCCESS ? (
+                    <StepSuccess vm={vm} />
+                  ) : (
+                    <Steps vm={vm} />
+                  )}
+                </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}
+          />
+        )}
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default observer(IkasCheckoutPage);
+
+type CommonProps = {
+  vm: CheckoutViewModel;
+};
+
+const Header: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.Header}>
+      <Link href="/" passHref>
+        <a>
+          {!!vm.merchantSettings?.logoId ? (
+            <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.customerEmail}</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:shipping"),
+      vm.step === CheckoutStep.SHIPPING,
+      vm.step === CheckoutStep.PAYMENT,
+      vm.step === CheckoutStep.PAYMENT ? (
+        <div className={styles.AdressStepInfo}>
+          <StepSummaryShipping vm={vm} />
+          {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
+    ),
+    new Step(
+      t("checkout-page:payment"),
+      vm.step === CheckoutStep.PAYMENT,
+      false
+    ),
+  ];
+
+  return <StepContainer steps={steps} stepContent={step!} />;
+});
+
+const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
+  return (
+    <div className={styles.Address}>
+      <div className={[styles.Text, styles.WithMBottom].join(" ")}>
+        {vm.checkout.customer?.email || ""}
+      </div>
+      <div className={styles.Text}>
+        {(vm.checkout.customer?.firstName || "") +
+          " " +
+          (vm.checkout.customer?.lastName || "")}
+      </div>
+      <div className={[styles.Text, styles.Gray].join(" ")}>
+        {vm.checkout.shippingAddress?.phone}
+      </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.cart!.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>
+  );
+});
+
+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"
+  );
+}