@dmsi/wedgekit-react 0.0.161 → 0.0.162

package/dist/components/SelectPaymentMethod.js

@@ -1,22 +0,0 @@
-"use client";
-import {
-  SelectPaymentMethod
-} from "../chunk-NT2ZKA4W.js";
-import "../chunk-WFGKIR5A.js";
-import "../chunk-BATIOCXB.js";
-import "../chunk-PLMGI5K5.js";
-import "../chunk-EPQLWHCL.js";
-import "../chunk-WFQEE2OO.js";
-import "../chunk-5UH6QUFB.js";
-import "../chunk-CYZL57LH.js";
-import "../chunk-WSS2DFTP.js";
-import "../chunk-N6JVLYEE.js";
-import "../chunk-4LXG6QNT.js";
-import "../chunk-HVI3CL7Y.js";
-import "../chunk-FKMKHLQH.js";
-import "../chunk-NKUETCDA.js";
-import "../chunk-RDLEIAQU.js";
-import "../chunk-ORMEWXMH.js";
-export {
-  SelectPaymentMethod
-};

package/src/components/PaymentOnAccountModal.tsx

@@ -1,121 +0,0 @@
-import { Modal } from "./Modal";
-import { Stack } from "./Stack";
-import { Paragraph } from "./Paragraph";
-import { Input } from "./Input";
-import { Card } from "./Card";
-import { useEffect, useMemo, useState } from "react";
-import {
-  SelectPaymentMethod,
-  SelectPaymentMethodProps,
-} from "./SelectPaymentMethod";
-import { formatCurrencyDisplay } from "../utils/formatting";
-
-type PaymentOnAccountModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  paymentProps: SelectPaymentMethodProps;
-  onAmountChange?: (amount: number) => void;
-  cardPaymentUrl: string | null;
-  setCardPaymentUrl: (url: string | null) => void;
-  isLoadingCCiframe?: boolean;
-  testid?: string;
-};
-export function PaymentOnAccountModal(props: PaymentOnAccountModalProps) {
-  const {
-    isOpen,
-    paymentProps,
-    onClose,
-    onAmountChange,
-    cardPaymentUrl,
-    setCardPaymentUrl,
-    isLoadingCCiframe,
-    testid
-  } = props;
-  const [amount, setAmount] = useState<number>(paymentProps.amountToPay);
-  const { creditCardSettings, selectedMethod } =
-    paymentProps as typeof paymentProps & {
-      creditCardSettings: {
-        ApplySurcharge: boolean;
-        SurchargeBasisType: string;
-        SurchargeBasisAmount: number;
-      };
-    };
-
-  useEffect(() => {
-    setAmount(paymentProps.amountToPay);
-  }, [paymentProps.amountToPay]);
-
-  function handleAmountChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const inputValue = event.target.value.replace(/[^0-9.-]+/g, "");
-    const value = +inputValue || 0;
-    setAmount(value);
-    onAmountChange?.(value);
-  }
-
-  const creditCardSurcharge = useMemo(() => {
-    const applySurcharge = creditCardSettings?.ApplySurcharge || false;
-    if (!applySurcharge || selectedMethod !== "CCPayment") {
-      return 0;
-    }
-    const surchargeType = creditCardSettings?.SurchargeBasisType;
-    const surchargeRate = creditCardSettings?.SurchargeBasisAmount || 0;
-
-    if (surchargeType === "Percent") {
-      return calculateSurcharge(amount, surchargeRate);
-    }
-    if (surchargeType === "Fixed") {
-      return surchargeRate;
-    }
-    return 0;
-  }, [creditCardSettings, amount, selectedMethod]);
-
-  return (
-    <Modal testid={testid} open={isOpen} onClose={onClose} title="Payment on Account">
-      <Stack sizing="layout-group" width="full">
-        {selectedMethod === "CCPayment" && (
-          <Stack horizontal justify="between" items="center">
-            <Paragraph>Surcharge</Paragraph>
-            <Paragraph testid={testid ? `${testid}-surcharge` : undefined}>
-              ${formatCurrencyDisplay(creditCardSurcharge.toFixed(2))}
-            </Paragraph>
-          </Stack>
-        )}
-        <Card className="py-desktop-component-padding">
-          <Stack sizing="component" justify="between" items="center" horizontal>
-            <Paragraph className="w-full">Amount to Pay</Paragraph>
-            <div>
-              <Input
-                testid={testid ? `${testid}-amount-to-pay` : undefined}
-                type="number"
-                placeholder="$0.00"
-                align="right"
-                value={amount === 0 ? "" : amount}
-                onChange={handleAmountChange}
-                before={"$"}
-              />
-            </div>
-          </Stack>
-        </Card>
-        <SelectPaymentMethod
-          {...paymentProps}
-          testid={testid ? `${testid}-select-payment-method` : undefined}
-          amountToPay={amount + creditCardSurcharge}
-          cardPaymentUrl={cardPaymentUrl}
-          setCardPaymentUrl={setCardPaymentUrl}
-          isLoadingCCiframe={isLoadingCCiframe}
-        />
-      </Stack>
-    </Modal>
-  );
-}
-
-export function calculateSurcharge(
-  amountInDollars: number,
-  surchargeRate: number,
-): number {
-  const amountInCents = amountInDollars * 100;
-  const surchargeInCents = (amountInCents * surchargeRate) / 100;
-  const roundedSurchargeInCents = Math.round(surchargeInCents);
-
-  return roundedSurchargeInCents / 100;
-}

package/src/components/SelectPaymentMethod.tsx

@@ -1,315 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Accordion } from "./Accordion";
-import { Button } from "./Button";
-import { Card } from "./Card";
-import { Radio } from "./Radio";
-import { Stack } from "./Stack";
-import { Checkbox } from "./Checkbox";
-import { Subheader } from "./Subheader";
-import { formatCurrencyDisplay, formatDecimalValue } from "../utils/formatting";
-import { HorizontalDivider } from "./HorizontalDivider";
-import { Spinner } from "./Spinner";
-import { WorldpayIframe } from "./WorldpayIframe";
-
-export type PaymentMethodType = "ACHPayment" | "CCPayment" | "CreditsOnly";
-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[];
-  creditCardSettings?: unknown;
-  withCredits?: boolean;
-  cardPaymentUrl?: string | null;
-  isLoadingCCiframe?: boolean;
-  testid?: string;
-
-  setCardPaymentUrl?: (url: string | null) => void;
-  onSelectMethod: (method: PaymentMethodType | null) => void;
-  onPay: () => void;
-  setSelectedCredits?: React.Dispatch<React.SetStateAction<unknown[]>>;
-  setSelectedACHBankGuid?: (guid: string | null) => void;
-};
-
-export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
-  const {
-    amountToPay,
-    selectedMethod,
-    onSelectMethod,
-    selectedCredits,
-    allCredits,
-    allowedMethods,
-    selectedACHBankGuid,
-    setSelectedACHBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading,
-    withCredits = false,
-    isLoadingCCiframe,
-    cardPaymentUrl,
-    testid,
-  } = props;
-
-  const payAllWithCredits = withCredits && amountToPay <= 0;
-
-  useEffect(() => {
-    if (payAllWithCredits) {
-      onSelectMethod("CreditsOnly");
-    } else {
-      onSelectMethod(null);
-    }
-  }, [onSelectMethod, payAllWithCredits]);
-
-  function handleToggle(method: PaymentMethodType | null) {
-    onSelectMethod(method);
-  }
-  return (
-    <Stack sizing="layout-group" width="full" minWidth={400}>
-      {!!allCredits?.length && withCredits && (
-        <CreditsSelector
-          testid={testid ? `${testid}-credit-selector` : undefined}
-          selectedCredits={selectedCredits || []}
-          allCredits={allCredits || []}
-          setSelectedCredits={props.setSelectedCredits || (() => {})}
-        />
-      )}
-      {allowedMethods?.includes("ACHPayment") && !!customerBanks?.length && (
-        <ACHSelector
-          testid={testid ? `${testid}-ach-selector` : undefined}
-          selectedMethod={selectedMethod}
-          handleToggle={handleToggle}
-          selectedBankGuid={selectedACHBankGuid || null}
-          setSelectedBankGuid={setSelectedACHBankGuid || (() => {})}
-          customerBanks={customerBanks || []}
-          onPay={onPay}
-          isPayLoading={isPayLoading || false}
-          disabled={payAllWithCredits || !amountToPay}
-        />
-      )}
-      {allowedMethods?.includes("CCPayment") && (
-        <Accordion
-          testid={testid ? `${testid}-cc-payment` : undefined}
-          isOpen={!payAllWithCredits && selectedMethod === "CCPayment"}
-          title={
-            <Radio
-              testid={testid ? `${testid}-cc-payment-radio` : undefined}
-              label="Pay by Credit/Debit Card"
-              checked={!payAllWithCredits && selectedMethod === "CCPayment"}
-              onChange={(e) => e.stopPropagation()}
-              disabled={payAllWithCredits || !amountToPay}
-            />
-          }
-          onClick={() => {
-            if (payAllWithCredits || !amountToPay) return;
-            handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
-          }}
-          disabled={payAllWithCredits || !amountToPay}
-        >
-          <Stack
-            sizing="layout-group"
-            width="full"
-            items="center"
-            justify="center"
-            style={{
-              flex: 1,
-            }}
-            minHeight={245}
-          >
-            {!isLoadingCCiframe && cardPaymentUrl ? (
-              <WorldpayIframe url={cardPaymentUrl} />
-            ) : (
-              <Spinner />
-            )}
-          </Stack>
-        </Accordion>
-      )}
-
-      {selectedMethod === "ACHPayment" && (
-        <Button
-          block
-          onClick={onPay}
-          disabled={isPayLoading || amountToPay <= 0}
-          testid={testid ? `${testid}-submit-payment-button` : undefined}
-        >
-          {isPayLoading ? "Processing..." : "Submit Payment"}
-        </Button>
-      )}
-      {payAllWithCredits && (
-        <Button
-          testid={testid ? `${testid}-submit-payment-button` : undefined}
-          block
-          onClick={onPay}
-          disabled={isPayLoading}
-        >
-          {isPayLoading ? "Processing..." : "Submit Payment"}
-        </Button>
-      )}
-    </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;
-  disabled?: boolean;
-  testid?: string;
-};
-function ACHSelector(props: ACHSelectorProps) {
-  const {
-    selectedMethod,
-    handleToggle,
-    selectedBankGuid,
-    setSelectedBankGuid,
-    customerBanks,
-    disabled,
-    testid,
-  } = props;
-
-  function handleBankSelect(
-    e: React.MouseEvent<HTMLDivElement>,
-    bankGuid: string | null,
-  ) {
-    if (disabled) return;
-    e.stopPropagation();
-    setSelectedBankGuid(bankGuid);
-    handleToggle("ACHPayment");
-  }
-
-  return (
-    <>
-      {customerBanks.map((bank) => (
-        <Card
-          testid={testid ? `${testid}-bank-${bank.CustBankGUID}` : undefined}
-          key={bank.CustBankGUID}
-          onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
-          selected={
-            !disabled &&
-            selectedMethod === "ACHPayment" &&
-            selectedBankGuid === bank.CustBankGUID
-          }
-        >
-          <Radio
-            label={`Pay by ${bank.AccountDisplayString}`}
-            checked={
-              !disabled &&
-              selectedMethod === "ACHPayment" &&
-              selectedBankGuid === bank.CustBankGUID
-            }
-            disabled={disabled}
-            onChange={(e) => e.stopPropagation()}
-          />
-        </Card>
-      ))}
-    </>
-  );
-}
-type CreditsSelectorProps = {
-  selectedCredits: unknown[];
-  allCredits: unknown[];
-  setSelectedCredits: React.Dispatch<React.SetStateAction<unknown[]>>;
-  testid?: string;
-};
-function CreditsSelector(props: CreditsSelectorProps) {
-  const { selectedCredits, allCredits, setSelectedCredits, testid } = 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)}
-      testid={testid}
-    >
-      <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;
-              InvoiceBalanceDue: number;
-            }[]
-          ).map((credits) => (
-            <Stack
-              horizontal
-              justify="between"
-              items="center"
-              key={credits.AROpenGUID}
-              sizing="layout-group"
-            >
-              <Stack
-                sizing="layout-group"
-                onClick={() => handleCreditSelect(credits)}
-                paddingY
-                flexGrow={1}
-                testid={
-                  testid
-                    ? `${testid}-credit-${credits.InvoiceNumber}`
-                    : undefined
-                }
-              >
-                <Checkbox
-                  testid={
-                    testid
-                      ? `${testid}-credit-${credits.InvoiceNumber}-checkbox`
-                      : undefined
-                  }
-                  label={credits.InvoiceNumber}
-                  checked={selectedCredits?.includes(credits)}
-                  onChange={() => handleCreditSelect(credits)}
-                />
-              </Stack>
-
-              <Subheader
-                testid={
-                  testid
-                    ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue`
-                    : undefined
-                }
-                className=" pr-desktop-component-padding"
-              >
-                $
-                {formatCurrencyDisplay(
-                  formatDecimalValue(Math.abs(credits.InvoiceBalanceDue), 2),
-                )}
-              </Subheader>
-            </Stack>
-          ))}
-        </Stack>
-      </Stack>
-    </Accordion>
-  );
-}