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 = ({ () => upsTemplate ? Object.entries(upsTemplate).map( - ([upsTypeId, { brand, description }]) => ({ - displayValue: ( - - {brand} - {description} - - ), - value: upsTypeId, - }), + ([ + upsTypeId, + { + brand, + description, + links: { 0: link }, + }, + ]) => { + let linkElement: ReactNode; + + if (link) { + const { linkHref, linkLabel } = link; + + linkElement = ( + { + // Don't trigger the (parent) item selection event. + event.stopPropagation(); + }} + sx={{ display: 'inline-flex', color: BLACK }} + target="_blank" + > + {linkLabel} + + ); + } + + return { + displayValue: ( + + {brand} + + {description} ({linkElement}) + + + ), + 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; + }; + }; }; };