Skip to content

Display insurance info only if holder is a company #1214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Display insurance info only if holder is a company #1214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e571ebe
Display assurance info only if holder is a company
sandrine-ds Aug 26, 2025
f95ad17
Use new accountHolderType object
sandrine-ds Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 30 additions & 28 deletions clients/banking/src/components/CardItemPhysicalDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,7 @@ export const CardItemPhysicalDetails = ({
const textColor = hasBindingUserError ? colors.gray[300] : colors.gray[800];
const previousCard = card.physicalCard?.previousPhysicalCards[0];
const [currentCard, setCurrentCard] = useState<"previous" | "renewed">("renewed");
const cardHolderType = card.accountMembership.account?.holder.info.type;

return (
<ResponsiveContainer breakpoint={breakpoints.medium} style={styles.root}>
Expand Down Expand Up @@ -1587,34 +1588,35 @@ export const CardItemPhysicalDetails = ({
</View>
<Space height={12} />

{match(card.insuranceSubscription)
.with(P.nonNullable, ({ package: { level } }) => (
<Box alignItems="center" justifyContent="center" direction="row">
<BorderedIcon
name="shield-checkmark-regular"
padding={4}
size={24}
color="current"
borderRadius={4}
/>
<Space width={8} />

{match(level)
.with("Basic", () => (
<LakeText>{t("cardDetail.insurance.description.basic")}</LakeText>
))
.with("Essential", () => (
<LakeText>{t("cardDetail.insurance.description.essential")}</LakeText>
))
.with("Premium", () => (
<LakeText variant="smallRegular">
{t("cardDetail.insurance.description.premium")}
</LakeText>
))
.otherwise(() => null)}
</Box>
))
.otherwise(() => null)}
{cardHolderType === "Company" &&
match(card.insuranceSubscription)
.with(P.nonNullable, ({ package: { level } }) => (
<Box alignItems="center" justifyContent="center" direction="row">
<BorderedIcon
name="shield-checkmark-regular"
padding={4}
size={24}
color="current"
borderRadius={4}
/>
<Space width={8} />

{match(level)
.with("Basic", () => (
<LakeText>{t("cardDetail.insurance.description.basic")}</LakeText>
))
.with("Essential", () => (
<LakeText>{t("cardDetail.insurance.description.essential")}</LakeText>
))
.with("Premium", () => (
<LakeText variant="smallRegular">
{t("cardDetail.insurance.description.premium")}
</LakeText>
))
.otherwise(() => null)}
</Box>
))
.otherwise(() => null)}

<CardItemPhysicalDeliveryWizard
isCurrentUserCardOwner={isCurrentUserCardOwner}
Expand Down
117 changes: 62 additions & 55 deletions clients/banking/src/components/CardItemSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const CardItemSettings = ({ cardId, accountMembershipId, card }: Props) =
const accountHolder = card.accountMembership.account?.holder;
const settingsRef = useRef<CardWizardSettingsRef>(null);
const cardInsurance = card.insuranceSubscription;
const cardHolderType = card.accountMembership.account?.holder.info.type;

const { canUpdateCard } = usePermissions();

Expand Down Expand Up @@ -134,68 +135,74 @@ export const CardItemSettings = ({ cardId, accountMembershipId, card }: Props) =

<Space height={24} />

<Box direction={small ? "column" : "row"}>
<Box direction={!small && cardHolderType === "Company" ? "row" : "column"}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we could use large from ResponsiveContainer instead of !small for readability, but I don't have a strong opinion about this, both are good for me

<Box style={small ? undefined : styles.box}>
{cardInsurance != null && cardInsurance.package.noticeUrl != null && (
<>
<Box direction="row" alignItems="center">
<Icon name="shield-checkmark-regular" size={16} color={colors.gray[500]} />
<Space width={8} />

<LakeText align="center" variant="smallSemibold">
{match(cardInsurance.package)
.with({ level: "Basic" }, () =>
t("cardDetail.insurance.description.premium"),
)
.with({ level: "Essential" }, () =>
t("cardDetail.insurance.description.essential"),
)
.with({ level: "Premium" }, () =>
t("cardDetail.insurance.description.premium"),
)
.otherwise(() => null)}
</LakeText>
</Box>
<Space height={8} />

<LakeText variant="smallRegular">
<Link style={styles.link} to={cardInsurance.package.noticeUrl} target="blank">
<Box direction="row" alignItems="center">
<LakeText color={colors.current.primary} variant="smallRegular">
{t("cardDetail.insurance.link")}
</LakeText>
{cardInsurance != null &&
cardInsurance.package.noticeUrl != null &&
cardHolderType === "Company" && (
<>
<Box direction="row" alignItems="center">
<Icon name="shield-checkmark-regular" size={16} color={colors.gray[500]} />
<Space width={8} />

<Space width={4} />
<Icon color={colors.current.primary} name="open-filled" size={16} />
</Box>
</Link>
</LakeText>
<LakeText align="center" variant="smallSemibold">
{match(cardInsurance.package)
.with({ level: "Basic" }, () =>
t("cardDetail.insurance.description.premium"),
)
.with({ level: "Essential" }, () =>
t("cardDetail.insurance.description.essential"),
)
.with({ level: "Premium" }, () =>
t("cardDetail.insurance.description.premium"),
)
.otherwise(() => null)}
</LakeText>
</Box>
<Space height={8} />

<Space height={8} />
<Box direction="row" alignItems="center">
<LakeText variant="smallRegular">
{formatNestedMessage("cardDetail.insurance.claim", {
link: text => (
<>
<Link style={styles.link} to={cardInsurance.claimsUrl} target="blank">
<Box direction="row" alignItems="center">
<LakeText color={colors.current.primary} variant="smallRegular">
{text}
</LakeText>
<Link style={styles.link} to={cardInsurance.package.noticeUrl} target="blank">
<Box direction="row" alignItems="center">
<LakeText color={colors.current.primary} variant="smallRegular">
{t("cardDetail.insurance.link")}
</LakeText>

<Space width={4} />
<Icon color={colors.current.primary} name="open-filled" size={16} />
</Box>
</Link>
</>
),
})}
<Space width={4} />
<Icon color={colors.current.primary} name="open-filled" size={16} />
</Box>
</Link>
</LakeText>
</Box>

<Space height={24} />
</>
)}
<Space height={8} />
<Box direction="row" alignItems="center">
<LakeText variant="smallRegular">
{formatNestedMessage("cardDetail.insurance.claim", {
link: text => (
<>
<Link style={styles.link} to={cardInsurance.claimsUrl} target="blank">
<Box direction="row" alignItems="center">
<LakeText color={colors.current.primary} variant="smallRegular">
{text}
</LakeText>

<Space width={4} />
<Icon
color={colors.current.primary}
name="open-filled"
size={16}
/>
</Box>
</Link>
</>
),
})}
</LakeText>
</Box>

<Space height={24} />
</>
)}
</Box>

<Box style={small ? undefined : styles.box}>
Expand Down
56 changes: 29 additions & 27 deletions clients/banking/src/components/CardItemVirtualDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export const CardItemVirtualDetails = ({
};

const textColor = hasBindingUserError ? colors.gray[300] : colors.gray[800];
const cardHolderType = card.accountMembership.account?.holder.info.type;

return (
<View style={styles.container}>
Expand Down Expand Up @@ -262,34 +263,35 @@ export const CardItemVirtualDetails = ({

<Space height={24} />

{match(card.insuranceSubscription)
.with(P.nonNullable, ({ package: { level } }) => (
<Box alignItems="center" justifyContent="center" direction="row">
<BorderedIcon
name="shield-checkmark-regular"
padding={4}
size={24}
color="current"
borderRadius={4}
/>
<Space width={8} />
{cardHolderType === "Company" &&
match(card.insuranceSubscription)
.with(P.nonNullable, ({ package: { level } }) => (
<Box alignItems="center" justifyContent="center" direction="row">
<BorderedIcon
name="shield-checkmark-regular"
padding={4}
size={24}
color="current"
borderRadius={4}
/>
<Space width={8} />

{match(level)
.with("Basic", () => (
<LakeText>{t("cardDetail.insurance.description.basic")}</LakeText>
))
.with("Essential", () => (
<LakeText>{t("cardDetail.insurance.description.essential")}</LakeText>
))
.with("Premium", () => (
<LakeText variant="smallRegular">
{t("cardDetail.insurance.description.premium")}
</LakeText>
))
.otherwise(() => null)}
</Box>
))
.otherwise(() => null)}
{match(level)
.with("Basic", () => (
<LakeText>{t("cardDetail.insurance.description.basic")}</LakeText>
))
.with("Essential", () => (
<LakeText>{t("cardDetail.insurance.description.essential")}</LakeText>
))
.with("Premium", () => (
<LakeText variant="smallRegular">
{t("cardDetail.insurance.description.premium")}
</LakeText>
))
.otherwise(() => null)}
</Box>
))
.otherwise(() => null)}
</View>
</View>
);
Expand Down
10 changes: 6 additions & 4 deletions clients/banking/src/components/CardListCells.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const cardChip = Lazy(() => (

export const FullNameAndCardTypeCell = ({ card }: { card: Card }) => {
const spendingLimits = card.spendingLimits ?? [];
const cardHolderType = card.accountMembership.account?.holder.info.type;

return (
<Cell>
Expand Down Expand Up @@ -128,7 +129,7 @@ export const FullNameAndCardTypeCell = ({ card }: { card: Card }) => {
{t("cards.format.virtual")}
</Tag>

{isNotNullish(insuranceSubscription) && (
{isNotNullish(insuranceSubscription) && cardHolderType === "Company" && (
<>
<Space width={12} />
<Tag color="gray" icon="shield-checkmark-regular">
Expand Down Expand Up @@ -171,7 +172,7 @@ export const FullNameAndCardTypeCell = ({ card }: { card: Card }) => {
</>
</Tag>

{isNotNullish(insuranceSubscription) && (
{isNotNullish(insuranceSubscription) && cardHolderType === "Company" && (
<>
<Space width={12} />
<Tag color="gray" icon="shield-checkmark-regular">
Expand Down Expand Up @@ -273,6 +274,7 @@ export const CardStatusCell = ({ card }: { card: Card }) => {

export const CardSummaryCell = ({ card }: { card: Card }) => {
const spendingLimits = card.spendingLimits ?? [];
const cardHolderType = card.accountMembership.account?.holder.info.type;

return (
<Cell direction="column">
Expand Down Expand Up @@ -314,7 +316,7 @@ export const CardSummaryCell = ({ card }: { card: Card }) => {
ariaLabel={t("cards.format.virtual")}
/>

{isNotNullish(insuranceSubscription) && (
{isNotNullish(insuranceSubscription) && cardHolderType === "Company" && (
<>
<Space width={8} />

Expand Down Expand Up @@ -354,7 +356,7 @@ export const CardSummaryCell = ({ card }: { card: Card }) => {
.otherwise(() => undefined)}
</Tag>

{isNotNullish(insuranceSubscription) && (
{isNotNullish(insuranceSubscription) && cardHolderType === "Company" && (
<>
<Space width={8} />

Expand Down
7 changes: 1 addition & 6 deletions clients/banking/src/components/CardWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,12 +557,7 @@ export const CardWizard = ({
{match(step)
.with({ name: "CardProductType" }, ({ cardProduct }) => (
<CardWizardProduct
accountHolderType={
data?.accountMembership?.account?.holder.info.__typename ===
"AccountHolderCompanyInfo"
? "Company"
: "Individual"
}
accountHolderType={data?.accountMembership?.accountHolderType}
ref={cardWizardProductRef}
cardProducts={cardProducts}
initialCardProduct={cardProduct}
Expand Down
6 changes: 3 additions & 3 deletions clients/banking/src/components/CardWizardProduct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export type CardWizardProductRef = {

type Props = {
ref?: Ref<CardWizardProductRef>;
accountHolderType: AccountHolderType;
accountHolderType: AccountHolderType | undefined;
cardProducts: NonNullable<GetCardProductsQuery["projectInfo"]["cardProducts"]>;
initialCardProduct?: CardProduct;
onSubmit: (cardProduct: CardProduct) => void;
Expand Down Expand Up @@ -408,12 +408,12 @@ export const CardWizardProduct = ({
),
}),
)
.exhaustive()}
.otherwise(() => null)}
</LakeText>

<Space height={8} />

{defaultInsurancePackage != null && (
{defaultInsurancePackage != null && accountHolderType === "Company" && (
<Box direction="row" alignItems="center" justifyContent="center">
<Icon name="shield-checkmark-regular" size={16} color={colors.gray[500]} />
<Space width={8} />
Expand Down
2 changes: 2 additions & 0 deletions clients/banking/src/graphql/partner.gql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -817,6 +817,7 @@ fragment CardListItem on Card {
id
info {
name
type
}
}
}
Expand Down Expand Up @@ -1887,6 +1888,7 @@ query GetCardProducts(
}
accountMembership(id: $accountMembershipId) {
id
accountHolderType
account {
id
holder {
Expand Down