chore: refactor colored chip helpers

AB#33610 This reduces some duplication, and inadvertently fixes the transaction statuses in the activity log which were incorrect.
global-121 · Feb 14, 2025 · 5c72218 · 5c72218
1 parent 9cc1852
commit 5c72218
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 120 deletions.
diff --git a/interfaces/Portalicious/src/app/components/colored-chip/colored-chip.helper.ts b/interfaces/Portalicious/src/app/components/colored-chip/colored-chip.helper.ts
@@ -5,128 +5,73 @@ import { RegistrationStatusEnum } from '@121-service/src/registration/enum/regis
 import { ChipVariant } from '~/components/colored-chip/colored-chip.component';
 import {
   convertTwilioMessageStatusToMessageStatus,
+  MESSAGE_STATUS_CHIP_VARIANTS,
   MESSAGE_STATUS_LABELS,
-  MessageStatus,
 } from '~/domains/message/message.helper';
 import {
   REGISTRATION_STATUS_CHIP_VARIANTS,
   REGISTRATION_STATUS_LABELS,
+  VISA_CARD_STATUS_CHIP_VARIANTS,
   VISA_CARD_STATUS_LABELS,
 } from '~/domains/registration/registration.helper';
+import {
+  TRANSACTION_STATUS_CHIP_VARIANTS,
+  TRANSACTION_STATUS_LABELS,
+} from '~/domains/transaction/transaction.helper';
 
 export interface ChipData {
   chipLabel: string;
   chipVariant: ChipVariant;
 }
 
-export const getChipDataByRegistrationStatus = (
-  status?: null | RegistrationStatusEnum,
+const mapValueToChipData = <Enum extends string>(
+  value: Enum | null | undefined,
+  labels: Record<NonNullable<Enum>, string>,
+  chipVariants: Record<NonNullable<Enum>, ChipVariant>,
 ): ChipData => {
-  if (!status) {
+  if (!value) {
     return {
       chipVariant: 'grey',
       chipLabel: $localize`:@@generic-not-available:Not available`,
     };
   }
 
   return {
-    chipLabel: REGISTRATION_STATUS_LABELS[status],
-    chipVariant: REGISTRATION_STATUS_CHIP_VARIANTS[status],
+    chipLabel: labels[value],
+    chipVariant: chipVariants[value],
   };
 };
 
-export const getChipDataByTransactionStatusEnum = (
-  status?: null | TransactionStatusEnum,
-): ChipData => {
-  if (!status) {
-    return {
-      chipVariant: 'grey',
-      chipLabel: $localize`:@@generic-not-available:Not available`,
-    };
-  }
-  switch (status) {
-    case TransactionStatusEnum.success:
-      return {
-        chipLabel: $localize`:@@generic-success:Success`,
-        chipVariant: 'green',
-      };
-    case TransactionStatusEnum.waiting:
-      return {
-        chipLabel: $localize`:@@generic-pending:Pending`,
-        chipVariant: 'orange',
-      };
-    case TransactionStatusEnum.error:
-      return {
-        chipLabel: $localize`:@@generic-error:Error`,
-        chipVariant: 'red',
-      };
-  }
-};
+export const getChipDataByRegistrationStatus = (
+  status?: null | RegistrationStatusEnum,
+): ChipData =>
+  mapValueToChipData(
+    status,
+    REGISTRATION_STATUS_LABELS,
+    REGISTRATION_STATUS_CHIP_VARIANTS,
+  );
 
-export const getChipDataByTwilioMessageStatus = (status: string): ChipData => {
-  const messageStatus = convertTwilioMessageStatusToMessageStatus(status);
-  const chipLabel = MESSAGE_STATUS_LABELS[messageStatus];
+export const getChipDataByTransactionStatus = (
+  status?: null | TransactionStatusEnum,
+): ChipData =>
+  mapValueToChipData(
+    status,
+    TRANSACTION_STATUS_LABELS,
+    TRANSACTION_STATUS_CHIP_VARIANTS,
+  );
 
-  switch (messageStatus) {
-    case MessageStatus.delivered:
-    case MessageStatus.read:
-      return {
-        chipLabel,
-        chipVariant: 'green',
-      };
-    case MessageStatus.failed:
-      return {
-        chipLabel,
-        chipVariant: 'red',
-      };
-    case MessageStatus.sent:
-    default:
-      return {
-        chipLabel,
-        chipVariant: 'blue',
-      };
-  }
-};
+export const getChipDataByTwilioMessageStatus = (status: string): ChipData =>
+  mapValueToChipData(
+    convertTwilioMessageStatusToMessageStatus(status),
+    MESSAGE_STATUS_LABELS,
+    MESSAGE_STATUS_CHIP_VARIANTS,
+  );
 
 export const getChipDataByVisaCardStatus = (
   status?: null | VisaCard121Status,
-): ChipData => {
-  if (!status) {
-    return {
-      chipVariant: 'grey',
-      chipLabel: $localize`:@@generic-not-available:Not available`,
-    };
-  }
-
-  const chipLabel = VISA_CARD_STATUS_LABELS[status];
-  switch (status) {
-    case VisaCard121Status.Unknown:
-      return {
-        chipLabel,
-        chipVariant: 'grey',
-      };
-    case VisaCard121Status.Active:
-      return {
-        chipLabel,
-        chipVariant: 'green',
-      };
-    case VisaCard121Status.Issued:
-      return {
-        chipLabel,
-        chipVariant: 'blue',
-      };
-    case VisaCard121Status.Substituted:
-    case VisaCard121Status.Blocked:
-    case VisaCard121Status.SuspectedFraud:
-      return {
-        chipLabel,
-        chipVariant: 'red',
-      };
-    case VisaCard121Status.CardDataMissing:
-    case VisaCard121Status.Paused:
-      return {
-        chipLabel,
-        chipVariant: 'orange',
-      };
-  }
-};
+): ChipData =>
+  mapValueToChipData(
+    status,
+    VISA_CARD_STATUS_LABELS,
+    VISA_CARD_STATUS_CHIP_VARIANTS,
+  );
diff --git a/interfaces/Portalicious/src/app/domains/message/message.helper.ts b/interfaces/Portalicious/src/app/domains/message/message.helper.ts
@@ -1,5 +1,7 @@
 import { MessageContentType } from '@121-service/src/notifications/enum/message-type.enum';
 
+import { ChipVariant } from '~/components/colored-chip/colored-chip.component';
+
 export const MESSAGE_CONTENT_TYPE_LABELS: Record<MessageContentType, string> = {
   [MessageContentType.custom]: $localize`:@@message-content-type-custom:Custom message`,
   [MessageContentType.defaultReply]: $localize`:@@message-content-type-default-reply:Default reply`,
@@ -47,3 +49,12 @@ export const MESSAGE_STATUS_LABELS: Record<MessageStatus, string> = {
   [MessageStatus.sent]: $localize`:@@message-status-sent:Sent`,
   [MessageStatus.unknown]: $localize`:@@message-status-unknown:Unknown`,
 };
+
+export const MESSAGE_STATUS_CHIP_VARIANTS: Record<MessageStatus, ChipVariant> =
+  {
+    [MessageStatus.delivered]: 'green',
+    [MessageStatus.read]: 'green',
+    [MessageStatus.failed]: 'red',
+    [MessageStatus.sent]: 'blue',
+    [MessageStatus.unknown]: 'blue',
+  };
diff --git a/interfaces/Portalicious/src/app/domains/registration/registration.helper.ts b/interfaces/Portalicious/src/app/domains/registration/registration.helper.ts
@@ -90,6 +90,20 @@ export const VISA_CARD_STATUS_LABELS: Record<VisaCard121Status, string> = {
   [VisaCard121Status.CardDataMissing]: $localize`:@@debit-card-status-card-data-missing:Debit card data missing`,
 };
 
+export const VISA_CARD_STATUS_CHIP_VARIANTS: Record<
+  VisaCard121Status,
+  ChipVariant
+> = {
+  [VisaCard121Status.Unknown]: 'grey',
+  [VisaCard121Status.Active]: 'green',
+  [VisaCard121Status.Issued]: 'blue',
+  [VisaCard121Status.Substituted]: 'red',
+  [VisaCard121Status.Blocked]: 'red',
+  [VisaCard121Status.SuspectedFraud]: 'red',
+  [VisaCard121Status.CardDataMissing]: 'orange',
+  [VisaCard121Status.Paused]: 'orange',
+};
+
 export const ACTIVITY_LOG_ITEM_TYPE_LABELS: Record<ActivityTypeEnum, string> = {
   [ActivityTypeEnum.DataChange]: $localize`:@@activity-log-item-type-data-change:Data change`,
   [ActivityTypeEnum.FinancialServiceProviderChange]: $localize`:@@activity-log-item-type-fsp-change:FSP change`,

diff --git a/interfaces/Portalicious/src/app/pages/project-payment/project-payment.page.ts b/interfaces/Portalicious/src/app/pages/project-payment/project-payment.page.ts
@@ -23,7 +23,10 @@ import { RegistrationStatusEnum } from '@121-service/src/registration/enum/regis
 import { PermissionEnum } from '@121-service/src/user/enum/permission.enum';
 
 import { AppRoutes } from '~/app.routes';
-import { getChipDataByRegistrationStatus } from '~/components/colored-chip/colored-chip.helper';
+import {
+  getChipDataByRegistrationStatus,
+  getChipDataByTransactionStatus,
+} from '~/components/colored-chip/colored-chip.helper';
 import { PageLayoutComponent } from '~/components/page-layout/page-layout.component';
 import {
   QueryTableColumn,
@@ -40,10 +43,7 @@ import {
   REGISTRATION_STATUS_LABELS,
   registrationLink,
 } from '~/domains/registration/registration.helper';
-import {
-  TRANSACTION_STATUS_CHIP_VARIANTS,
-  TRANSACTION_STATUS_LABELS,
-} from '~/domains/transaction/transaction.helper';
+import { TRANSACTION_STATUS_LABELS } from '~/domains/transaction/transaction.helper';
 import { MetricTileComponent } from '~/pages/project-monitoring/components/metric-tile/metric-tile.component';
 import { ImportReconciliationDataComponent } from '~/pages/project-payment/components/import-reconciliation-data/import-reconciliation-data.component';
 import { ProjectPaymentChartComponent } from '~/pages/project-payment/components/project-payment-chart/project-payment-chart.component';
@@ -234,10 +234,8 @@ export class ProjectPaymentPageComponent {
           label: TRANSACTION_STATUS_LABELS[status],
           value: status,
         })),
-        getCellChipData: (transaction) => ({
-          chipLabel: TRANSACTION_STATUS_LABELS[transaction.status],
-          chipVariant: TRANSACTION_STATUS_CHIP_VARIANTS[transaction.status],
-        }),
+        getCellChipData: (transaction) =>
+          getChipDataByTransactionStatus(transaction.status),
       },
       {
         field: 'errorMessage',

diff --git a/...-activity-log/components/activity-log-expanded-row/activity-log-expanded-row.component.ts b/...-activity-log/components/activity-log-expanded-row/activity-log-expanded-row.component.ts
@@ -14,17 +14,14 @@ import { ActivityTypeEnum } from '@121-service/src/activities/enum/activity-type
 import { FinancialServiceProviders } from '@121-service/src/financial-service-providers/enum/financial-service-provider-name.enum';
 import { GenericRegistrationAttributes } from '@121-service/src/registration/enum/registration-attribute.enum';
 
+import { getChipDataByRegistrationStatus } from '~/components/colored-chip/colored-chip.helper';
 import {
   DataListComponent,
   DataListItem,
 } from '~/components/data-list/data-list.component';
 import { TableCellComponent } from '~/components/query-table/components/table-cell/table-cell.component';
 import { paymentLink } from '~/domains/payment/payment.helpers';
 import { ProjectApiService } from '~/domains/project/project.api.service';
-import {
-  REGISTRATION_STATUS_CHIP_VARIANTS,
-  REGISTRATION_STATUS_LABELS,
-} from '~/domains/registration/registration.helper';
 import { Activity } from '~/domains/registration/registration.model';
 import { ActivityLogTableCellContext } from '~/pages/project-registration-activity-log/project-registration-activity-log.page';
 import { RegistrationAttributeService } from '~/services/registration-attribute.service';
@@ -142,15 +139,11 @@ export class ActivityLogExpandedRowComponent
         return [
           {
             label: $localize`Old status`,
-            chipLabel: REGISTRATION_STATUS_LABELS[item.attributes.oldValue],
-            chipVariant:
-              REGISTRATION_STATUS_CHIP_VARIANTS[item.attributes.oldValue],
+            ...getChipDataByRegistrationStatus(item.attributes.oldValue),
           },
           {
             label: $localize`New status`,
-            chipLabel: REGISTRATION_STATUS_LABELS[item.attributes.newValue],
-            chipVariant:
-              REGISTRATION_STATUS_CHIP_VARIANTS[item.attributes.newValue],
+            ...getChipDataByRegistrationStatus(item.attributes.newValue),
           },
           {
             label: $localize`Change reason`,

diff --git a/...c/app/pages/project-registration-activity-log/components/table-cell-overview.component.ts b/...c/app/pages/project-registration-activity-log/components/table-cell-overview.component.ts
@@ -18,7 +18,7 @@ import { GenericRegistrationAttributes } from '@121-service/src/registration/enu
 import { ColoredChipComponent } from '~/components/colored-chip/colored-chip.component';
 import {
   ChipData,
-  getChipDataByTransactionStatusEnum,
+  getChipDataByTransactionStatus,
   getChipDataByTwilioMessageStatus,
 } from '~/components/colored-chip/colored-chip.helper';
 import { TableCellComponent } from '~/components/query-table/components/table-cell/table-cell.component';
@@ -89,7 +89,7 @@ export class TableCellOverviewComponent
     const { type, attributes } = this.value();
 
     if (type === ActivityTypeEnum.Transaction) {
-      return getChipDataByTransactionStatusEnum(attributes.status);
+      return getChipDataByTransactionStatus(attributes.status);
     }
 
     if (type === ActivityTypeEnum.Message) {

diff --git a/interfaces/Portalicious/src/locale/messages.xlf b/interfaces/Portalicious/src/locale/messages.xlf
@@ -11,9 +11,6 @@
       <trans-unit id="generic-success" datatype="html">
         <source>Success</source>
       </trans-unit>
-      <trans-unit id="generic-pending" datatype="html">
-        <source>Pending</source>
-      </trans-unit>
       <trans-unit id="generic-error" datatype="html">
         <source>Error</source>
       </trans-unit>