@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/molecules/nav-menu/NavMenuMobile.stories.js

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import NavMenuMobile from "./NavMenuMobile";
+import { Box, Cluster } from "../../atoms/layouts";
+import { HamburgerButton } from "../../atoms";
+import { fallbackValues } from "./NavMenu.theme";
+
+export default {
+  title: "Molecules/NavMenuMobile",
+  component: NavMenuMobile,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    id: "nav-menu-mobile",
+    menuContent: (
+      <Box>
+        <p>Menu Item 1</p>
+        <p>Menu Item 2</p>
+        <p>Menu Item 3</p>
+      </Box>
+    ),
+    visible: false,
+    headerSize: "72px",
+    themeValues: fallbackValues
+  },
+  argTypes: {
+    id: {
+      description: "Unique identifier for the menu",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "nav-menu-mobile" }
+      }
+    },
+    menuContent: {
+      description: "Content to display inside the menu",
+      table: {
+        type: { summary: "ReactNode" },
+        defaultValue: { summary: "undefined" }
+      }
+    },
+    visible: {
+      description: "Whether the menu is visible",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    headerSize: {
+      description: "Height of the header, used to position the menu",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "72px" }
+      }
+    },
+    themeValues: {
+      description: "Theme values for styling the menu",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: "fallbackValues" }
+      }
+    }
+  }
+};
+
+export const BasicMenu = {
+  args: {
+    id: "basic-menu",
+    headerSize: "72px",
+    themeValues: fallbackValues,
+    menuContent: (
+      <>
+        <p>Nav Item 1</p>
+        <p>Nav Item 2</p>
+        <p>Nav Item 3</p>
+      </>
+    )
+  },
+  render: args => {
+    const [navMenuOpen, setNavMenuOpen] = useState(false);
+    return (
+      <>
+        <Cluster
+          extraStyles="width: 100%; height: 100vh;"
+          justify="center"
+          align="center"
+        >
+          <HamburgerButton
+            isActive={navMenuOpen}
+            onClick={() => setNavMenuOpen(!navMenuOpen)}
+            activeColor={args.themeValues.backgroundColor.profile}
+            inactiveColor={args.themeValues.backgroundColor.profile}
+          />
+        </Cluster>
+        <NavMenuMobile {...args} visible={navMenuOpen} />
+      </>
+    );
+  }
+};

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

@@ -20,12 +20,13 @@ import { fallbackValues } from "./Obligation.theme";
 
 const Obligation = ({
   config,
-  obligations,
+  obligations = [],
   actions,
   autoPayEnabled,
   autoPayAvailable,
   handleAutopayAction,
   deactivatePaymentSchedule,
+  deactivatingSchedule = false,
   autoPaySchedule,
   paymentPlanSchedule,
   navigateToSettings,
@@ -39,8 +40,15 @@ const Obligation = ({
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = "",
+  inactiveCanNavigateToAccountDetails = false,
   isInCustomerManagement = false,
-  themeValues
+  themeValues,
+  cartEnabled = false,
+  cartConfig = undefined,
+  multiCartParams = undefined,
+  isInCart = false,
+  isLoading = false,
+  showRemoveButton = true
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -59,6 +67,114 @@ const Obligation = ({
   const customAttributes = firstObligation?.customAttributes ?? {};
   const boxShadowValue =
     "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+
+  const loadingObligation = (
+    <Box
+      padding="0"
+      borderRadius="4px"
+      boxShadow={boxShadowValue}
+      as="section"
+      aria-label={`${description} - ${subDescription}`}
+      border={`1px solid ${GRECIAN_GREY}`}
+      borderWidthOverride="1px 0 0 0"
+    >
+      <Box background={WHITE} padding={isMobile ? "16px" : "24px 16px"}>
+        <Stack childGap="24px">
+          <Box
+            key={`${firstObligation?.id}-top`}
+            padding="0 8px"
+            minWidth="100%"
+          >
+            <Cluster
+              justify="space-between"
+              align="center"
+              childGap="4px"
+              nowrap
+            >
+              <Box padding="0">
+                <Cluster justify="flex-start" align="center">
+                  {!isMobile && (
+                    <IconModule
+                      icon={config.icon}
+                      iconDefault={config.iconDefault}
+                      configIconMap={config.iconMap}
+                      iconValue={config.iconValue}
+                      customAttributes={customAttributes}
+                      iconColor={themeValues.iconColor}
+                    />
+                  )}
+                  <TitleModule
+                    title={description}
+                    subtitle={subDescription}
+                    titleColor={BRIGHT_GREY}
+                    isMobile={isMobile}
+                  />
+                </Cluster>
+              </Box>
+              {!isMobile && (
+                <AmountModule
+                  isMobile={isMobile}
+                  disableActions={true}
+                  isLoading={true}
+                />
+              )}
+            </Cluster>
+          </Box>
+          {!isMobile && (
+            <PaymentDetailsActions
+              obligations={obligations}
+              obligationAssocID={obligationAssocID}
+              autoPayEnabled={autoPayEnabled}
+              autoPayAvailable={autoPayAvailable}
+              handleAutopayAction={handleAutopayAction}
+              deactivatePaymentSchedule={deactivatePaymentSchedule}
+              deactivatingSchedule={deactivatingSchedule}
+              autoPaySchedule={autoPaySchedule}
+              paymentPlanSchedule={paymentPlanSchedule}
+              navigateToSettings={navigateToSettings}
+              config={config}
+              actions={actions}
+              isMobile={isMobile}
+              description={description}
+              subDescription={subDescription}
+              disableActions={true}
+              cartEnabled={cartEnabled}
+              cartConfig={cartConfig}
+              multiCartParams={multiCartParams}
+              isInCart={isInCart}
+              isContentLoading={true}
+            />
+          )}
+        </Stack>
+      </Box>
+      {isMobile && (
+        <PaymentDetailsActions
+          obligations={obligations}
+          obligationAssocID={obligationAssocID}
+          autoPayEnabled={autoPayEnabled}
+          autoPayAvailable={autoPayAvailable}
+          handleAutopayAction={handleAutopayAction}
+          deactivatePaymentSchedule={deactivatePaymentSchedule}
+          deactivatingSchedule={deactivatingSchedule}
+          autoPaySchedule={autoPaySchedule}
+          paymentPlanSchedule={paymentPlanSchedule}
+          navigateToSettings={navigateToSettings}
+          config={config}
+          actions={actions}
+          isMobile={isMobile}
+          description={description}
+          subDescription={subDescription}
+          disableActions={true}
+          cartEnabled={cartEnabled}
+          cartConfig={cartConfig}
+          multiCartParams={multiCartParams}
+          isInCart={isInCart}
+          isContentLoading={true}
+        />
+      )}
+    </Box>
+  );
+
   const activeObligation = (
     <Box
       padding="0"
@@ -131,6 +247,7 @@ const Obligation = ({
               autoPayAvailable={autoPayAvailable}
               handleAutopayAction={handleAutopayAction}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
+              deactivatingSchedule={deactivatingSchedule}
               autoPaySchedule={autoPaySchedule}
               paymentPlanSchedule={paymentPlanSchedule}
               navigateToSettings={navigateToSettings}
@@ -144,6 +261,10 @@ const Obligation = ({
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
               disableActions={isInCustomerManagement}
+              cartEnabled={cartEnabled}
+              cartConfig={cartConfig}
+              multiCartParams={multiCartParams}
+              isInCart={isInCart}
             />
           )}
         </Stack>
@@ -155,6 +276,7 @@ const Obligation = ({
           autoPayAvailable={autoPayAvailable}
           handleAutopayAction={handleAutopayAction}
           deactivatePaymentSchedule={deactivatePaymentSchedule}
+          deactivatingSchedule={deactivatingSchedule}
           autoPaySchedule={autoPaySchedule}
           paymentPlanSchedule={paymentPlanSchedule}
           navigateToSettings={navigateToSettings}
@@ -168,6 +290,10 @@ const Obligation = ({
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
           disableActions={isInCustomerManagement}
+          cartEnabled={cartEnabled}
+          cartConfig={cartConfig}
+          multiCartParams={multiCartParams}
+          isInCart={isInCart}
         />
       )}
     </Box>
@@ -228,6 +354,10 @@ const Obligation = ({
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
                   disableActions={isInCustomerManagement}
+                  showRemoveButton={showRemoveButton}
+                  inactiveCanNavigateToAccountDetails={
+                    inactiveCanNavigateToAccountDetails
+                  }
                 />
               )}
             </Cluster>
@@ -251,6 +381,10 @@ const Obligation = ({
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
               disableActions={isInCustomerManagement}
+              showRemoveButton={showRemoveButton}
+              inactiveCanNavigateToAccountDetails={
+                inactiveCanNavigateToAccountDetails
+              }
             />
           )}
         </Stack>
@@ -258,7 +392,11 @@ const Obligation = ({
     </Box>
   );
 
-  return inactive ? inactiveObligation : activeObligation;
+  return isLoading
+    ? loadingObligation
+    : inactive
+    ? inactiveObligation
+    : activeObligation;
 };
 
 export default themeComponent(Obligation, "Obligation", fallbackValues);

package/src/components/molecules/obligation/Obligation.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ObligationStories from './Obligation.stories.js';
+
+<Meta of={ObligationStories} />
+
+<Title />
+
+The Obligation is a purpose built component to display user accounts on NFE's User Profile. The component consumers configuration provided by FCS to dictate its icon and type. NFE uses this configuration to assemble the description and subDescription from the obligation's custom attributes. A full detail of the structure of the configuration object is beyond the scope of this documentation, but an example can be found in the story code, and further detail is available on Confluence within the implementation guides used by solutions engineers.
+
+The component currently has two states. An active obligation uses data from the user lookup and FCS to provide account details and amount due as well as controls to interact with the obligation, such as for viewing account details or enabling/disabling autopay. 
+
+An inactive obligation is one whose data is not fully returned from lookup (this happens when our systems contain record of the account because of its association with a user, but the source system or source file ingested by FLS no longer provides that information, such as when a debt gets paid off). Inactive obligations look different and take some props to display a small amount of information to the user about what account used to be represented there.
+
+If the current user is a customer management admin accessing the profile via the RevM impersonation feature, then most of the interaction controls with the Obligation will be disabled.
+
+The Obligation was designed to be extensible to meet product needs in the future. New "modules" can be added to the modules directory that feature different collections of buttons or information display. Some work will need to be done to the main component code to support such additions.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>