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

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

@@ -0,0 +1,481 @@
+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 "@ikas/storefront-config";
+
+type Props = {
+  vm: CheckoutViewModel;
+  allowExpand?: boolean;
+};
+
+const INTEREST_ADJUSTMENT_NAME = "INTEREST";
+
+export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
+  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 onExpandClick = () => {
+    if (!isExpanded) {
+      const checkoutElement = document.getElementById("Checkout");
+      const checkoutMobileSummaryHeaderElement = document.getElementById(
+        "checkout-mobile-summary-header"
+      );
+      if (checkoutElement && checkoutMobileSummaryHeaderElement) {
+        checkoutElement.scrollTo({
+          top: checkoutMobileSummaryHeaderElement.offsetTop,
+          behavior: "smooth",
+        });
+      }
+    }
+    setExpanded(!isExpanded);
+  };
+
+  const cartSummaryClasses = [
+    styles.CartSummary,
+    allowExpand ? styles.HideOnDesktop : "",
+  ].join(" ");
+
+  const detailsContainerStyle = allowExpand
+    ? { height: detailsHeight + "px" }
+    : undefined;
+
+  const arrowDownClasses = [
+    styles.ArrowDown,
+    isExpanded ? styles.Rotated : "",
+  ].join(" ");
+
+  if (!checkout) return null;
+
+  return (
+    <>
+      {!!allowExpand && (
+        <>
+          {/* FOR SCROLL TO TOP ANIMATION STICKY PROBLEM FIX */}
+          <div id="checkout-mobile-summary-header" />
+          <div className={styles.ExpandHeader} onClick={onExpandClick}>
+            <div className={styles.Left}>{t("checkout-page:summary")}</div>
+            <div className={styles.Price}>
+              <span className={styles.PriceText}>
+                {`${formatMoney(vm.finalPrice || 0, checkout.currencyCode)} (${
+                  checkout.items.length
+                } ${t("checkout-page:cartItemProduct")})`}
+              </span>
+              <span className={arrowDownClasses}>
+                <SVGArrowDown />
+              </span>
+            </div>
+          </div>
+        </>
+      )}
+      <div className={cartSummaryClasses}>
+        <div className={styles.DetailsContainer} style={detailsContainerStyle}>
+          <div className={styles.Details} ref={setDetailsContainer}>
+            {checkout.items.map((item, index) => (
+              <div key={index}>
+                <CartItem
+                  vm={vm}
+                  cartItem={item}
+                  currencyCode={checkout.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(checkout.totalPrice, checkout.currencyCode)}
+                tooltipText={t("checkout-page:subtotalTooltip")}
+              />
+              {!!checkout.shippingLines?.length && (
+                <InfoRow
+                  label={t("checkout-page:cartShippingTitle")}
+                  value={
+                    checkout.shippingTotal
+                      ? formatMoney(
+                          checkout.shippingTotal,
+                          checkout.currencyCode
+                        )
+                      : t("checkout-page:free")
+                  }
+                />
+              )}
+              {!!checkout.totalTax && !!vm.customizationProps?.showTax && (
+                <InfoRow
+                  label={t("checkout-page:cartTaxTitle")}
+                  value={formatMoney(checkout.totalTax, checkout.currencyCode)}
+                />
+              )}
+              {!!vm.installmentExtraPrice && (
+                <InfoRow
+                  label={t("checkout-page:cartInterest")}
+                  value={formatMoney(
+                    vm.installmentExtraPrice,
+                    checkout.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 || 0, checkout.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.checkout) 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.checkout.currencyCode)}
+              </span>
+            </div>
+          </div>
+        )
+      )}
+    </React.Fragment>
+  );
+});
+
+const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  if (!vm.checkout) 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.checkout!.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.checkout.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);
+        vm.checkout.couponCode = null;
+      }
+    };
+
+    const onClearCouponCode = async () => {
+      vm.checkout.couponCode = null;
+      setLoadingCoupon(true);
+      await vm.onCouponCodeApply();
+      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.checkout.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>
+    );
+  }
+);