feat(DebitCard): update usage of debit card iframe

blockchain · Nov 16, 2022 · c667230 · c667230
1 parent 65da9a3
commit c667230
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/...s/blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/CardDashboard.model.ts b/...s/blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/CardDashboard.model.ts
@@ -67,7 +67,7 @@ export const CardWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: start;
-  padding: 1rem 1.5rem;
+  padding: 1rem 0;
   font-family: 'Inter';
 `
 
@@ -80,12 +80,12 @@ export const CardListHeader = styled.div`
 `
 
 export const CardList = styled.div`
-  margin-right: 36px;
+  box-sizing: border-box;
   width: 100%;
-  display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: start;
+  padding: 0 1.5rem;
 `
 
 export const CardItem = styled.div`

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/CardDashboard.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/CardDashboard/CardDashboard.tsx
@@ -27,11 +27,11 @@ const CardDashboard = ({
   cards,
   debitCardActions,
   domains,
-  last4,
   lockHandler,
   modalActions,
   userData
 }) => {
+  const card = cards[0]
   const fullName = `${userData.firstName} ${userData.lastName}`
 
   return (
@@ -41,7 +41,7 @@ const CardDashboard = ({
           <CardWrapper>
             <Iframe
               id='marqeta-card-iframe'
-              src={`${domains.walletHelper}/wallet-helper/marqeta-card/#/${cardToken}/${last4}/${fullName}`}
+              src={`${domains.walletHelper}/wallet-helper/marqeta-card/#/?token=${cardToken}&last4=${card.last4}&fullName=${fullName}&cardType=${card.type}`}
             />
             <CardList>
               <CardListHeader>
@@ -59,7 +59,7 @@ const CardDashboard = ({
                     />
                   </CardItemTitle>
 
-                  <Last4Wrapper>***{last4}</Last4Wrapper>
+                  <Last4Wrapper>***{card.last4}</Last4Wrapper>
                 </CardItemBlock>
                 <CardStatus status={cards[0].status} />
               </CardItem>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/DebitCard.template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/DebitCard/DebitCard.template.tsx
@@ -69,7 +69,6 @@ const DebitCard = ({
           alertActions={alertActions}
           domains={domains}
           cardToken={cardToken}
-          last4={cards[0].last4}
           cards={cards}
           debitCardActions={debitCardActions}
           lockHandler={lockHandler}