Web banking - Add permissions to display digital card (#1046)

* Web banking - Add permissions to display digital card * fix logic
swan-io · Dec 5, 2024 · 53f64c0 · 53f64c0
1 parent 7b32983
commit 53f64c0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/clients/banking/src/components/CardItemArea.tsx b/clients/banking/src/components/CardItemArea.tsx
@@ -54,7 +54,7 @@ export const CardItemArea = ({ accountMembershipId, userId, cardId, large = true
     "AccountCardsItemOrderAddress",
   ]);
 
-  const { canPrintPhysicalCard } = usePermissions();
+  const { canPrintPhysicalCard, canReadOtherMembersCards } = usePermissions();
   const [data, { refresh }] = useQuery(CardPageDocument, { cardId });
 
   useCrumb(
@@ -135,8 +135,12 @@ export const CardItemArea = ({ accountMembershipId, userId, cardId, large = true
                     },
                   ]
                 : []),
-              ...match({ isCurrentUserCardOwner, card })
+              ...match({ isCurrentUserCardOwner, card, canReadOtherMembersCards })
                 .with(
+                  {
+                    canReadOtherMembersCards: true,
+                    card: { type: P.not("SingleUseVirtual") },
+                  },
                   { isCurrentUserCardOwner: true, card: { type: P.not("SingleUseVirtual") } },
                   () => [
                     {
@@ -229,6 +233,7 @@ export const CardItemArea = ({ accountMembershipId, userId, cardId, large = true
                   <Space height={24} />
 
                   <CardItemMobilePayment
+                    isCurrentUserCardOwner={isCurrentUserCardOwner}
                     card={card}
                     onRefreshRequest={() => {
                       refresh();

diff --git a/clients/banking/src/components/CardItemMobilePayment.tsx b/clients/banking/src/components/CardItemMobilePayment.tsx
@@ -43,9 +43,11 @@ type CompleteDigitalCard = DigitalCardFragment & { __typename: "CompleteDigitalC
 
 const DigitalCardTile = ({
   digitalCard,
+  isCurrentUserCardOwner,
   onPressCancel,
 }: {
   digitalCard: CompleteDigitalCard;
+  isCurrentUserCardOwner: boolean;
   onPressCancel: () => void;
 }) => {
   const deviceName = digitalCard.device.name ?? t("card.mobilePayment.unnamed");
@@ -84,25 +86,32 @@ const DigitalCardTile = ({
           </LakeText>
         </View>
 
-        <LakeTooltip placement="left" content={t("card.mobilePayment.disconnect")}>
-          <LakeButton
-            mode="tertiary"
-            ariaLabel={t("card.mobilePayment.cancel")}
-            icon="subtract-circle-regular"
-            onPress={onPressCancel}
-          />
-        </LakeTooltip>
+        {isCurrentUserCardOwner && (
+          <LakeTooltip placement="left" content={t("card.mobilePayment.disconnect")}>
+            <LakeButton
+              mode="tertiary"
+              ariaLabel={t("card.mobilePayment.cancel")}
+              icon="subtract-circle-regular"
+              onPress={onPressCancel}
+            />
+          </LakeTooltip>
+        )}
       </Box>
     </Tile>
   );
 };
 
 type Props = {
   card: Card;
+  isCurrentUserCardOwner: boolean;
   onRefreshRequest: () => void;
 };
 
-export const CardItemMobilePayment = ({ card, onRefreshRequest }: Props) => {
+export const CardItemMobilePayment = ({
+  card,
+  onRefreshRequest,
+  isCurrentUserCardOwner,
+}: Props) => {
   const [cancelConfirmationModalModal, setCancelConfirmationModalModal] = useState<
     Option<CompleteDigitalCard>
   >(Option.None());
@@ -152,6 +161,7 @@ export const CardItemMobilePayment = ({ card, onRefreshRequest }: Props) => {
           digitalCards.map(digitalCard => (
             <Fragment key={digitalCard.id}>
               <DigitalCardTile
+                isCurrentUserCardOwner={isCurrentUserCardOwner}
                 digitalCard={digitalCard}
                 onPressCancel={() => setCancelConfirmationModalModal(Option.Some(digitalCard))}
               />