@ikas/storefront 4.0.0-alpha.50 → 4.0.0-alpha.52

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

@@ -1,144 +0,0 @@
-@import "../../../styles/variables.scss";
-
-.CheckoutItem {
-  display: flex;
-  width: 100%;
-  margin-bottom: 24px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  .ImageContainer {
-    flex: 0 0 auto;
-    width: 72px;
-    position: relative;
-    margin-right: 16px;
-    overflow: visible;
-
-    @media only screen and (max-width: 375px) {
-      width: 56px;
-    }
-
-    .Image {
-      width: 100%;
-      object-fit: contain;
-      border-radius: 8px;
-    }
-
-    .QuantityCircle { 
-      width: 20px;
-      height: 20px;
-      border-radius: 10px;
-      background-color: $buttonBgColor;
-      color: $buttonTextColor;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 12px;
-      font-weight: 500;
-      position: absolute;
-      top: -10px;
-      right: -10px;
-    }
-  }
-
-  .Center {
-    position: relative;
-    flex: 1 1 auto;
-
-    .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;
-    }
-
-    
-
-    .OptionsText {
-      font-size: 14px;
-      color: $primaryTextColor;
-      line-height: 20px;
-      margin-top: 2px;
-      user-select: none;
-
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .Right {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    .Price {
-      font-size: 14px;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      color: $primaryTextColor;
-    }
-
-    .GrayPrice {
-      font-size: 14px;
-      color: $secondaryTextColor;
-      text-decoration: line-through;
-      // margin-right: 8px;
-    }
-  }
-
-  .LightText {
-    font-size: 14px;
-    color: $secondaryTextColor;
-    line-height: 20px;
-    margin-top: 2px;
-
-    &.Small {
-      font-size: 12px;
-    }
-  }
-
-  .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

@@ -1,512 +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 { formatCurrency, 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}>
-                {`${formatCurrency(
-                  vm.finalPrice || 0,
-                  checkout.currencyCode,
-                  checkout.currencySymbol
-                )} (${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}>
-            <div className={styles.ItemsContainer}>
-              {checkout.items.map((item, index) => (
-                <CartItem
-                  key={index}
-                  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={checkout.formattedTotalPrice}
-                tooltipText={t("checkout-page:subtotalTooltip")}
-              />
-              {!!checkout.shippingLines?.length && (
-                <InfoRow
-                  label={t("checkout-page:cartShippingTitle")}
-                  value={
-                    checkout.shippingTotal
-                      ? checkout.formattedShippingTotal
-                      : t("checkout-page:free")
-                  }
-                />
-              )}
-
-              {!!vm.installmentExtraPrice && (
-                <InfoRow
-                  label={t("checkout-page:cartInterest")}
-                  value={formatCurrency(
-                    vm.installmentExtraPrice,
-                    checkout.currencyCode,
-                    checkout.currencySymbol
-                  )}
-                />
-              )}
-              <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>
-                <div className={styles.TotalPricesContainer}>
-                  <div className={styles.TotalPrice}>
-                    {formatCurrency(
-                      vm.finalPrice || 0,
-                      checkout.currencyCode,
-                      checkout.currencySymbol
-                    )}
-                  </div>
-                  {!!checkout.$totalTax && !!vm.customizationProps?.showTax && (
-                    <div className={[styles.TotalTax].join(" ")}>
-                      {t("checkout-page:cartTaxTitle") +
-                        " " +
-                        checkout.$formattedTotalTax}
-                    </div>
-                  )}
-                </div>
-              </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>
-                {formatCurrency(
-                  adjustment.amount,
-                  vm.checkout.currencyCode,
-                  vm.checkout.currencySymbol
-                )}
-              </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>
-                  {formatCurrency(
-                    adjustment.amount,
-                    vm.checkout!.currencyCode,
-                    vm.checkout!.currencySymbol
-                  )}
-                </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>
-              {formatCurrency(
-                gpl.price,
-                vm.checkout.currencyCode,
-                vm.checkout!.currencySymbol
-              )}
-            </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>
-              {formatCurrency(
-                adjustment?.amount || 0,
-                vm.checkout.currencyCode,
-                vm.checkout.currencySymbol
-              )}
-            </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>
-    );
-  }
-);