@ikas/storefront 4.0.0-alpha.5 → 4.0.0-alpha.51

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

@@ -1,180 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import {
-  IkasOrderLineItem,
-  IkasProductOptionType,
-} from "../../../../../models";
-import { formatDate, formatMoney, useTranslation } from "../../../../../utils";
-import CheckoutViewModel from "../../../../../components/checkout/model";
-import { Modal } from "../../modal";
-
-import styles from "./style.module.scss";
-
-type Props = {
-  vm: CheckoutViewModel;
-  currencyCode: string;
-  cartItem: IkasOrderLineItem;
-};
-
-export const CartItem: React.FC<Props> = observer(
-  ({ vm, currencyCode, cartItem }) => {
-    const { t } = useTranslation();
-    const [isOptionsModalVisible, setOptionsModalVisible] =
-      React.useState(false);
-
-    const adjustmentAmounts = vm.checkout.orderAdjustments?.map(
-      (a) =>
-        a.appliedOrderLines
-          ?.filter((aol) => aol.orderLineId === cartItem.id)
-          .reduce((total, current) => total + (current.amount || 0), 0) || 0
-    );
-
-    const adjustmentTotal = adjustmentAmounts?.reduce(
-      (total, current) => total + current,
-      0
-    );
-
-    const formatDateTheme = (val: string) => {
-      const date = formatDate(new Date(val)).split(" ");
-      date.splice(-1);
-      return date.join(" ");
-    };
-
-    const fileName = (url: string) => {
-      return decodeURIComponent(url.split("/")[url.split("/").length - 1]);
-    };
-
-    const options = React.useMemo(() => {
-      return (
-        <div>
-          {cartItem.options?.map((option) => {
-            switch (option.type) {
-              case IkasProductOptionType.TEXT:
-              case IkasProductOptionType.TEXT_AREA:
-              case IkasProductOptionType.CHOICE:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionValue}>
-                      {option.values.map((v) => v.name || v.value).join(", ")}
-                    </div>
-                  </div>
-                );
-
-              case IkasProductOptionType.DATE_PICKER:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionValue}>
-                      {option.values
-                        .map((v) => formatDateTheme(v.value))
-                        .join(", ")}
-                    </div>
-                  </div>
-                );
-
-              case IkasProductOptionType.FILE:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionValue}>
-                      {option.values.map((v) => fileName(v.value)).join(", ")}
-                    </div>
-                  </div>
-                );
-
-              case IkasProductOptionType.CHECKBOX:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionValue}>
-                      {option.values.length && option.values[0].value === "true"
-                        ? t("checkout-page:yes")
-                        : t("checkout-page:no")}
-                    </div>
-                  </div>
-                );
-
-              case IkasProductOptionType.COLOR_PICKER:
-                return (
-                  <div className={styles.OptionRow}>
-                    <div className={styles.OptionName}>{option.name}</div>
-                    <div className={styles.OptionsHorContainer}>
-                      {option.values.map((v, index) => (
-                        <div
-                          key={index}
-                          className={styles.OptionColorValue}
-                          style={{ backgroundColor: v.value }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                );
-
-              default:
-                break;
-            }
-          })}
-        </div>
-      );
-    }, []);
-
-    return (
-      <div className={styles.CheckoutItem}>
-        <div className={styles.ImageContainer}>
-          <img
-            className={styles.Image}
-            src={cartItem.variant.mainImage?.thumbnailSrc}
-          />
-        </div>
-        <div className={styles.Right}>
-          <div className={styles.Name}>{cartItem.variant.name}</div>
-          <div className={styles.LightText}>
-            {`${t("checkout-page:quantity")}: ` + cartItem.quantity}
-          </div>
-          <div className={styles.LightText}>
-            {cartItem.variant.variantValues
-              ?.map((vv) => vv.variantValueName)
-              .join(" / ")}
-          </div>
-
-          {!!cartItem.options?.length && (
-            <div
-              className={styles.OptionsText}
-              onClick={() => setOptionsModalVisible(true)}
-            >
-              {t("checkout-page:customizedProduct")}
-            </div>
-          )}
-
-          {!!isOptionsModalVisible && (
-            <Modal
-              title={cartItem.variant.name}
-              modalContent={options}
-              onClose={() => setOptionsModalVisible(false)}
-            />
-          )}
-
-          <div className={styles.Price}>
-            {!!cartItem.overridenPriceWithQuantity && (
-              <span className={styles.GrayPrice}>
-                {!!adjustmentTotal
-                  ? formatMoney(cartItem.finalPriceWithQuantity, currencyCode)
-                  : formatMoney(
-                      cartItem.overridenPriceWithQuantity,
-                      currencyCode
-                    )}
-              </span>
-            )}
-            {!!adjustmentTotal
-              ? formatMoney(
-                  cartItem.finalPriceWithQuantity - adjustmentTotal,
-                  currencyCode
-                )
-              : formatMoney(cartItem.finalPriceWithQuantity, currencyCode)}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);

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

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