@dmsi/wedgekit-react 0.0.87 → 0.0.88

package/dist/components/index.js

@@ -3,7 +3,20 @@ import {
 } from "../chunk-QZGUMB7T.js";
 import {
   Select
-} from "../chunk-2BVSUYXU.js";
+} from "../chunk-Y4HUYAI5.js";
+import {
+  PaymentOnAccountModal
+} from "../chunk-RHADESKO.js";
+import "../chunk-SASEP5UE.js";
+import "../chunk-TTO4PL7Y.js";
+import "../chunk-QIHDPSOM.js";
+import "../chunk-4RJKB7LC.js";
+import "../chunk-6CS5ZBXO.js";
+import "../chunk-FWPJ73IK.js";
+import "../chunk-3JRVV6QY.js";
+import "../chunk-4JLU7TAC.js";
+import "../chunk-J6LETUNM.js";
+import "../chunk-5OHGKW4U.js";
 import {
   Checkbox
 } from "../chunk-WT5XXW6G.js";
@@ -12,37 +25,45 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-CKSDMI2Q.js";
+} from "../chunk-LYVH4YFE.js";
 import {
   Menu
 } from "../chunk-37TJJQL3.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "../chunk-UPBBOZM3.js";
+} from "../chunk-VH3EJNVE.js";
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";
+import "../chunk-4T7F5BZZ.js";
 import {
   Search
-} from "../chunk-LP6AZST2.js";
-import {
-  Paragraph
-} from "../chunk-VG4EPHJA.js";
-import "../chunk-WVUIIBRR.js";
-import "../chunk-4T7F5BZZ.js";
+} from "../chunk-OB3URVCR.js";
 import {
   Input
-} from "../chunk-724LJWFR.js";
+} from "../chunk-R5TLUWDD.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
 } from "../chunk-S5K22XTH.js";
+import "../chunk-WVUIIBRR.js";
 import {
   Subheader
 } from "../chunk-O4M2GISS.js";
+import {
+  Accordion
+} from "../chunk-QDFQ3B4N.js";
+import "../chunk-EO3JJWFW.js";
+import {
+  Card
+} from "../chunk-JOMM4KBH.js";
+import {
+  Paragraph
+} from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-MZJS2ZAU.js";
+} from "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -1043,7 +1064,9 @@ function adaptTableStateSetter(setter) {
   };
 }
 export {
+  Accordion,
   Button,
+  Card,
   Checkbox,
   DataCellHeader,
   DataGrid,
@@ -1056,6 +1079,7 @@ export {
   Menu,
   MenuOption,
   Paragraph,
+  PaymentOnAccountModal,
   Search,
   Select,
   Subheader,

package/dist/index.css

@@ -899,6 +899,9 @@
     --tw-translate-y: calc(2/4 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .rotate-0 {
+    rotate: 0deg;
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -1016,6 +1019,9 @@
   .gap-desktop-component-gap {
     gap: var(--spacing-desktop-component-gap);
   }
+  .gap-desktop-layout-gap {
+    gap: var(--spacing-desktop-layout-gap);
+  }
   .gap-desktop-layout-padding {
     gap: var(--spacing-desktop-layout-padding);
   }
@@ -1227,6 +1233,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .\!border-border-primary-focus {
+    border-color: var(--color-border-primary-focus) !important;
+  }
   .border-action-400 {
     border-color: var(--color-action-400);
   }
@@ -1374,6 +1383,12 @@
   .bg-background-secondary-normal {
     background-color: var(--color-background-secondary-normal);
   }
+  .bg-background-secondary-normal\/20 {
+    background-color: color-mix(in srgb, #c1c1c1 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background-secondary-normal) 20%, transparent);
+    }
+  }
   .bg-background-success-normal {
     background-color: var(--color-background-success-normal);
   }
@@ -1785,6 +1800,9 @@
   .p-\[calc\(var\(--spacing-mobile-component-padding\)_-_2px\)\] {
     padding: calc(var(--spacing-mobile-component-padding) - 2px);
   }
+  .p-desktop-layout-padding {
+    padding: var(--spacing-desktop-layout-padding);
+  }
   .p-mobile-component-gap {
     padding: var(--spacing-mobile-component-gap);
   }
@@ -1854,6 +1872,12 @@
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
+  .py-desktop-compact-layout-padding {
+    padding-block: var(--spacing-desktop-compact-layout-padding);
+  }
+  .py-desktop-component-padding {
+    padding-block: var(--spacing-desktop-component-padding);
+  }
   .py-mobile-component-gap {
     padding-block: var(--spacing-mobile-component-gap);
   }
@@ -1872,6 +1896,9 @@
   .pt-\[7px\] {
     padding-top: 7px;
   }
+  .pr-desktop-component-padding {
+    padding-right: var(--spacing-desktop-component-padding);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2841,6 +2868,16 @@
       }
     }
   }
+  .hover\:bg-background-secondary-normal\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #c1c1c1 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-background-secondary-normal) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-border-action-hover {
     &:hover {
       @media (hover: hover) {
@@ -4016,6 +4053,11 @@
       padding-block: var(--spacing-desktop-layout-padding);
     }
   }
+  .desktop\:pt-desktop-layout-gap {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-layout-gap);
+    }
+  }
   .desktop\:pb-desktop-component-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-component-padding);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.87",
+  "version": "0.0.88",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Accordion.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import clsx from "clsx";
+import { typography } from "../classNames";
+import { Card } from "./Card";
+import { Icon } from "./Icon";
+import { Stack } from "./Stack";
+import { Paragraph } from "./Paragraph";
+
+interface AccordionProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  isOpen: boolean;
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function Accordion(props: AccordionProps) {
+  const { isOpen, onClick, className } = props;
+  const {
+    title,
+    before,
+    after = (
+      <Icon
+        name="expand_more"
+        className={clsx(
+          "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
+          isOpen ? "rotate-180" : "rotate-0",
+        )}
+      />
+    ),
+    children,
+  } = props;
+
+  function handleClick(e: React.MouseEvent<HTMLDivElement>) {
+    e.stopPropagation();
+    e.preventDefault();
+    onClick?.();
+  }
+
+  return (
+    <Card
+      className={clsx(
+        "overflow-hidden select-none cursor-pointer",
+        className,
+        isOpen && "border-2 !border-border-primary-focus",
+      )}
+      onClick={handleClick}
+    >
+      <Stack sizing="component" horizontal justify="between" items="center">
+        <Stack sizing="layout-group" horizontal items="center">
+          {before}
+          {typeof title === "string" ? (
+            <Paragraph className="text-text-primary-normal">{title}</Paragraph>
+          ) : (
+            title
+          )}
+        </Stack>
+        {after}
+      </Stack>
+      <div
+        className={clsx("grid transition-all duration-300 ease-in-out")}
+        style={{
+          gridTemplateRows: isOpen ? "1fr" : "0fr",
+        }}
+      >
+        <div className="overflow-hidden">
+          <div
+            className={clsx(
+              typography.paragraph,
+              "text-text-primary-normal desktop:pt-desktop-layout-gap",
+              "flex flex-col gap-desktop-layout-gap",
+            )}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/Button.tsx

@@ -187,7 +187,7 @@ export const Button = ({
     typography.buttonLabel,
   );
 
-  const Element = href ? "a" : as;
+  const Element = href && !as ? "a" : as;
 
   return (
     <Element
@@ -195,6 +195,7 @@ export const Button = ({
       type={Element === "button" ? "button" : undefined}
       className={buttonClasses}
       {...props}
+      onClick={props.onClick}
       disabled={disabled}
       href={href}
     >

package/src/components/Card.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+
+export function Card(props: HTMLProps<HTMLDivElement>) {
+  const { children, ...rest } = props;
+  return (
+    <div
+      {...rest}
+      className={clsx(
+        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        rest.className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/PaymentOnAccountModal.tsx

@@ -0,0 +1,52 @@
+import { Modal } from "./Modal";
+import { Stack } from "./Stack";
+import { Paragraph } from "./Paragraph";
+import { Input } from "./Input";
+import { Card } from "./Card";
+import { useEffect, useState } from "react";
+import {
+  SelectPaymentMethod,
+  SelectPaymentMethodProps,
+} from "./SelectPaymentMethod";
+
+type PaymentOnAccountModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  paymentProps: SelectPaymentMethodProps;
+};
+export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
+  const { isOpen, paymentProps, onClose } = props;
+  const [amount, setAmount] = useState<number>(paymentProps.amountToPay);
+
+  useEffect(() => {
+    setAmount(paymentProps.amountToPay);
+  }, [paymentProps.amountToPay]);
+
+  function handleAmountChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value.replace(/[^0-9.-]+/g, "");
+    setAmount(+value || 0);
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose} title="Payment on Account">
+      <Stack sizing="layout-group" width="full">
+        <Card className="py-desktop-component-padding">
+          <Stack sizing="component" justify="between" items="center" horizontal>
+            <Paragraph className="w-full">Amount to Pay</Paragraph>
+            <div>
+              <Input
+                type="number"
+                placeholder="$0.00"
+                align="right"
+                value={amount === 0 ? "" : amount}
+                onChange={handleAmountChange}
+                before={"$"}
+              />
+            </div>
+          </Stack>
+        </Card>
+        <SelectPaymentMethod {...paymentProps} />
+      </Stack>
+    </Modal>
+  );
+}

package/src/components/SelectPaymentMethod.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Accordion } from "./Accordion";
+import { Button } from "./Button";
+import { Card } from "./Card";
+import { Icon } from "./Icon";
+import { Paragraph } from "./Paragraph";
+import { Radio } from "./Radio";
+import { Stack } from "./Stack";
+import clsx from "clsx";
+import { Checkbox } from "./Checkbox";
+import { Subheader } from "./Subheader";
+import { formatCurrencyDisplay } from "../utils/formatting";
+import { HorizontalDivider } from "./HorizontalDivider";
+
+export type PaymentMethodType = "ACHPayment" | "CCPayment";
+export type CustomerBank = {
+  CustBankGUID: string;
+  BankName: string;
+  AccountDisplayString: string;
+};
+
+export type SelectPaymentMethodProps = {
+  amountToPay: number;
+  selectedMethod: PaymentMethodType | null;
+  allowedMethods: PaymentMethodType[];
+  selectedCredits?: unknown[];
+  selectedACHBankGuid?: string | null;
+  customerBanks?: CustomerBank[];
+  allCredits?: unknown[];
+  isPayLoading?: boolean;
+  selectedInvoices?: unknown[];
+  allInvoices?: unknown[];
+
+  onSelectMethod: (method: PaymentMethodType | null) => void;
+  onPay?: () => void;
+  setSelectedCredits?: React.Dispatch<React.SetStateAction<unknown[]>>;
+  setSelectedACHBankGuid?: (guid: string | null) => void;
+};
+// TODO: Create story
+export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
+  const {
+    selectedMethod,
+    onSelectMethod,
+    selectedCredits,
+    allCredits,
+    allowedMethods,
+    selectedACHBankGuid,
+    setSelectedACHBankGuid,
+    customerBanks,
+    onPay,
+    isPayLoading,
+  } = props;
+
+  function handleToggle(method: PaymentMethodType | null) {
+    onSelectMethod(method);
+  }
+  return (
+    <Stack sizing="layout-group" width="full" minWidth={400}>
+      {!!allCredits?.length && (
+        <CreditsSelector
+          selectedCredits={selectedCredits || []}
+          allCredits={allCredits || []}
+          setSelectedCredits={props.setSelectedCredits || (() => {})}
+        />
+      )}
+      {allowedMethods?.includes("ACHPayment") && !!customerBanks?.length && (
+        <ACHSelector
+          selectedMethod={selectedMethod}
+          handleToggle={handleToggle}
+          selectedBankGuid={selectedACHBankGuid || null}
+          setSelectedBankGuid={setSelectedACHBankGuid || (() => {})}
+          customerBanks={customerBanks || []}
+          onPay={onPay}
+          isPayLoading={isPayLoading || false}
+        />
+      )}
+      {allowedMethods?.includes("CCPayment") && (
+        <Accordion
+          isOpen={selectedMethod === "CCPayment"}
+          title="Pay by Credit/Debit Card"
+          before={<Radio checked={selectedMethod === "CCPayment"} readOnly />}
+          onClick={() =>
+            handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment")
+          }
+        >
+          <Button className="w-full" onClick={onPay} disabled={isPayLoading}>
+            {isPayLoading ? "Processing..." : "Proceed to Payment"}
+          </Button>
+        </Accordion>
+      )}
+    </Stack>
+  );
+}
+
+type ACHSelectorProps = {
+  selectedMethod: PaymentMethodType | null;
+  handleToggle: (method: PaymentMethodType | null) => void;
+  selectedBankGuid: string | null;
+  setSelectedBankGuid: (guid: string | null) => void;
+  customerBanks: CustomerBank[];
+  onPay?: () => void;
+  isPayLoading?: boolean;
+};
+function ACHSelector(props: ACHSelectorProps) {
+  const {
+    selectedMethod,
+    handleToggle,
+    selectedBankGuid,
+    setSelectedBankGuid,
+    customerBanks,
+    onPay,
+    isPayLoading,
+  } = props;
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (selectedMethod === "CCPayment") return setIsOpen(false);
+  }, [selectedMethod]);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (!selectedBankGuid) {
+        setSelectedBankGuid(customerBanks[0]!.CustBankGUID);
+      }
+      handleToggle("ACHPayment");
+      return;
+    }
+  }, [isOpen]);
+
+  function handleBankSelect(
+    e: React.MouseEvent<HTMLDivElement>,
+    bankGuid: string | null,
+  ) {
+    e.stopPropagation();
+    setSelectedBankGuid(bankGuid);
+    handleToggle("ACHPayment");
+  }
+
+  return (
+    <Accordion
+      isOpen={isOpen}
+      title={
+        selectedBankGuid
+          ? customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)
+              ?.AccountDisplayString
+          : "Select a Bank"
+      }
+      before={
+        <Radio
+          checked={!!selectedBankGuid && selectedMethod === "ACHPayment"}
+          readOnly
+        />
+      }
+      onClick={() => setIsOpen((prev) => !prev)}
+    >
+      <Stack sizing="layout-group" width="full">
+        <Stack
+          sizing="layout-group"
+          width="full"
+          overflowY="auto"
+          maxHeight={200}
+        >
+          {customerBanks.map((bank) => (
+            <Card
+              className={clsx(
+                "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
+                selectedBankGuid === bank.CustBankGUID &&
+                  "bg-background-secondary-normal/20",
+              )}
+              key={bank.CustBankGUID}
+              onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
+            >
+              <Stack horizontal items="center" justify="between">
+                <Stack sizing="layout-group" horizontal items="center">
+                  <Icon name="question_mark" />
+                  <Paragraph>{bank.AccountDisplayString}</Paragraph>
+                </Stack>
+                {selectedBankGuid === bank.CustBankGUID && (
+                  <Icon name="check" />
+                )}
+              </Stack>
+            </Card>
+          ))}
+        </Stack>
+        <Button className="w-full" onClick={onPay} disabled={isPayLoading}>
+          {isPayLoading ? "Processing..." : "Submit Payment"}
+        </Button>
+      </Stack>
+    </Accordion>
+  );
+}
+type CreditsSelectorProps = {
+  selectedCredits: unknown[];
+  allCredits: unknown[];
+  setSelectedCredits: React.Dispatch<React.SetStateAction<unknown[]>>;
+};
+function CreditsSelector(props: CreditsSelectorProps) {
+  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  const handleCreditSelect = (credit: unknown) => {
+    if (setSelectedCredits) {
+      setSelectedCredits((prev) =>
+        prev.includes(credit)
+          ? prev.filter((c) => c !== credit)
+          : [...prev, credit],
+      );
+    }
+  };
+
+  return (
+    <Accordion
+      isOpen={isOpen}
+      title="Available Credits"
+      onClick={() => setIsOpen((prev) => !prev)}
+    >
+      <HorizontalDivider />
+      <Stack sizing="layout-group" width="full">
+        <Stack
+          sizing="layout-group"
+          width="full"
+          overflowY="auto"
+          maxHeight={300}
+        >
+          {(
+            allCredits as unknown as {
+              InvoiceNumber: string;
+              AROpenGUID: string;
+              InvoiceBalance: number;
+            }[]
+          ).map((credits) => (
+            <Stack
+              horizontal
+              justify="between"
+              items="center"
+              key={credits.AROpenGUID}
+              sizing="layout-group"
+            >
+              <Stack
+                horizontal
+                items="center"
+                sizing="layout-group"
+                onClick={() => handleCreditSelect(credits)}
+                paddingY
+              >
+                <Checkbox
+                  checked={selectedCredits?.includes(credits)}
+                  onChange={() => handleCreditSelect(credits)}
+                />
+                <Paragraph>{credits.InvoiceNumber}</Paragraph>
+              </Stack>
+              <Subheader className=" pr-desktop-component-padding">
+                ${formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)}
+              </Subheader>
+            </Stack>
+          ))}
+        </Stack>
+      </Stack>
+    </Accordion>
+  );
+}

package/src/components/Stack.tsx

@@ -8,6 +8,7 @@ import {
   Sizing,
 } from "../types";
 import { ComponentProps, CSSProperties } from "react";
+import { paddingYUsingLayoutGroupGap } from "../classNames";
 
 type StackProps = {
   children: React.ReactNode;
@@ -199,9 +200,7 @@ export const Stack = ({
         paddingY &&
           sizing === "layout" &&
           "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
-        paddingY &&
-          sizing === "layout-group" &&
-          "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
         paddingY &&
           sizing === "component" &&
           "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",

package/src/components/index.ts

@@ -18,3 +18,6 @@ export { MenuOption } from "./MenuOption";
 export { Search } from "./Search";
 export { Tooltip } from "./Tooltip";
 export { Input } from "./Input";
+export { PaymentOnAccountModal } from "./PaymentOnAccountModal";
+export { Accordion } from "./Accordion";
+export { Card } from "./Card";

package/dist/{chunk-UPBBOZM3.js → chunk-VH3EJNVE.js}

@@ -1,12 +1,12 @@
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
-import {
-  Paragraph
-} from "./chunk-VG4EPHJA.js";
 import {
   Label
 } from "./chunk-S5K22XTH.js";
+import {
+  Paragraph
+} from "./chunk-VG4EPHJA.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";