@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/steps/step-success/index.tsx

@@ -0,0 +1,437 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+import { Button } from "../../components/button";
+import { CART_LS_KEY, CHECKOUT_LS_KEY } from "../../../../store/cart";
+import styles from "./style.module.scss";
+import { Analytics } from "../../../../analytics";
+import SVGSuccessCircle from "../../components/svg/success-circle";
+import ExpandableSection from "../../components/expandable-section";
+import { IkasTransactionCardAssociationEnum } from "../../../../models/data/order-transaction";
+
+import SVGAmex from "../../components/credit-card-form/svg/amex";
+import SVGMasterCard from "../../components/credit-card-form/svg/master-card";
+import SVGTroy from "../../components/credit-card-form/svg/troy";
+import SVGVisa from "../../components/credit-card-form/svg/visa";
+import { formatMoney, useTranslation } from "../../../../utils";
+import { Modal } from "../../components/modal";
+import { FormItem } from "../../components/form-item";
+import { FormItemType } from "../../components/form-item/model";
+import { ContactForm } from "../../../../models/ui/validator/form/contact-form";
+import NotificationBox from "../../components/notification-box";
+import { IkasOrderPackageStatus } from "../../../../models";
+import { IkasPaymentGatewayType, IkasPaymentMethodType } from "../../../../models/data/payment-gateway";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const StepSuccess: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  const [isContactModalVisible, setContactModalVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof localStorage !== "undefined") {
+      const lsCartId = localStorage.getItem(CART_LS_KEY);
+      const lsCheckoutId = localStorage.getItem(CHECKOUT_LS_KEY);
+
+      if (lsCartId && lsCartId === vm.checkout.cartId)
+        localStorage.removeItem(CART_LS_KEY);
+
+      if (lsCheckoutId && lsCheckoutId === vm.checkout.id)
+        localStorage.removeItem(CHECKOUT_LS_KEY);
+    }
+
+    if (vm.successTransaction)
+      Analytics.purchase(vm.checkout, vm.successTransaction);
+  }, []);
+
+  const customerName =
+    (vm.checkout.customer?.firstName || "") +
+    " " +
+    (vm.checkout.customer?.lastName || "");
+
+  const paymentGateway = vm.paymentGateways.find(
+    (pg) => pg.id === vm.successTransaction?.paymentGatewayId
+  );
+
+  const getCardLogo = () => {
+    switch (vm.successTransaction?.paymentMethodDetail?.cardAssociation) {
+      case IkasTransactionCardAssociationEnum.AMERICAN_EXPRESS:
+        return <SVGAmex />;
+
+      case IkasTransactionCardAssociationEnum.MASTER_CARD:
+        return <SVGMasterCard />;
+
+      case IkasTransactionCardAssociationEnum.TROY:
+        return <SVGTroy />;
+
+      case IkasTransactionCardAssociationEnum.VISA:
+        return <SVGVisa />;
+
+      default:
+        return <div></div>;
+    }
+  };
+
+  const paymentMethodDetail = vm.successTransaction?.paymentMethodDetail;
+
+  const paymentInfoGrid = React.useMemo(() => {
+    return (
+      <div className={[styles.InfoGrid].join(" ")}>
+        <div>
+          <div className={styles.InfoTitle}>
+            {t("checkout-page:paymentMethod")}
+          </div>
+          {paymentGateway && (
+            <>
+              {!!paymentGateway.logoUrl && (
+                <div className={styles.PaymentLogoContainer}>
+                  <img src={paymentGateway.logoUrl} />
+                </div>
+              )}
+              {!paymentGateway.logoUrl && (
+                <div className={styles.InfoText}>
+                  {paymentGateway.paymentMethodType ===
+                    IkasPaymentMethodType.CREDIT_CARD &&
+                  paymentGateway.type === IkasPaymentGatewayType.INTERNAL
+                    ? t("checkout-page:creditCard")
+                    : paymentGateway.name}
+                </div>
+              )}
+              {!!paymentGateway.description &&
+                paymentGateway.type !== IkasPaymentGatewayType.EXTERNAL && (
+                  <div className={styles.InfoText}>
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: paymentGateway.description,
+                      }}
+                    ></div>
+                  </div>
+                )}
+            </>
+          )}
+          {vm.successTransaction?.paymentMethod === "CREDIT_CARD" && (
+            <React.Fragment>
+              <div className={styles.InfoText}>
+                <div className={styles.CardLogoContainer}>{getCardLogo()}</div>
+                <span>{`**** ${
+                  paymentMethodDetail?.lastFourDigits || ""
+                }`}</span>
+              </div>
+
+              {paymentMethodDetail?.installment?.installmentCount &&
+                paymentMethodDetail.installment.installmentCount > 1 && (
+                  <React.Fragment>
+                    <div className={styles.InfoText}>{`${
+                      paymentMethodDetail.installment.installmentCount
+                    } ${t("checkout-page:installments")}`}</div>
+                    {paymentMethodDetail.installment.installmentPrice !==
+                      null && (
+                      <div className={styles.InfoText}>{`${
+                        paymentMethodDetail.installment.installmentCount
+                      } x ${formatMoney(
+                        paymentMethodDetail.installment.installmentPrice,
+                        vm.checkout.cart!.currencyCode
+                      )}`}</div>
+                    )}
+                  </React.Fragment>
+                )}
+            </React.Fragment>
+          )}
+        </div>
+
+        <div>
+          <div className={styles.InfoTitle}>
+            {t("checkout-page:billingAddress")}
+          </div>
+          {!!vm.checkout.billingAddress?.company && (
+            <div className={[styles.InfoText, styles.InfoTextBold].join(" ")}>
+              {vm.checkout.billingAddress.company}
+            </div>
+          )}
+          <div className={styles.InfoText}>
+            {vm.checkout.billingAddress?.addressText}
+          </div>
+        </div>
+      </div>
+    );
+  }, []);
+
+  const contactInfoGrid = React.useMemo(() => {
+    return (
+      <div className={[styles.InfoGrid].join(" ")}>
+        <div>
+          <div className={styles.InfoTitle}>
+            {t("checkout-page:contactInfo")}
+          </div>
+          <div className={styles.InfoText}>{vm.checkout.customer?.email}</div>
+          <div className={styles.InfoText}>{customerName}</div>
+          {!!vm.checkout.shippingAddress?.phone && (
+            <div className={styles.InfoText}>
+              {vm.checkout.shippingAddress?.phone}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <div className={styles.InfoTitle}>
+            {t("checkout-page:shippingAddress")}
+          </div>
+          {!!vm.checkout.shippingAddress?.company && (
+            <div className={[styles.InfoText, styles.InfoTextBold].join(" ")}>
+              {vm.checkout.shippingAddress.company}
+            </div>
+          )}
+          <div className={styles.InfoText}>
+            {vm.checkout.shippingAddress?.addressText}
+          </div>
+        </div>
+      </div>
+    );
+  }, []);
+
+  return (
+    <div className={styles.StepSuccess}>
+      <div className={styles.SuccessTitleContainer}>
+        <SVGSuccessCircle />
+        <span className={styles.SuccessTitle}>
+          {t("checkout-page:orderSuccessTitle")}
+        </span>
+      </div>
+      <div className={styles.SuccessSubTitle}>
+        {t("checkout-page:orderSuccessDescription", {
+          customerName,
+        })}
+      </div>
+
+      <div className={[styles.InfoGrid, styles.WithBorder].join(" ")}>
+        <div>
+          <div className={styles.InfoTitle}>
+            {t("checkout-page:orderNoAndDate")}
+          </div>
+          <div className={[styles.InfoText, styles.InfoTextBold].join(" ")}>
+            {"#" + (vm.checkout.orderNumber || "")}
+          </div>
+          <div className={styles.InfoText}>{vm.checkout.dateStr}</div>
+          <OrderStatus vm={vm} />
+        </div>
+
+        <div>
+          <div className={styles.InfoTitle}>
+            {t("checkout-page:contactInfo")}
+          </div>
+          <div className={styles.InfoText}>{vm.checkout.customer?.email}</div>
+          <div className={styles.InfoText}>{customerName}</div>
+        </div>
+      </div>
+
+      <ExpandableSection title={t("checkout-page:paymentSummary")}>
+        {paymentInfoGrid}
+      </ExpandableSection>
+      <ExpandableSection title={t("checkout-page:shippingSummary")}>
+        {contactInfoGrid}
+      </ExpandableSection>
+
+      <div className={styles.Actions}>
+        <div className={styles.HelpText}>
+          <span>{t("checkout-page:helpCtaQuestion")}</span>
+          <span
+            className={styles.Cta}
+            onClick={() => setContactModalVisible(true)}
+          >
+            {t("checkout-page:helpCta")}
+          </span>
+        </div>
+        <Button
+          text={t("checkout-page:actions.backToShopping")}
+          onClick={vm.onBackToShoppingClick}
+          style={{ flex: "0 0 auto" }}
+        />
+      </div>
+
+      {isContactModalVisible && (
+        <ContactUsModal vm={vm} setVisible={setContactModalVisible} />
+      )}
+    </div>
+  );
+});
+
+type ContactUsModalProps = {
+  vm: CheckoutViewModel;
+  setVisible: (value: boolean) => void;
+};
+
+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: "",
+        },
+        store: vm.store,
+      })
+    );
+
+    form.email = vm.checkout.customerEmail;
+    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)}
+      />
+    );
+  }
+);
+
+const OrderStatus: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  let colorClass = styles.Yellow;
+
+  const getOrderPackageStatusText = () => {
+    return [
+      {
+        types: [IkasOrderPackageStatus.UNFULFILLED],
+        text: t("checkout-page:orderPackageStatus.unfulfilled"),
+      },
+      {
+        types: [IkasOrderPackageStatus.READY_FOR_SHIPMENT],
+        text: t("checkout-page:orderPackageStatus.readyForShipment"),
+      },
+      {
+        types: [IkasOrderPackageStatus.PARTIALLY_FULFILLED],
+        text: t("checkout-page:orderPackageStatus.partiallyFulfilled"),
+      },
+      {
+        types: [IkasOrderPackageStatus.FULFILLED],
+        text: t("checkout-page:orderPackageStatus.fulfilled"),
+      },
+      {
+        types: [
+          IkasOrderPackageStatus.DELIVERED,
+          IkasOrderPackageStatus.PARTIALLY_DELIVERED,
+        ],
+        text: t("checkout-page:orderPackageStatus.delivered"),
+      },
+      {
+        types: [IkasOrderPackageStatus.UNABLE_TO_DELIVER],
+        text: t("checkout-page:orderPackageStatus.unableToDeliver"),
+      },
+      {
+        types: [
+          IkasOrderPackageStatus.CANCELLED,
+          IkasOrderPackageStatus.PARTIALLY_CANCELLED,
+        ],
+        text: t("checkout-page:orderPackageStatus.cancelled"),
+      },
+      {
+        types: [IkasOrderPackageStatus.CANCEL_REJECTED],
+        text: t("checkout-page:orderPackageStatus.cancelRejected"),
+      },
+      {
+        types: [
+          IkasOrderPackageStatus.REFUNDED,
+          IkasOrderPackageStatus.PARTIALLY_REFUNDED,
+        ],
+        text: t("checkout-page:orderPackageStatus.refunded"),
+      },
+      {
+        types: [IkasOrderPackageStatus.REFUND_REQUEST_ACCEPTED],
+        text: t("checkout-page:orderPackageStatus.refundRequestAccepted"),
+      },
+      {
+        types: [IkasOrderPackageStatus.REFUND_REJECTED],
+        text: t("checkout-page:orderPackageStatus.refundRejected"),
+      },
+      {
+        types: [IkasOrderPackageStatus.REFUND_REQUESTED],
+        text: t("checkout-page:orderPackageStatus.refundRequested"),
+      },
+    ];
+  };
+
+  switch (vm.order?.orderPackageStatus) {
+    case IkasOrderPackageStatus.FULFILLED:
+    case IkasOrderPackageStatus.PARTIALLY_FULFILLED:
+    case IkasOrderPackageStatus.DELIVERED:
+    case IkasOrderPackageStatus.PARTIALLY_DELIVERED:
+      colorClass = styles.Green;
+      break;
+
+    case IkasOrderPackageStatus.CANCELLED:
+    case IkasOrderPackageStatus.PARTIALLY_CANCELLED:
+    case IkasOrderPackageStatus.CANCEL_REJECTED:
+    case IkasOrderPackageStatus.CANCEL_REQUESTED:
+      colorClass = styles.Red;
+      break;
+
+    default:
+      break;
+  }
+
+  return (
+    <div className={[styles.OrderStatus, colorClass].join(" ")}>
+      {vm.order?.orderPackageStatus
+        ? getOrderPackageStatusText().find((o) =>
+            o.types.includes(vm.order!.orderPackageStatus!)
+          )?.text
+        : ""}
+    </div>
+  );
+});

package/src/components/checkout/steps/step-success/style.module.scss

@@ -0,0 +1,160 @@
+@import "../../styles/variables.scss";
+
+.StepSuccess {
+
+  padding-top: 24px;
+
+  .SuccessTitleContainer {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+
+    .SuccessTitle {
+      font-size: 28px;
+      font-weight: 600;
+      margin-left: 16px;
+    }
+  }
+
+  .SuccessSubTitle {
+    margin: auto;
+    margin-bottom: 32px;
+  }
+
+  .InfoGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 48px;
+
+    .InfoTitle {
+      font-size: 16px;
+      line-height: 24px;
+      margin-bottom: 12px;
+    }
+
+    .InfoText {
+      font-size: 14px;
+      color: $secondaryTextColor;
+
+      display: flex;
+      align-items: center;
+    }
+
+    .InfoTextBold {
+      font-weight: 600;
+      color: $primaryTextColor;
+    }
+
+    &.WithBorder {
+      border-bottom: 1px solid $borderColor;
+      padding-bottom: 24px;
+    }
+
+    .CardLogoContainer {
+      display: flex;
+      align-items: center;
+      margin-right: 4px;
+    }
+
+    .PaymentLogoContainer {    
+      img {
+        height: 20px;
+      }
+    }
+  }
+
+  .Actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+    margin-top: 24px;
+
+    .HelpText {
+      display: flex;
+      align-items: center;
+      color: $secondaryTextColor;
+      flex-wrap: wrap;
+
+      .Cta {
+        color: $primaryTextColor;
+        margin-left: 4px;
+
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    @media only screen and (max-width: 400px) {
+      flex-direction: column;
+
+      .HelpText {
+        margin-bottom: 12px;
+
+        .Cta {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .OrderStatus {
+    padding: 4px 8px;
+    border-radius: 6px;
+    margin-top: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    display: inline-flex;
+
+    &.Yellow {
+      color: $warningColor;
+      background-color: $warningLightColor;
+      border: 1px solid $warningColor;
+    }
+
+    &.Green {
+      color: $successColor;
+      background-color: $successLightColor;
+      border: 1px solid $successColor;
+    }
+
+    &.Red {
+      color: $errorColor;
+      background-color: $errorLightColor;
+      border: 1px solid $errorColor;
+    }
+  }
+
+  @media only screen and (max-width: $breakpoint) {
+    padding-left: 24px;
+    padding-right: 24px;
+
+    .SuccessTitleContainer {
+      margin-bottom: 12px;
+
+      .SuccessTitle {
+        font-size: 20px;
+      }
+    }
+
+    .SuccessSubTitle {
+      max-width: 400px;
+      margin-left: 56px;
+    }
+  
+  }
+
+  @media only screen and (max-width: 400px) {
+    .InfoGrid {
+      grid-template-columns: 1fr;
+      grid-gap: 24px;
+    }
+
+    .SuccessSubTitle {
+      margin-left: 0;
+    } 
+  }
+
+}