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

package/src/components/CartTable/CartTable.mdx

@@ -0,0 +1,129 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+
+import CartTable from './';
+import data, {
+  discountVisible,
+  internetItems,
+  optionalItem,
+  deviceItem,
+  generateTotal,
+  largeItems,
+  router,
+} from './data';
+
+# CartTable
+
+## Example
+
+<Preview>
+  <CartTable items={data} />
+</Preview>
+
+## Usage
+
+### Editable
+
+Items in editable cart table are removable.
+
+<Preview>
+  <CartTable items={data} isEditable />
+</Preview>
+
+### Mandatory (non-removeable) items
+
+Some items should not have remove button because they are mandatory to complete the checkout.
+
+<Preview>
+  <CartTable items={internetItems} isEditable />
+</Preview>
+
+### Optional items
+
+Upsell good deals the customer gets with together with an existing cart item.
+
+<Preview>
+  <CartTable items={[...internetItems, optionalItem]} isEditable />
+</Preview>
+
+### Footer
+
+Label with/without tooltip can be added to single row footer.
+In case of footer with multiple rows with discounts, first row with upfront paynment can be hidden.
+
+<Preview>
+  <CartTable
+    items={data}
+    footer={{ name: 'Spolu', tooltip: 'Celková suma ktorú zaplatíte.' }}
+  />
+</Preview>
+
+### Monthly generated total
+
+Total is calculated automatically as sum of all items. In some cases, you might
+need to break down total prices into multiple rows by months. If you define
+`monthsFree` or `discount.monthsCount` in your data, cart table will use these
+to generate multiple rows with proper discounts calculated for different periods.
+
+<Preview>
+  <CartTable items={generateTotal} />
+</Preview>
+
+### Primary Discount
+
+When `price` is not defined and discount is, it takes place of price. Additionaly if `discount.monthsCount` is defined,
+description with duration of discount is displayed. And at last, when `price` and `discount` have the same value, free Label
+is shown.
+
+<Preview>
+  <CartTable items={discountVisible} />
+</Preview>
+
+### Hide first footer row
+
+If it's required we can hide first row of multiline footer.
+
+<Preview>
+  <CartTable items={discountVisible} footer={{ hideFirst: true }} />
+</Preview>
+
+### Simple pricing
+
+When the products sold do not require combined (upfront + monthly) payments, only relevant columns should be displayed.
+
+<Preview>
+  <CartTable
+    items={internetItems.map(({ price, ...other }) => ({
+      price: {
+        monthly: price.monthly,
+      },
+      ...other,
+    }))}
+  />
+</Preview>
+
+This default behaviour can be modified by removing of `.hide` class from hidden column.
+
+<Preview>
+  <CartTable
+    items={internetItems.map(({ price, ...other }) => ({
+      price: {
+        monthly: price.monthly,
+      },
+      ...other,
+    }))}
+    hideEmpty={false}
+  />
+</Preview>
+
+### Size
+
+Large cart table was designed for simple flat structure (no subitems), without icons/images, no edit buttons or optional items.
+
+<Preview>
+  <CartTable items={largeItems} size="large" />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<CartTable />" component={CartTable} />

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;