fix(striker-ui): add Link to UPS type options

main
Tsu-ba-me 2 years ago
parent 58549eb3ed
commit 230256a163
  1. 54
      striker-ui/components/ManageUps/AddUpsInputGroup.tsx
  2. 6
      striker-ui/types/APIUps.d.ts

@ -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 CommonUpsInputGroup from './CommonUpsInputGroup';
import FlexBox from '../FlexBox'; import FlexBox from '../FlexBox';
import Link from '../Link';
import SelectWithLabel from '../SelectWithLabel'; import SelectWithLabel from '../SelectWithLabel';
import Spinner from '../Spinner'; import Spinner from '../Spinner';
import { BodyText } from '../Text'; import { BodyText } from '../Text';
@ -22,15 +25,46 @@ const AddUpsInputGroup: FC<AddUpsInputGroupProps> = ({
() => () =>
upsTemplate upsTemplate
? Object.entries(upsTemplate).map<SelectItem>( ? Object.entries(upsTemplate).map<SelectItem>(
([upsTypeId, { brand, description }]) => ({ ([
displayValue: ( upsTypeId,
<FlexBox spacing={0}> {
<BodyText inverted>{brand}</BodyText> brand,
<BodyText inverted>{description}</BodyText> description,
</FlexBox> links: { 0: link },
), },
value: upsTypeId, ]) => {
}), 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], [upsTemplate],

@ -3,6 +3,12 @@ type APIUpsTemplate = {
agent: string; agent: string;
brand: string; brand: string;
description: string; description: string;
links: {
[linkId: string]: {
linkHref: string;
linkLabel: string;
};
};
}; };
}; };

Loading…
Cancel
Save