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

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

@@ -1,126 +0,0 @@
-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

@@ -1,44 +0,0 @@
-@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

@@ -1,366 +0,0 @@
-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

@@ -1,161 +0,0 @@
-@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;
-}