From 051dde3e80fd33fb73498c2decf0afe9b0354175 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 2 Mar 2023 15:56:11 -0500
Subject: [PATCH] fix(striker-ui): add Link to UPS type options

---
 .../components/ManageUps/AddUpsInputGroup.tsx | 54 +++++++++++++++----
 striker-ui/types/APIUps.d.ts                  |  6 +++
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/striker-ui/components/ManageUps/AddUpsInputGroup.tsx b/striker-ui/components/ManageUps/AddUpsInputGroup.tsx
index 476d3310..2aa5bf51 100644
--- a/striker-ui/components/ManageUps/AddUpsInputGroup.tsx
+++ b/striker-ui/components/ManageUps/AddUpsInputGroup.tsx
@@ -1,7 +1,10 @@
-import { FC, ReactElement, useMemo, useState } from 'react';
+import { FC, ReactElement, ReactNode, useMemo, useState } from 'react';
+
+import { BLACK } from '../../lib/consts/DEFAULT_THEME';
 
 import CommonUpsInputGroup from './CommonUpsInputGroup';
 import FlexBox from '../FlexBox';
+import Link from '../Link';
 import SelectWithLabel from '../SelectWithLabel';
 import Spinner from '../Spinner';
 import { BodyText } from '../Text';
@@ -22,15 +25,46 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
     () =>
       upsTemplate
         ? Object.entries(upsTemplate).map<SelectItem>(
-            ([upsTypeId, { brand, description }]) => ({
-              displayValue: (
-                <FlexBox spacing={0}>
-                  <BodyText inverted>{brand}</BodyText>
-                  <BodyText inverted>{description}</BodyText>
-                </FlexBox>
-              ),
-              value: upsTypeId,
-            }),
+            ([
+              upsTypeId,
+              {
+                brand,
+                description,
+                links: { 0: link },
+              },
+            ]) => {
+              let linkElement: ReactNode;
+
+              if (link) {
+                const { linkHref, linkLabel } = link;
+
+                linkElement = (
+                  <Link
+                    href={linkHref}
+                    onClick={(event) => {
+                      // Don't trigger the (parent) item selection event.
+                      event.stopPropagation();
+                    }}
+                    sx={{ display: 'inline-flex', color: BLACK }}
+                    target="_blank"
+                  >
+                    {linkLabel}
+                  </Link>
+                );
+              }
+
+              return {
+                displayValue: (
+                  <FlexBox spacing={0}>
+                    <BodyText inverted>{brand}</BodyText>
+                    <BodyText inverted>
+                      {description} ({linkElement})
+                    </BodyText>
+                  </FlexBox>
+                ),
+                value: upsTypeId,
+              };
+            },
           )
         : [],
     [upsTemplate],
diff --git a/striker-ui/types/APIUps.d.ts b/striker-ui/types/APIUps.d.ts
index d0194de5..4956eada 100644
--- a/striker-ui/types/APIUps.d.ts
+++ b/striker-ui/types/APIUps.d.ts
@@ -3,6 +3,12 @@ type APIUpsTemplate = {
     agent: string;
     brand: string;
     description: string;
+    links: {
+      [linkId: string]: {
+        linkHref: string;
+        linkLabel: string;
+      };
+    };
   };
 };