@thecb/components 10.12.6 → 11.0.0

package/src/components/molecules/obligation/Obligation.stories.js

@@ -0,0 +1,460 @@
+import React from "react";
+import Obligation from "./Obligation";
+import { fn } from "@storybook/test";
+import { Box } from "../../atoms/layouts";
+
+const meta = {
+  title: "Molecules/Obligation",
+  component: Obligation,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    config: undefined,
+    obligations: undefined,
+    actions: undefined,
+    autoPayEnabled: false,
+    autoPayAvailable: false,
+    handleAutopayAction: fn(),
+    deactivatePaymentSchedule: fn(),
+    autoPaySchedule: undefined,
+    paymentPlanSchedule: undefined,
+    navigateToSettings: fn(),
+    isPaymentPlan: false,
+    nextAutopayDate: undefined,
+    obligationAssocID: undefined,
+    dueDate: undefined,
+    agencyName: undefined,
+    inactive: false,
+    inactiveLookupTitle: "",
+    inactiveLookupInput: "Account",
+    inactiveLookupValue: "",
+    isInCustomerManagement: false
+  },
+  argTypes: {
+    config: {
+      description:
+        "Config object that helps set icons and description/subdescription for obligation. Retrieved from FCS.",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    obligations: {
+      description: "Array of obligation objects",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    actions: {
+      description:
+        "Collection of profile-specific Redux actions that are used by the PaymentDetails submodule",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    autoPayEnabled: {
+      description: "Whether the obligation is currently set up for autopay",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    autoPayAvailable: {
+      description: "Whether the obligation supports autopay",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    handleAutopayAction: {
+      description: "Function run when user toggles autoapy button",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    deactivatePaymentSchedule: {
+      description: "Function run when user disabled autopay",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    autoPaySchedule: {
+      description: "Schedule object for autopay",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    paymentPlanSchedule: {
+      description: "Schedule object for payment plan. Currently unused.",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    navigateToSettings: {
+      description:
+        "Function that navigates a user to the settings page on the profile",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    isPaymentPlan: {
+      description:
+        "Whether the obligation is a payment plan type. Currently unused.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    nextAutopayDate: {
+      description: "The date the next autopay will run",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    obligationAssocID: {
+      description:
+        "The ID of the payment schedule associated with this obligation",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    agencyName: {
+      description:
+        "The name of the agency for this obligation. Used to populate inactive obligation descriptions.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    inactive: {
+      description: "Whether the obligation is in an inactive state.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    inactiveLookupTitle: {
+      description: "String used in the description of an inactive obligation",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    inactiveLookupInput: {
+      description: "Type of obligation, used for inactive obligations",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Account" }
+      }
+    },
+    inactiveLookupValue: {
+      description:
+        "Account number or other information returned from lookup for inactive obligations",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    isInCustomerManagement: {
+      description:
+        "Whether the user is a customer management user impersonating a profile. If true, certain controls are disabled.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const obligationConfig = {
+  amountValue: "amountDue",
+  collection: true,
+  description: "Cityville Water Management",
+  details: {
+    collectionDetails: {
+      City: "city",
+      State: "state",
+      "Street Address": "street_address_line_1",
+      "Zip Code": "zip_code"
+    },
+    collectionDetailsList: [
+      {
+        attribute: "name",
+        label: "Name"
+      },
+      {
+        attribute: "street_address_line_1",
+        label: "Street Address"
+      },
+      {
+        attribute: "city",
+        label: "City"
+      },
+      {
+        attribute: "state",
+        label: "State"
+      },
+      {
+        attribute: "zip_code",
+        label: "Zip Code"
+      }
+    ],
+    description: "Cityville Water Management",
+    obligationDetails: {
+      Account: "account_number",
+      Owner: "account_owner",
+      Status: "status",
+      "Utility Type": "utility_type"
+    },
+    subDescription: ["Account", "%account_number%"]
+  },
+  displayName: "Office of Water Management",
+  hasPaperlessBilling: true,
+  icon: [
+    "ACCOUNTS_UTILITY_ELECTRIC",
+    "ACCOUNTS_UTILITY_GAS",
+    "ACCOUNTS_UTILITY_GARBAGE",
+    "ACCOUNTS_UTILITY_WATER"
+  ],
+  iconDefault: "ACCOUNTS_UTILITY_WATER",
+  iconMap: {
+    Water: "ACCOUNTS_UTILITY_WATER"
+  },
+  iconValue: "utility_type",
+  obligationSlug: "cityville-water",
+  paperlessBilling: {
+    confirmationContent: "",
+    infoContent: ""
+  },
+  paymentAttributes: {
+    accountId: "account_number",
+    amount: "amountDue",
+    customAttributes: {
+      account_city: "account_city",
+      account_number: "account_number",
+      account_owner: "account_owner",
+      account_street_address: "account_street_address",
+      account_zip_code: "account_zip_code",
+      utility_type: "utility_type"
+    },
+    description: ["Account", "%account_number%"],
+    subDescription: ["%account_owner%"]
+  },
+  subDescription: ["Account", "%account_number%"],
+  type: "ACCOUNT"
+};
+
+export const ActiveObligation = {
+  args: {
+    config: obligationConfig,
+    obligations: [
+      {
+        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
+        amountDue: 5438,
+        customAttributes: {
+          account_number: "1006",
+          city: "Cityville",
+          client_slug: "Cityville",
+          customer_name: "Shadout Mapes",
+          due_date: "2024-09-01T12:00:00",
+          invoice_number: "101006.0",
+          line_item_description: "Shadout Mapes",
+          line_item_sub_description: "1006",
+          name: "Shadout Mapes",
+          service_type: "water",
+          state: "North Carolina",
+          street_address_line_1: "23145 O'Hara Wells",
+          sub_client_slug: "cityville-water",
+          total_due_amount: "5438.0",
+          utility_type: "water",
+          zip_code: "79221"
+        },
+        id: "1006",
+        kind: "FEE",
+        description: "Cityville Water Management",
+        subDescription: "Account: 1006",
+        amountValue: 5438,
+        details: {
+          description: "Cityville Water Management",
+          subDescription: "Account: 1006"
+        },
+        paymentAttributes: {
+          description: "Account: 1006",
+          subDescription: "",
+          amount: 5438
+        }
+      }
+    ],
+    actions: {
+      createPaymentFromProfile: fn(),
+      setDetailedObligation: fn(),
+      navigateToDetailedObligation: fn(),
+      deleteObligationAssoc: fn()
+    },
+    autoPayEnabled: true,
+    autoPayAvailable: true,
+    handleAutopayAction: fn(),
+    navigateToSettings: fn(),
+    deactivatePaymentSchedule: fn(),
+    isMobile: false,
+    nextAutopayDate: "On",
+    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
+    dueDate: "2024-09-01",
+    agencyName: "Water",
+    isInCustomerManagement: false
+  },
+  render: args => (
+    <Box minWidth="800px">
+      <Obligation {...args} />
+    </Box>
+  )
+};
+
+export const InactiveObligation = {
+  args: {
+    config: { ...obligationConfig, icon: "ACCOUNTS_HEALTH" },
+    obligations: [
+      {
+        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
+        amountDue: 5438,
+        customAttributes: {
+          account_number: "1006",
+          city: "Cityville",
+          client_slug: "Cityville",
+          customer_name: "Shadout Mapes",
+          due_date: "2024-09-01T12:00:00",
+          invoice_number: "101006.0",
+          line_item_description: "Shadout Mapes",
+          line_item_sub_description: "1006",
+          name: "Shadout Mapes",
+          service_type: "water",
+          state: "North Carolina",
+          street_address_line_1: "23145 O'Hara Wells",
+          sub_client_slug: "cityville-water",
+          total_due_amount: "5438.0",
+          utility_type: "water",
+          zip_code: "79221"
+        },
+        id: "1006",
+        kind: "FEE",
+        description: "Cityville Water Management",
+        subDescription: "Account: 1006",
+        amountValue: 5438,
+        details: {
+          description: "Cityville Water Management",
+          subDescription: "Account: 1006"
+        },
+        paymentAttributes: {
+          description: "Account: 1006",
+          subDescription: "",
+          amount: 5438
+        }
+      }
+    ],
+    actions: {
+      createPaymentFromProfile: fn(),
+      setDetailedObligation: fn(),
+      navigateToDetailedObligation: fn(),
+      deleteObligationAssoc: fn()
+    },
+    autoPayEnabled: false,
+    autoPayAvailable: true,
+    handleAutopayAction: fn(),
+    navigateToSettings: fn(),
+    deactivatePaymentSchedule: fn(),
+    isMobile: false,
+    nextAutopayDate: "",
+    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
+    dueDate: "2024-09-01",
+    agencyName: "Health Service System",
+    isInCustomerManagement: false,
+    inactive: true,
+    inactiveLookupInput: undefined,
+    inactiveLookupTitle: "Health Service System",
+    inactiveLookupValue: "012856"
+  },
+  render: args => (
+    <Box minWidth="800px">
+      <Obligation {...args} />
+    </Box>
+  )
+};
+
+export const CustomerManagementObligation = {
+  args: {
+    config: obligationConfig,
+    obligations: [
+      {
+        allowedPaymentInstruments: ["CASH", "CREDIT_CARD", "BANK_ACCOUNT"],
+        amountDue: 5438,
+        customAttributes: {
+          account_number: "1006",
+          city: "Cityville",
+          client_slug: "Cityville",
+          customer_name: "Shadout Mapes",
+          due_date: "2024-09-01T12:00:00",
+          invoice_number: "101006.0",
+          line_item_description: "Shadout Mapes",
+          line_item_sub_description: "1006",
+          name: "Shadout Mapes",
+          service_type: "water",
+          state: "North Carolina",
+          street_address_line_1: "23145 O'Hara Wells",
+          sub_client_slug: "cityville-water",
+          total_due_amount: "5438.0",
+          utility_type: "water",
+          zip_code: "79221"
+        },
+        id: "1006",
+        kind: "FEE",
+        description: "Cityville Water Management",
+        subDescription: "Account: 1006",
+        amountValue: 5438,
+        details: {
+          description: "Cityville Water Management",
+          subDescription: "Account: 1006"
+        },
+        paymentAttributes: {
+          description: "Account: 1006",
+          subDescription: "",
+          amount: 5438
+        }
+      }
+    ],
+    actions: {
+      createPaymentFromProfile: fn(),
+      setDetailedObligation: fn(),
+      navigateToDetailedObligation: fn(),
+      deleteObligationAssoc: fn()
+    },
+    autoPayEnabled: false,
+    autoPayAvailable: true,
+    handleAutopayAction: fn(),
+    navigateToSettings: fn(),
+    deactivatePaymentSchedule: fn(),
+    isMobile: false,
+    nextAutopayDate: "",
+    obligationAssocID: "046d66b9-5cea-4ccf-895a-97f21f314b72",
+    dueDate: "2024-09-01",
+    agencyName: "Water",
+    isInCustomerManagement: true
+  },
+  render: args => (
+    <Box minWidth="800px">
+      <Obligation {...args} />
+    </Box>
+  )
+};

package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyBusinessIcon = () => (
+const PropertyPersonalIcon = () => (
   <svg
     width="48"
     height="48"

package/src/components/molecules/pagination/Pagination.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as PaginationStories from './Pagination.stories.js';
+
+<Meta of={PaginationStories} />
+
+<Title />
+
+Pagination renders a control panel that can be used to interact with paginated tables of data. The component takes some props to customize the look of the controls, as well as callback functions to run when a user interacts with the previous, next, and numerical page buttons. The Pagination component should also be supplied with a number to indicate the current page the user is on as well as the total number of pages.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/molecules/pagination/Pagination.stories.js

@@ -1,32 +1,181 @@
-import React from "react";
-import { number, text } from "@storybook/addon-knobs";
+import React, { useState } from "react";
+import { WHITE, GHOST_GREY } from "../../../constants/colors";
+import { Box } from "../../atoms/layouts";
 import Pagination from "./Pagination";
-import page from "../../../../.storybook/page";
+import { fn } from "@storybook/test";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
-export const pagination = () => (
-  <Pagination
-    activeBorderWidth={text("activeBorderWidth", "3px", "props")}
-    ariaLabel={text("ariaLabel", "Aria Label", "props")}
-    arrowColor={text("arrowColor", "#FFFFFF", "props")}
-    borderRadius={text("borderRadius", "3px", "props")}
-    buttonHeight={text("buttonHeight", "44px", "props")}
-    buttonWidth={text("buttonWidth", "44px", "props")}
-    childGap={text("childGap", "24px", "props")}
-    currentPage={number("currentPage", 2)}
-    fontSize={text("fontSize", "17px", "props")}
-    fontWeight={text("fontWeight", "900", "props")}
-    numberColor={text("numberColor", "#15749D", "props")}
-    pageCount={number("pageCount", 3)}
-    pageNext={() => {}}
-    pagePrevious={() => {}}
-    setCurrentPage={() => {}}
-    // themeValues
-  />
-);
+const meta = {
+  title: "Molecules/Pagination",
+  component: Pagination,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    activeBorderWidth: "3px",
+    ariaLabel: undefined,
+    arrowColor: undefined,
+    borderRadius: "3px",
+    buttonHeight: "44px",
+    buttonWidth: "44px",
+    childGap: "24px",
+    currentPage: undefined,
+    fontSize: "17px",
+    fontWeight: "900",
+    numberColor: undefined,
+    pageCount: undefined,
+    pageNext: fn(),
+    pagePrevious: fn(),
+    setCurrentPage: fn()
+  },
+  argTypes: {
+    activeBorderWidth: {
+      description: "The width of the border around the active page number",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3px" }
+      }
+    },
+    ariaLabel: {
+      description: "aria-label value for pagination container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowColor: {
+      description:
+        "Override for arrow color, if undefined component uses themed values",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    borderRadius: {
+      description: "Border radius of the border around pagination controls",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3px" }
+      }
+    },
+    buttonHeight: {
+      description: "Height of pagination buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "44px" }
+      }
+    },
+    buttonWidth: {
+      description: "Width of pagination buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "44px" }
+      }
+    },
+    childGap: {
+      description: "Gap between pagination buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "24px" }
+      }
+    },
+    currentPage: {
+      description: "Current active page",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    fontSize: {
+      descripton: "Font size of page buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "17px" }
+      }
+    },
+    fontWeight: {
+      description: "Font weight of page buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "900" }
+      }
+    },
+    numberColor: {
+      description:
+        "Override for color of pagination number buttons, if undefined will use themed values",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    pageCount: {
+      description: "Total number of pages",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    pageNext: {
+      description: "Function to call when next button is clicked",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    pagePrevious: {
+      description: "Function to call when previous button is clicked",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    setCurrentPage: {
+      description: "Function to call when user selects a numerical page button",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
 
-const story = page({
-  title: "Components|Molecules/Pagination",
-  Component: Pagination
-});
+export default meta;
 
-export default story;
+export const BasicPagination = {
+  args: {
+    activeBorderWidth: "3px",
+    childGap: "24px",
+    borderRadius: "4px",
+    fontSize: "14px",
+    buttonHeight: "44px",
+    buttonWidth: "44px",
+    fontWeight: FONT_WEIGHT_SEMIBOLD,
+    pageCount: 12,
+    ariaLabel: "Pagination"
+  },
+  render: args => {
+    const [currentPage, setCurrentPage] = useState(5);
+
+    return (
+      <Box
+        background={WHITE}
+        borderRadius="4px"
+        boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
+        padding={"24px"}
+      >
+        <Pagination
+          {...args}
+          currentPage={currentPage}
+          pageNext={() =>
+            currentPage < 12 ? setCurrentPage(currentPage + 1) : fn()
+          }
+          pagePrevious={() =>
+            currentPage > 1 ? setCurrentPage(currentPage - 1) : fn()
+          }
+          setCurrentPage={page => setCurrentPage(page.pageNumber)}
+        />
+      </Box>
+    );
+  }
+};