@ikas/storefront 4.0.0-alpha.6 → 4.0.0-alpha.60

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

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