@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/components/cart-summary/cart-item/style.module.scss

@@ -0,0 +1,107 @@
+@import "../../../styles/variables.scss";
+
+.CheckoutItem {
+  display: flex;
+  width: 100%;
+  margin-bottom: 24px;
+
+  .ImageContainer {
+    flex: 0 0 auto;
+    width: 114px;
+    height: 114px;
+    position: relative;
+    margin-right: 16px;
+
+    .Image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 8px;
+    }
+  }
+
+  .Right {
+    position: relative;
+
+    .Name {
+      font-size: 16px;
+      font-weight: 600;
+      color: $primaryTextColor;
+      line-height: 24px;
+      max-height: 48px;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .LightText {
+      font-size: 14px;
+      color: $secondaryTextColor;
+      line-height: 20px;
+      margin-top: 2px;
+    }
+
+    .OptionsText {
+      font-size: 14px;
+      color: $primaryTextColor;
+      line-height: 20px;
+      margin-top: 2px;
+      user-select: none;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+    }
+  }
+
+  .Price {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    color: $primaryTextColor;
+  
+    .GrayPrice {
+      font-size: 14px;
+      color: $secondaryTextColor;
+      text-decoration: line-through;
+      margin-right: 8px;
+    }
+  }
+
+  .OptionRow {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24px;
+    max-width: 400px;
+  
+    .OptionName {
+      font-size: 14px;
+      color: $primaryTextColor;
+      margin-right: 8px;
+      font-weight: 500;
+    }
+  
+    .OptionValue {
+      font-size: 14px;
+      color: $secondaryTextColor;
+    }
+  
+    .OptionsHorContainer {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  
+    .OptionColorValue {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      margin-right: 4px;
+    }
+  }
+}

package/src/components/checkout/components/cart-summary/index.tsx

@@ -0,0 +1,458 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import _sortBy from "lodash/sortBy";
+
+import InputWithButton from "../input-with-button";
+import NotificationBox from "../notification-box";
+import CheckoutViewModel, { CheckoutStep } from "../../model";
+import { formatMoney, useTranslation } from "../../../../utils";
+import { CartItem } from "./cart-item";
+import { FormItem } from "../form-item";
+import { FormItemType } from "../form-item/model";
+import Tooltip from "../tooltip";
+import SVGArrowDown from "../svg/arrow-down";
+import SVGCross from "../svg/cross";
+import SVGGift from "../svg/gift";
+
+import styles from "./style.module.scss";
+import SVGIkas from "../svg/ikas";
+import { IkasStorefrontConfig } from "../../../../storefront";
+
+type Props = {
+  vm: CheckoutViewModel;
+  allowExpand?: boolean;
+};
+
+const INTEREST_ADJUSTMENT_NAME = "INTEREST";
+
+export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
+  const cart = vm.cart;
+  const checkout = vm.checkout;
+  const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(!allowExpand);
+  const [hasCouponError, setCouponError] = React.useState(false);
+  const [detailsHeight, setDetailsHeight] = React.useState<number>(0);
+  const [
+    detailsContainer,
+    setDetailsContainer,
+  ] = React.useState<HTMLDivElement | null>(null);
+  const [isAddingNote, setAddingNote] = React.useState(false);
+  const [isAddingCoupon, setAddingCoupon] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!allowExpand) return;
+    if (isExpanded) {
+      detailsContainer &&
+        setDetailsHeight(detailsContainer.getBoundingClientRect().height);
+    } else {
+      setDetailsHeight(0);
+    }
+  }, [
+    isExpanded,
+    detailsContainer,
+    allowExpand,
+    isAddingNote,
+    isAddingCoupon,
+    hasCouponError,
+  ]);
+
+  const cartSummaryClasses = [
+    styles.CartSummary,
+    isExpanded ? styles.Visible : "",
+    allowExpand ? styles.AllowExpand : "",
+  ].join(" ");
+
+  const detailsContainerStyle = allowExpand
+    ? {
+        height: detailsHeight + "px",
+      }
+    : {};
+
+  const arrowDownClasses = [
+    styles.ArrowDown,
+    isExpanded ? styles.Rotated : "",
+  ].join(" ");
+
+  if (!cart) return null;
+
+  return (
+    <div className={cartSummaryClasses}>
+      {!!allowExpand && (
+        <div
+          className={styles.ExpandHeader}
+          onClick={() => setExpanded(!isExpanded)}
+        >
+          <div className={styles.Left}>{t("checkout-page:summary")}</div>
+          <div className={styles.Price}>
+            <span className={styles.PriceText}>
+              {`${formatMoney(vm.finalPrice, cart.currencyCode)} (${
+                vm.cart?.items.length
+              } ${t("checkout-page:cartItemProduct")})`}
+            </span>
+            <span className={arrowDownClasses}>
+              <SVGArrowDown />
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className={styles.DetailsContainer} style={detailsContainerStyle}>
+        <div className={styles.Details} ref={setDetailsContainer}>
+          {cart?.items.map((item, index) => (
+            <div key={index}>
+              <CartItem
+                vm={vm}
+                cartItem={item}
+                currencyCode={cart.currencyCode}
+              />
+            </div>
+          ))}
+          <div className={styles.Divider} />
+          <div className={styles.SubTotalInfo}>
+            {hasCouponError && (
+              <div className={styles.NotificationContainer}>
+                <NotificationBox
+                  type="warning"
+                  title={t("checkout-page:giftCodeErrorTitle")}
+                  content={t("checkout-page:giftCodeErrorDescription")}
+                  onClose={() => setCouponError(false)}
+                />
+              </div>
+            )}
+            <InfoRow
+              label={t("checkout-page:subtotal")}
+              value={formatMoney(cart.totalPrice, cart.currencyCode)}
+              tooltipText={t("checkout-page:subtotalTooltip")}
+            />
+            {!!checkout.shippingLines?.length && (
+              <InfoRow
+                label={t("checkout-page:cartShippingTitle")}
+                value={
+                  checkout.shippingTotal
+                    ? formatMoney(checkout.shippingTotal, cart.currencyCode)
+                    : t("checkout-page:free")
+                }
+              />
+            )}
+            {!!vm.checkout.totalTax && (
+              <InfoRow
+                label={t("checkout-page:cartTaxTitle")}
+                value={formatMoney(vm.checkout.totalTax, cart.currencyCode)}
+              />
+            )}
+            {!!vm.installmentExtraPrice && (
+              <InfoRow
+                label={t("checkout-page:cartInterest")}
+                value={formatMoney(vm.installmentExtraPrice, cart.currencyCode)}
+              />
+            )}
+            <Adjustments vm={vm} />
+            <CalculatedAdditionalPrices vm={vm} />
+
+            {((vm.step === CheckoutStep.SUCCESS &&
+              (!!vm.checkout.note || !!vm.checkout.appliedCouponCode)) ||
+              vm.step !== CheckoutStep.SUCCESS) && (
+              <div
+                className={styles.Divider}
+                style={{ marginTop: "24px", marginBottom: "24px" }}
+              />
+            )}
+
+            <Coupon
+              vm={vm}
+              isAddingCoupon={isAddingCoupon}
+              setAddingCoupon={setAddingCoupon}
+              setCouponError={setCouponError}
+            />
+            <Note
+              vm={vm}
+              isAddingNote={isAddingNote}
+              setAddingNote={setAddingNote}
+            />
+          </div>
+
+          <div className={styles.TotalContainer}>
+            <div className={styles.TitleContainer}>
+              <div className={styles.Title}>{t("checkout-page:total")}</div>
+            </div>
+            <div className={styles.TotalPrice}>
+              {formatMoney(vm.finalPrice, cart.currencyCode)}
+            </div>
+          </div>
+
+          <div className={styles.PoweredBy}>
+            <span>powered by</span>
+            <a
+              href={
+                "https://ikas.com" +
+                (IkasStorefrontConfig.getCurrentLocale() === "tr" ? "/tr" : "")
+              }
+              target="_blank"
+            >
+              <SVGIkas />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+type CommonProps = {
+  vm: CheckoutViewModel;
+};
+
+type CouponProps = {
+  isAddingCoupon: boolean;
+  setAddingCoupon: (value: boolean) => void;
+  setCouponError: (value: boolean) => void;
+} & CommonProps;
+
+type NoteProps = {
+  isAddingNote: boolean;
+  setAddingNote: (value: boolean) => void;
+} & CommonProps;
+
+type InfoRowProps = {
+  label: string;
+  value: string;
+  tooltipText?: string;
+};
+
+const InfoRow: React.FC<InfoRowProps> = observer(
+  ({ label, value, tooltipText }) => {
+    return (
+      <div className={styles.InfoRow}>
+        <div className={styles.Label}>
+          <span>{label}</span>
+          {!!tooltipText && (
+            <Tooltip text={tooltipText} style={{ marginLeft: "8px" }} />
+          )}
+        </div>
+        <div className={styles.Value}>{value}</div>
+      </div>
+    );
+  }
+);
+
+const Adjustments: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  if (!vm.cart) return null;
+  return (
+    <React.Fragment>
+      {_sortBy(vm.checkout.nonCouponAdjustments || [], "order").map(
+        (adjustment, index) => (
+          <div className={styles.InfoRow} key={index}>
+            <div className={styles.Label}>
+              {adjustment.name === INTEREST_ADJUSTMENT_NAME
+                ? t("checkout-page:cartInterest")
+                : adjustment.name}
+            </div>
+            <div className={styles.Value}>
+              <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
+              <span>
+                {formatMoney(adjustment.amount, vm.cart!.currencyCode)}
+              </span>
+            </div>
+          </div>
+        )
+      )}
+    </React.Fragment>
+  );
+});
+
+const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  if (!vm.cart) return null;
+  return (
+    <React.Fragment>
+      {vm.step !== CheckoutStep.SUCCESS &&
+        (
+          vm.checkout.selectedPaymentGateway?.getCalculatedAdditionalPrices(
+            vm.checkout.totalFinalPrice || 0,
+            vm.checkout.shippingLines || null
+          ) || []
+        )
+          .filter((adjustment) => adjustment.amount !== 0)
+          .map((adjustment, index) => (
+            <div className={styles.InfoRow} key={index}>
+              <div className={styles.Label}>{adjustment.name}</div>
+              <div className={styles.Value}>
+                <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
+                <span>
+                  {formatMoney(adjustment.amount, vm.cart!.currencyCode)}
+                </span>
+              </div>
+            </div>
+          ))}
+      {vm.checkout.giftPackageLines?.map((gpl, index) => (
+        <div className={styles.InfoRow} key={index}>
+          <div className={styles.Label}>
+            <div className={styles.GiftLabel}>
+              <SVGGift style={{ position: "relative", top: "-1px" }} />
+              <span>{t("checkout-page:giftPackage")}</span>
+            </div>
+          </div>
+          <div className={styles.Value}>
+            <span>{formatMoney(gpl.price, vm.cart!.currencyCode)}</span>
+          </div>
+        </div>
+      ))}
+    </React.Fragment>
+  );
+});
+
+const Coupon: React.FC<CouponProps> = observer(
+  ({ vm, isAddingCoupon, setAddingCoupon, setCouponError }) => {
+    const { t } = useTranslation();
+    const [couponCode, setCouponCode] = React.useState("");
+    const [isLoadingCoupon, setLoadingCoupon] = React.useState(false);
+
+    const onCouponApply = async () => {
+      vm.checkout.couponCode = couponCode;
+      setLoadingCoupon(true);
+      await vm.onCouponCodeApply();
+      setLoadingCoupon(false);
+      setCouponCode("");
+
+      if (vm.checkout.appliedCouponCode) {
+        setAddingCoupon(false);
+        setCouponError(false);
+      } else {
+        setCouponError(true);
+      }
+    };
+
+    const onClearCouponCode = async () => {
+      vm.checkout.couponCode = null;
+      setLoadingCoupon(true);
+      await vm.onCouponCodeDelete();
+      setLoadingCoupon(false);
+    };
+
+    const isSuccess = vm.step === CheckoutStep.SUCCESS;
+
+    if (isSuccess && !vm.checkout.appliedCouponCode) return null;
+
+    const adjustment = vm.checkout.couponAdjustment;
+
+    return (
+      <div className={styles.InfoRow}>
+        {!vm.checkout.appliedCouponCode && !isAddingCoupon && (
+          <div
+            className={styles.ActionTextBtn}
+            onClick={() => setAddingCoupon(true)}
+          >
+            {t("checkout-page:addCouponCode")}
+          </div>
+        )}
+        {isAddingCoupon && (
+          <InputWithButton
+            value={couponCode}
+            placeholder={t("checkout-page:couponCode")}
+            buttonLabel={t("checkout-page:actions.apply")}
+            onClick={onCouponApply}
+            isLoading={isLoadingCoupon}
+            onChange={setCouponCode}
+          />
+        )}
+        {!!vm.checkout.appliedCouponCode && !isAddingCoupon && (
+          <div
+            className={[
+              styles.ActionTextBtn,
+              styles.NoUnderline,
+              styles.Light,
+            ].join(" ")}
+          >
+            {t("checkout-page:couponCode")}
+            <span className={styles.AppliedCoupon}>
+              <span className={styles.CouponCode}>
+                {vm.checkout.appliedCouponCode}
+              </span>
+              {vm.step !== CheckoutStep.SUCCESS && (
+                <span
+                  className={styles.ClearCoupon}
+                  onClick={onClearCouponCode}
+                >
+                  <SVGCross />
+                </span>
+              )}
+            </span>
+          </div>
+        )}
+
+        {!!vm.checkout.appliedCouponCode && !isAddingCoupon && (
+          <div className={styles.Value}>
+            <span>{adjustment?.type === "DECREMENT" ? "- " : ""}</span>{" "}
+            <span>
+              {formatMoney(adjustment?.amount || 0, vm.cart!.currencyCode)}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+const Note: React.FC<NoteProps> = observer(
+  ({ vm, isAddingNote, setAddingNote }) => {
+    const { t } = useTranslation();
+    const [ctaText] = React.useState(
+      vm.checkout.note
+        ? t("checkout-page:editOrderNote")
+        : t("checkout-page:addOrderNote")
+    );
+    const onEditClick = React.useCallback(() => {
+      setAddingNote(true);
+    }, []);
+
+    const onCheckoutNoteChange = React.useCallback(
+      (value: string) => {
+        vm.checkout.note = value;
+      },
+      [vm, vm.checkout]
+    );
+
+    if (!vm.checkoutSettings.showCheckoutNote) return null;
+
+    const isSuccessStep = vm.step === CheckoutStep.SUCCESS;
+
+    if (isSuccessStep && !vm.checkout.note) return null;
+
+    return (
+      <div className={styles.InfoRow}>
+        {!isAddingNote && !isSuccessStep && (
+          <div className={styles.ActionTextBtn} onClick={onEditClick}>
+            {ctaText}
+          </div>
+        )}
+        {(isAddingNote || isSuccessStep) && (
+          <div
+            className={[
+              styles.CheckoutNoteContainer,
+              isSuccessStep ? styles.Success : "",
+            ].join(" ")}
+          >
+            <div className={styles.Title}>{t("checkout-page:orderNote")}</div>
+            {isSuccessStep ? (
+              <div className={styles.CheckoutNoteDisplay}>
+                {vm.checkout.note}
+              </div>
+            ) : (
+              <FormItem
+                style={{ width: "100%" }}
+                type={FormItemType.TEXT_AREA}
+                disableResize={true}
+                label=""
+                value={vm.checkout.note || ""}
+                onChange={onCheckoutNoteChange}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);