@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/components/CartTable/CartTable.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import React from "react";
+import cx from "classnames";
+
+import { capitalize } from "../../utils";
+import { Table } from "../Table";
+
+import generateRow from "./generateRow";
+import generateFooter from "./generateFooter";
+import type { Item } from "./generateTotal";
+import type { Footer, Labels } from "./generateFooter";
+
+const CLASS_ROOT = "cart-table";
+
+export interface CartTableProps {
+  footer?: Footer;
+  hideEmpty?: boolean;
+  isEditable?: boolean;
+  items: Item[];
+  labels?: Labels;
+  size?: "large";
+}
+
+const defaultLabels: Labels = {
+  monthly: "mesačne",
+  upfront: "vopred",
+  product: "produkt",
+  remove: "odstrániť",
+  add: "Pridať",
+  install: "inštalácia",
+  free: "zadarmo",
+};
+
+const CartTable: React.FC<CartTableProps> = ({
+  items = [],
+  hideEmpty = true,
+  isEditable = false,
+  footer,
+  labels = defaultLabels,
+  size,
+}) => {
+  const hideClass = hideEmpty ? [" hide", " hide"] : ["", ""];
+
+  if (hideEmpty) {
+    items.forEach(({ price = {}, discount = {} }) => {
+      if (price.upfront !== undefined || discount.upfront !== undefined) {
+        hideClass[0] = "";
+      }
+      if (price.monthly !== undefined || discount.monthly !== undefined) {
+        hideClass[1] = "";
+      }
+    });
+  }
+
+  return (
+    <Table
+      className={cx(CLASS_ROOT, {
+        [`${CLASS_ROOT}--large`]: size,
+      })}
+      headers={[
+        {
+          key: "col1",
+          cellProps: {
+            className: "cart-table__product",
+          },
+          label: capitalize(labels.product),
+        },
+        {
+          cellProps: {
+            className: `align-right ${CLASS_ROOT}__price${hideClass[0]}`,
+          },
+          key: "col2",
+          label: capitalize(labels.upfront),
+        },
+        {
+          cellProps: {
+            className: `align-right ${CLASS_ROOT}__price${hideClass[1]}`,
+          },
+          key: "col3",
+          label: capitalize(labels.monthly),
+        },
+        ...(isEditable
+          ? [
+              {
+                cellProps: {
+                  className: "align-right",
+                },
+                key: "col4",
+                label: "",
+              },
+            ]
+          : []),
+      ]}
+      rows={items.map((row) => ({
+        ...generateRow(row, isEditable, labels),
+      }))}
+      footers={generateFooter(
+        items,
+        "true",
+        footer ?? {},
+        labels,
+        size === "large" ? "large" : (undefined as never),
+      )}
+    ></Table>
+  );
+};
+
+CartTable.displayName = "CartTable";
+
+export { CartTable };

package/src/components/CartTable/FooterNameColumn.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { InfoTooltip } from "../Tooltip/InfoTooltip";
+
+export interface FooterNameColumnProps {
+  name?: string;
+  tooltip?: React.ReactNode;
+}
+
+const FooterNameColumn: React.FC<FooterNameColumnProps> = ({
+  name,
+  tooltip,
+}) => {
+  if (typeof name === "undefined") {
+    return null;
+  }
+
+  return (
+    <>
+      <span className="bold">{name}</span>
+      {tooltip && (
+        <>
+          &nbsp;
+          <InfoTooltip className="icon--small">{tooltip}</InfoTooltip>
+        </>
+      )}
+    </>
+  );
+};
+
+FooterNameColumn.displayName = "FooterNameColumn";
+
+export default FooterNameColumn;

package/src/components/CartTable/FooterPriceColumn.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import cx from "classnames";
+
+import { formatPrice } from "../../utils/helpers";
+
+export interface FooterPriceColumnProps {
+  discount?: number;
+  label: string;
+  price?: number;
+  size?: "large";
+}
+
+const FooterPriceColumn: React.FC<FooterPriceColumnProps> = ({
+  price,
+  discount = 0,
+  label,
+  size,
+}) => {
+  if (typeof price === "undefined") {
+    return null;
+  }
+
+  return (
+    <>
+      {discount > 0 && <del className="color-gray">{formatPrice(price)}</del>}
+      <div>
+        <div
+          className={cx("color-orange mb-none", {
+            h4: size !== "large",
+            h2: size === "large",
+          })}
+        >
+          {formatPrice(price - discount)}
+        </div>
+        <span
+          className={cx("color-orange mb-none", {
+            h6: size !== "large",
+            h3: size === "large",
+          })}
+        >
+          {label}
+        </span>
+      </div>
+    </>
+  );
+};
+
+FooterPriceColumn.displayName = "FooterPriceColumn";
+
+export default FooterPriceColumn;

package/src/components/CartTable/Price.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Bar, BarItem } from "../Bar";
+import { formatPrice } from "../../utils/helpers";
+
+export interface PriceProps {
+  price?: number;
+  discount?: number;
+  freeLabel?: string;
+  label?: string;
+  discountMonthsCount?: number;
+}
+
+const Price: React.FC<PriceProps> = ({
+  price,
+  discount,
+  freeLabel,
+  label,
+  discountMonthsCount,
+}) => {
+  const isDiscountPrimary = !price && !!discount;
+  return price !== undefined || discount !== undefined ? (
+    <>
+      {discount && price && (
+        <>
+          <del className="color-gray">{formatPrice(price)}</del>
+          <br />
+        </>
+      )}
+      <Bar className="bold justify-content-end mb-none">
+        <BarItem className={"hide-sm"}>
+          {discountMonthsCount && isDiscountPrimary
+            ? `1. – ${discountMonthsCount}. mesiac`
+            : label}
+        </BarItem>
+
+        <BarItem>
+          {isDiscountPrimary
+            ? formatPrice(-discount!)
+            : price! - (discount ?? 0) === 0
+              ? freeLabel
+              : formatPrice(price! - (discount ?? 0))}
+        </BarItem>
+      </Bar>
+    </>
+  ) : null;
+};
+
+export default Price;

package/src/components/CartTable/data.ts

@@ -0,0 +1,147 @@
+// Type definitions
+export interface Price {
+  monthly?: number;
+  upfront?: number;
+}
+
+export interface Discount {
+  monthly?: number;
+  upfront?: number;
+  monthsCount?: number;
+}
+
+export interface Item {
+  type: string;
+  name: string;
+  icon?: string;
+  image?: string;
+  price?: Price;
+  isSubitem?: boolean;
+  isOptional?: boolean;
+  isMandatory?: boolean;
+  discount?: Discount;
+  monthsFree?: number;
+  tooltip?: string;
+  badge?: string;
+}
+
+const items: Item[] = [
+  {
+    type: "Paušál",
+    name: "Go Data 10",
+    icon: "orange-cash",
+    price: {
+      monthly: 10,
+    },
+  },
+  {
+    type: "Paušál",
+    name: "Go 20",
+    icon: "collective-class-training",
+    price: {
+      monthly: 20,
+    },
+  },
+  {
+    type: "Zariadenie",
+    name: "Motorola Moto G8 Plus blue",
+    image: "/images/device-mobile.png",
+    price: {
+      upfront: 10,
+    },
+    isSubitem: true,
+  },
+];
+
+const largeItems: Item[] = [
+  {
+    type: "Paušál",
+    name: "Go Data 10",
+    price: {
+      monthly: 10,
+    },
+  },
+  {
+    type: "Paušál",
+    name: "Go 20",
+    price: {
+      monthly: 20,
+    },
+  },
+  {
+    type: "Zariadenie",
+    name: "Motorola Moto G8 Plus blue",
+    price: {
+      upfront: 10,
+      monthly: 15,
+    },
+  },
+];
+
+const optionalItem: Item = {
+  type: "",
+  name: "Vyberte si zariadenie s bonusom až 170 €",
+  icon: "device-smart-phone",
+  isSubitem: true,
+  isOptional: true,
+};
+
+const deviceItem: Item = {
+  type: "Zariadenie",
+  name: "Set top box",
+  isSubitem: true,
+  price: {
+    monthly: 2,
+  },
+  discount: {
+    monthly: 2,
+  },
+  tooltip:
+    "Set-top-box umožnuje sledovanie Orange Tv na vašom televízore. Pre každý televízor potrebujete samostatný Set-top box. So zapojením vám pomôže pri zriadení novej služby náš inštalačný technik.",
+};
+
+const discount: Item = {
+  type: "Zľava",
+  badge: "Zľava",
+  name: "Extra zľava na mesačný poplatok za internetovú službu",
+  icon: "money-box",
+  discount: { monthly: 3.5, monthsCount: 20 },
+};
+
+const internet: Item = {
+  type: "Optický internet",
+  name: "Home Optimal Fiber",
+  icon: "device-laptop-computer-connected",
+  isMandatory: true,
+  price: {
+    upfront: 19.9,
+    monthly: 15,
+  },
+};
+
+const router: Item = {
+  type: "Zariadenie",
+  name: "Optický konvertor",
+  tooltip:
+    "Optický konvertor a Wi-fi router je zariadenie 2v1 a pripojí váš domov do optickej siete Orange.",
+  price: {
+    upfront: 0,
+    monthly: 1,
+  },
+};
+
+const internetItems: Item[] = [internet, router];
+
+export const discountVisible: Item[] = [
+  internet,
+  { ...deviceItem, discount: { upfront: 5, monthly: 2 } },
+  discount,
+];
+
+export const generateTotal: Item[] = [
+  { ...internet, discount: { monthly: 5, monthsCount: 10 }, monthsFree: 3 },
+  router,
+];
+
+export default items;
+export { optionalItem, deviceItem, internetItems, router, largeItems };

package/src/components/CartTable/generateFooter.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React from "react";
+
+import NameColumn from "./FooterNameColumn";
+import PriceColumn from "./FooterPriceColumn";
+import generateTotal from "./generateTotal";
+import type { Item, FormattedPeriod } from "./generateTotal";
+
+export interface Footer {
+  name?: string;
+  tooltip?: string;
+  hideFirst?: boolean;
+}
+
+export interface Labels {
+  [key: string]: string;
+  remove: string;
+  add: string;
+  free: string;
+  upfront: string;
+  monthly: string;
+}
+
+export type FooterRow = {
+  col1: React.ReactNode;
+  col2: React.ReactNode;
+  col3: React.ReactNode;
+};
+
+function calculateTotal(items: Item[], type: "monthly" | "upfront"): number {
+  return items.reduce((total, item) => {
+    total += item?.price?.[type] ?? 0;
+    total -= item?.discount?.[type] ?? 0;
+    return total;
+  }, 0);
+}
+
+const generateFooter = (
+  items: Item[],
+  hide: string,
+  footer: Footer,
+  labels: Labels,
+  size: "large",
+): FooterRow[] => {
+  const hasLimitedDiscounts = items.find(
+    (item) => item?.monthsFree || item?.discount?.monthsCount,
+  );
+  if (hasLimitedDiscounts) {
+    const total = generateTotal(items, footer?.hideFirst) as FormattedPeriod[];
+    return total.map(({ name, price, discount }) => ({
+      col1: <NameColumn name={name} tooltip={footer?.tooltip} />,
+      col2: price &&
+        price.upfront !== undefined &&
+        price.upfront > 0 &&
+        hide !== "upfront" && (
+          <PriceColumn
+            price={price.upfront}
+            discount={discount && discount.upfront}
+            label={labels["upfront"]}
+            size={size}
+          />
+        ),
+      col3: (
+        <PriceColumn
+          price={price.monthly}
+          discount={discount && discount.monthly}
+          label={labels["monthly"]}
+          size={size}
+        />
+      ),
+    }));
+  }
+  return [
+    {
+      col1: footer?.name && (
+        <NameColumn name={footer.name} tooltip={footer.tooltip} />
+      ),
+      col2: hide !== "upfront" && (
+        <PriceColumn
+          price={calculateTotal(items, "upfront")}
+          label={labels["upfront"]}
+          size={size}
+        />
+      ),
+      col3: (
+        <PriceColumn
+          price={calculateTotal(items, "monthly")}
+          label={labels["monthly"]}
+          size={size}
+        />
+      ),
+    },
+  ];
+};
+
+export default generateFooter;

package/src/components/CartTable/generateRow.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import cx from "classnames";
+
+import { Bar, BarItem } from "../Bar";
+import { Image } from "../Image";
+import { InfoTooltip } from "../Tooltip/InfoTooltip";
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { Icon } from "../Icon";
+import { IconButton } from "../Button";
+import { Tag } from "../Tag";
+
+import Price from "./Price";
+import type { Item } from "./generateTotal";
+
+export interface Labels {
+  [key: string]: string;
+  remove: string;
+  add: string;
+  free: string;
+  upfront: string;
+  monthly: string;
+}
+
+export interface Row extends Item {
+  description?: string | string[];
+}
+
+interface RowResult {
+  col1: React.ReactNode;
+  col2: React.ReactNode;
+  col3: React.ReactNode;
+  col4?: React.ReactNode;
+}
+
+const generateRow = (
+  row: Row,
+  isEditable: boolean,
+  labels: Labels,
+): RowResult => {
+  const {
+    isSubitem,
+    image,
+    badge,
+    // type,
+    name,
+    tooltip,
+    price,
+    discount,
+    description,
+    icon,
+    isMandatory,
+    isOptional,
+  } = row;
+
+  return {
+    col1: (
+      <>
+        <Bar
+          canWrap={false}
+          className={cx("mb-none ", {
+            "cart-table__subitem": isSubitem,
+          })}
+        >
+          {isSubitem && (
+            <BarItem>
+              <Icon name="add" size="medium" />
+            </BarItem>
+          )}
+          {icon && (
+            <BarItem>
+              <Icon name={icon} size="medium" />
+            </BarItem>
+          )}
+          {image && (
+            <BarItem>
+              <Image src={image} alt="" width="24" />
+            </BarItem>
+          )}
+          <BarItem isFilling>
+            {badge && <Tag color="warning">{badge}</Tag>}
+            {/* <span className="reset-font-size">{type}</span> */}
+            <Bar space="small">
+              <BarItem
+                canShrink
+                className={cx("bold", { "text-nowrap": tooltip })}
+              >
+                <ConditionalWrapper
+                  condition={!!tooltip}
+                  wrapper={<span className={`text-wrap`}>{name}</span>}
+                >
+                  {name}
+                </ConditionalWrapper>
+                {tooltip && "\xa0"}
+                {tooltip && (
+                  <InfoTooltip className="icon--small" placement="right">
+                    {tooltip}
+                  </InfoTooltip>
+                )}
+              </BarItem>
+            </Bar>
+            {description && (
+              <div>
+                {typeof description === "string"
+                  ? description
+                  : description.map((text) => (
+                      <p key={text} className="mb-0">
+                        {text}
+                      </p>
+                    ))}
+              </div>
+            )}
+          </BarItem>
+          {isEditable && !isMandatory && !isOptional ? (
+            <BarItem className={"hide-sm"}>
+              <IconButton
+                iconName="trash"
+                isSquare
+                size="small"
+                aria-label={labels["remove"]}
+              ></IconButton>
+            </BarItem>
+          ) : null}
+          {isOptional && (
+            <BarItem className={"hide-sm"}>
+              <IconButton
+                iconName="add"
+                isSquare
+                size="small"
+                aria-label={labels["add"]}
+              ></IconButton>
+            </BarItem>
+          )}
+        </Bar>
+        {!price?.monthly && discount?.monthsCount && (
+          <div>
+            <p
+              className={cx(
+                "mb-none show-sm cart-table__discount--margin-top",
+                {
+                  "cart-table__subitem": isSubitem,
+                  "cart-table__discount--padding-left":
+                    image || icon || isSubitem,
+                },
+              )}
+            >
+              {`1. – ${discount.monthsCount}. mesiac`}
+            </p>
+          </div>
+        )}
+      </>
+    ),
+    col2: (
+      <Price
+        discount={discount?.["upfront"]}
+        freeLabel={labels["free"]}
+        label={labels["upfront"]}
+        price={price?.["upfront"]}
+      />
+    ),
+    col3: (
+      <Price
+        discount={discount?.["monthly"]}
+        discountMonthsCount={discount?.["monthsCount"]}
+        freeLabel={labels["free"]}
+        label={labels["monthly"]}
+        price={price?.["monthly"]}
+      />
+    ),
+    ...(isEditable &&
+      !isMandatory &&
+      !isOptional && {
+        col4: (
+          <IconButton
+            iconName="trash"
+            size="small"
+            className="cart-table__button mb-none"
+          >
+            <span className="show-md">{labels["remove"]}</span>
+          </IconButton>
+        ),
+      }),
+    ...(isOptional && {
+      col4: (
+        <IconButton
+          iconName="add"
+          size="small"
+          className="cart-table__button mb-none"
+        >
+          <span className="show-md">{labels["add"]}</span>
+        </IconButton>
+      ),
+    }),
+  };
+};
+
+export default generateRow;