@ikas/storefront 3.0.0-beta.1 → 4.0.0-alpha.11

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

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+import { formatMoney, useTranslation } from "../../../../utils";
+
+import styles from "./style.module.scss";
+import { Button } from "../../components/button";
+import { Checkbox } from "../../components/checkbox";
+import { FormItemType } from "../../components/form-item/model";
+import { FormItem } from "../../components/form-item";
+import Errors from "../../components/error";
+import SelectBox from "../../components/select-box";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const CheckoutStepShipping: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={[styles.StepShipping].join(" ")}>
+      <ShippingMethods vm={vm} />
+      <GiftPackage vm={vm} />
+      <Button
+        style={{ width: "100%", marginTop: "32px" }}
+        text={t("checkout-page:actions.continueWithPayment")}
+        isLoading={vm.isStepLoading}
+        onClick={vm.onProceedToPaymentClick}
+      />
+    </div>
+  );
+});
+
+type CommonProps = {
+  vm: CheckoutViewModel;
+};
+
+const ShippingMethods: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={[
+        styles.InfoBox,
+        vm.isChangingShippingMethod ? styles.Dimmed : "",
+      ].join(" ")}
+    >
+      <Errors vm={vm} />
+      {vm.checkout.availableShippingMethods?.map((asm, index) => (
+        <SelectBox
+          key={asm.shippingSettingsId + asm.shippingZoneRateId}
+          label={asm.rateName}
+          isSelected={
+            vm.checkout.shippingSettingsId === asm.shippingSettingsId &&
+            vm.checkout.shippingZoneRateId === asm.shippingZoneRateId
+          }
+          rightContent={
+            <div className={styles.ShippingPrice}>
+              {asm.price === 0
+                ? t("checkout-page:free")
+                : formatMoney(asm.price, vm.checkout.currencyCode)}
+            </div>
+          }
+          onClick={() => vm.onShippingMethodChange(asm)}
+        />
+      ))}
+    </div>
+  );
+});
+
+const GiftPackage: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  const onIsGiftPackageChange = React.useCallback(
+    (value: boolean) => {
+      vm.checkout.isGiftPackage = value;
+    },
+    [vm]
+  );
+
+  const onGiftPackageNoteChange = React.useCallback(
+    (value: string) => {
+      vm.checkout.giftPackageNote = value;
+    },
+    [vm, vm.checkout]
+  );
+
+  const giftPackagePrice = React.useMemo(() => {
+    return vm.checkoutSettings.giftPackagePriceList?.find(
+      (pl) => pl.currencyCode === vm.checkout.currencyCode
+    );
+  }, [vm, vm.checkoutSettings, vm.checkout]);
+
+  const checkboxLabel =
+    t("checkout-page:giftPackageCta") +
+    (giftPackagePrice && giftPackagePrice.price
+      ? ` (+ ${formatMoney(
+          giftPackagePrice!.price,
+          giftPackagePrice!.currencyCode
+        )})`
+      : "");
+
+  if (!vm.checkoutSettings.isGiftPackageEnabled) return null;
+
+  return (
+    <div className={styles.GiftSection}>
+      <Checkbox
+        value={vm.checkout.isGiftPackage || false}
+        label={checkboxLabel}
+        onChange={onIsGiftPackageChange}
+        removePadding
+      />
+      {vm.checkout.isGiftPackage && (
+        <FormItem
+          type={FormItemType.TEXT_AREA}
+          label=""
+          value={vm.checkout.giftPackageNote || ""}
+          onChange={onGiftPackageNoteChange}
+          style={{ marginTop: "16px" }}
+          textAreaPlaceholder={t("checkout-page:giftPackageCtaPlaceholder")}
+        />
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,44 @@
+@import "../../styles/variables.scss";
+
+.BackButtonContainer {
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  a {
+    line-height: 0.9em;
+  }
+}
+
+.Actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media only screen and (max-width: $breakpoint) {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+
+    a {
+      margin-top: 1em;
+    }
+  }
+}
+
+.StepShipping {
+  margin-top: 8px;
+}
+
+.InfoBox {
+  &.Dimmed {
+    opacity: 0.5;
+  }
+}
+
+.GiftSection {
+  margin-top: 32px;
+}
+
+.ShippingPrice {
+  font-weight: 600;
+}

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

@@ -0,0 +1,366 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+import { Button } from "../../components/button";
+import { CART_LS_KEY } from "../../../../store/cart";
+import styles from "./style.module.scss";
+import SVGSuccessCircle from "../../components/svg/success-circle";
+import ExpandableSection from "../../components/expandable-section";
+
+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 { IkasOrderPackageStatus } from "../../../../models";
+import {
+  IkasPaymentGatewayType,
+  IkasPaymentMethodType,
+} from "../../../../models/data/payment-gateway";
+import OfferProduct from "../../components/offer-product";
+import { IkasTransactionCardAssociation } from "@ikas/storefront-models";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const StepSuccess: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    if (typeof localStorage !== "undefined") {
+      const lsCartId = localStorage.getItem(CART_LS_KEY);
+
+      if (lsCartId && lsCartId === vm.checkout.id)
+        localStorage.removeItem(CART_LS_KEY);
+    }
+  }, []);
+
+  const customerName =
+    (vm.checkout.customer?.firstName || "") +
+    " " +
+    (vm.checkout.customer?.lastName || "");
+
+  const receiverName =
+    (vm.checkout.shippingAddress?.firstName || "") +
+    " " +
+    (vm.checkout.shippingAddress?.lastName || "");
+
+  const paymentGateway = vm.paymentGateways.find(
+    (pg) => pg.id === vm.successTransaction?.paymentGatewayId
+  );
+
+  const getCardLogo = () => {
+    switch (vm.successTransaction?.paymentMethodDetail?.cardAssociation) {
+      case IkasTransactionCardAssociation.AMERICAN_EXPRESS:
+        return <SVGAmex />;
+
+      case IkasTransactionCardAssociation.MASTER_CARD:
+        return <SVGMasterCard />;
+
+      case IkasTransactionCardAssociation.TROY:
+        return <SVGTroy />;
+
+      case IkasTransactionCardAssociation.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.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>
+          {vm.deliveryMethod === "in-store" && (
+            <>
+              <div className={styles.InfoTitle}>
+                {t("checkout-page:receiver")}
+              </div>
+              <div className={[styles.InfoText, styles.withMBottom].join(" ")}>
+                {receiverName}
+              </div>
+            </>
+          )}
+
+          <div className={styles.InfoTitle}>
+            {vm.deliveryMethod === "address"
+              ? t("checkout-page:shippingAddress")
+              : t("checkout-page:pickUpLocation")}
+          </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(
+          vm.deliveryMethod === "address"
+            ? "checkout-page:orderSuccessDescription"
+            : "checkout-page:orderSuccessInStoreDeliveryDescription",
+          {
+            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>
+
+      {vm.postCheckoutCampaignOffer && (
+        <OfferProduct vm={vm} campaignOffer={vm.postCheckoutCampaignOffer} />
+      )}
+
+      <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={() => vm.setContactModalVisible(true)}
+          >
+            {t("checkout-page:helpCta")}
+          </span>
+        </div>
+        <Button
+          text={t("checkout-page:actions.backToShopping")}
+          onClick={vm.onBackToShoppingClick}
+          style={{ flex: "0 0 auto" }}
+        />
+      </div>
+    </div>
+  );
+});
+
+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.checkout.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.checkout.orderPackageStatus
+        ? getOrderPackageStatusText().find((o) =>
+            o.types.includes(vm.checkout.orderPackageStatus!)
+          )?.text
+        : ""}
+    </div>
+  );
+});

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

@@ -0,0 +1,161 @@
+@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;
+    }
+  }
+}
+
+.withMBottom {
+  margin-bottom: 12px;
+}