@thecb/components 11.1.3 → 11.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.1.3",
+  "version": "11.1.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -44,7 +44,8 @@ const Obligation = ({
   cartEnabled = false,
   cartConfig = undefined,
   multiCartParams = undefined,
-  isInCart = false
+  isInCart = false,
+  isLoading = false
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -63,6 +64,110 @@ 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}
+              autoPayEnabled={autoPayEnabled}
+              autoPayAvailable={autoPayAvailable}
+              handleAutopayAction={handleAutopayAction}
+              deactivatePaymentSchedule={deactivatePaymentSchedule}
+              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}
+          autoPayEnabled={autoPayEnabled}
+          autoPayAvailable={autoPayAvailable}
+          handleAutopayAction={handleAutopayAction}
+          deactivatePaymentSchedule={deactivatePaymentSchedule}
+          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"
@@ -270,7 +375,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.stories.js

@@ -570,3 +570,64 @@ export const CartEnabledObligation = {
     </Box>
   )
 };
+
+export const LoadingObligation = {
+  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",
+          name: "Shadout Mapes",
+          service_type: "water",
+          sub_client_slug: "cityville-water",
+          utility_type: "water",
+          zip_code: "79221"
+        },
+        id: "1006",
+        kind: "FEE",
+        description: "Cityville Water Management",
+        subDescription: "Account: 1006",
+        details: {
+          description: "Cityville Water Management",
+          subDescription: "Account: 1006"
+        }
+      }
+    ],
+    actions: {
+      createPaymentFromProfile: fn(),
+      configureMultiCart: fn(),
+      addToMultiCart: fn(),
+      openCartSlider: 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: false,
+    inactiveLookupInput: undefined,
+    inactiveLookupTitle: "Health Service System",
+    inactiveLookupValue: "012856",
+    isLoading: true
+  },
+  render: args => (
+    <Box minWidth="800px">
+      <Obligation {...args} />
+    </Box>
+  )
+};

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -5,6 +5,8 @@ import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency, noop } from "../../../../util/general";
 import AutopayModalModule from "./AutopayModalModule";
+import LoadingLine from "../../../atoms/loading-line";
+import { GRECIAN_GREY } from "../../../../constants/colors";
 
 const AmountModule = ({
   totalAmountDue,
@@ -19,7 +21,8 @@ const AmountModule = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  disableActions = false
+  disableActions = false,
+  isLoading = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -30,43 +33,66 @@ const AmountModule = ({
             Amount Due
           </Text>
         )}
-        <AmountCallout
-          amount={displayCurrency(totalAmountDue)}
-          textAlign={isMobile ? "left" : "right"}
-        />
-        {autoPayEnabled && (
-          <AutopayModalModule
-            autoPayActive={autoPayEnabled}
-            autoPaySchedule={autoPaySchedule}
-            toggleModal={toggleModal}
-            modalOpen={modalOpen}
-            navigateToSettings={navigateToSettings}
-            deactivatePaymentSchedule={deactivatePaymentSchedule}
-            isMobile={isMobile}
-            paymentPlanSchedule={paymentPlanSchedule}
-            isPaymentPlan={isPaymentPlan}
-            nextAutopayDate={nextAutopayDate}
-            controlType="link"
-            description={description}
-            subDescription={subDescription}
-            allowedPaymentInstruments={allowedPaymentInstruments}
-            disableActions={disableActions}
-            action={disableActions ? noop : () => toggleModal(true)}
-            onClick={
-              disableActions
-                ? noop
-                : () => {
-                    toggleModal(true);
-                  }
-            }
-            onKeyPress={
-              disableActions
-                ? noop
-                : e => {
-                    e.key === "Enter" && toggleModal(true);
-                  }
-            }
-          />
+        {isLoading ? (
+          <>
+            <LoadingLine
+              minWidth={"70"}
+              maxWidth={"80"}
+              height={"26px"}
+              margin={isMobile ? "0" : "0 0 0 auto"}
+              foregroundColor={GRECIAN_GREY}
+              style={{ borderRadius: "0.125rem" }}
+            />
+            <LoadingLine
+              minWidth={"134"}
+              maxWidth={"178"}
+              height={"21px"}
+              margin={isMobile ? "0.25rem 0 0 0" : "0.25rem 0 0 auto"}
+              foregroundColor={GRECIAN_GREY}
+              style={{ borderRadius: "0.125rem" }}
+            />
+          </>
+        ) : (
+          <>
+            <AmountCallout
+              amount={displayCurrency(totalAmountDue)}
+              textAlign={isMobile ? "left" : "right"}
+            />
+            {autoPayEnabled && (
+              <AutopayModalModule
+                autoPayActive={autoPayEnabled}
+                autoPaySchedule={autoPaySchedule}
+                toggleModal={toggleModal}
+                modalOpen={modalOpen}
+                navigateToSettings={navigateToSettings}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                isMobile={isMobile}
+                paymentPlanSchedule={paymentPlanSchedule}
+                isPaymentPlan={isPaymentPlan}
+                nextAutopayDate={nextAutopayDate}
+                controlType="link"
+                description={description}
+                subDescription={subDescription}
+                allowedPaymentInstruments={allowedPaymentInstruments}
+                disableActions={disableActions}
+                action={disableActions ? noop : () => toggleModal(true)}
+                onClick={
+                  disableActions
+                    ? noop
+                    : () => {
+                        toggleModal(true);
+                      }
+                }
+                onKeyPress={
+                  disableActions
+                    ? noop
+                    : e => {
+                        e.key === "Enter" && toggleModal(true);
+                      }
+                }
+              />
+            )}
+          </>
         )}
       </Stack>
     </Box>

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -28,7 +28,8 @@ const PaymentDetailsActions = ({
   disableActions = false,
   cartEnabled,
   cartConfig,
-  isInCart
+  isInCart,
+  isContentLoading
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -110,6 +111,7 @@ const PaymentDetailsActions = ({
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
               isInCustomerManagement={disableActions}
+              isLoading={isContentLoading}
             />
           </Cluster>
         </Box>