Update card designs type

Update all card styles to match the old
dnbexperience · May 29, 2024 · ef394c1 · ef394c1
1 parent 3e3b869
commit ef394c1
Show file tree

Hide file tree

Showing 5 changed files with 583 additions and 614 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx
@@ -3,7 +3,6 @@ import {
   BankLogo,
   ProductLogo,
   BankAxeptLogo,
-  TypeLogo,
   StatusIcon,
   CardProviderLogo,
 } from './icons'
@@ -26,6 +25,7 @@ import {
   PaymentCardProps,
   PaymentCardRawData,
 } from './types'
+import { getTranslation } from '../../shared/Translation'
 
 const defaultCard: (productCode: string) => PaymentCardRawData = (
   productCode
@@ -65,7 +65,8 @@ const defaultProps = {
 }
 
 export function PaymentCard(props: PaymentCardProps) {
-  const context = useContext(Context).PaymentCard
+  const context = useContext(Context)
+
   // const translations = context.getTranslation(props)
 
   const {
@@ -82,40 +83,33 @@ export function PaymentCard(props: PaymentCardProps) {
     class: _className,
     children, //eslint-disable-line
 
-    // text_card_number,
-    // text_expired,
-    // text_blocked,
-    // text_not_active,
-    // text_order_in_process,
-    // text_renewed,
-    // text_replaced,
-    // text_unknown,
+    text_card_number,
+    text_expired,
+    text_blocked,
+    text_not_active,
+    text_order_in_process,
+    text_renewed,
+    text_replaced,
+    text_unknown,
 
     ...attributes
-  } = extendPropsWithContext(
-    props,
-    defaultProps,
-    // { translations },
-    {
-      skeleton: context?.skeleton,
-    }
-  )
+  } = extendPropsWithContext(props, defaultProps, context?.PaymentCard, {
+    skeleton: context?.skeleton,
+  })
 
   const cardData: PaymentCardRawData =
     raw_data || getCardData(product_code)
 
-  console.log('cardData', cardData)
-
-  // const translations = {
-  //   text_card_number,
-  //   text_expired,
-  //   text_blocked,
-  //   text_not_active,
-  //   text_order_in_process,
-  //   text_renewed,
-  //   text_replaced,
-  //   text_unknown,
-  // }
+  const translations = {
+    text_card_number,
+    text_expired,
+    text_blocked,
+    text_not_active,
+    text_order_in_process,
+    text_renewed,
+    text_replaced,
+    text_unknown,
+  }
 
   const params = {
     className: classnames(
@@ -135,13 +129,13 @@ export function PaymentCard(props: PaymentCardProps) {
   validateDOMAttributes(props, params)
 
   const cardStatusMap = {
-    not_active: 'not_active', // 'translations.text_not_active',
-    order_in_process: 'order_in_process', // 'translations.text_order_in_process',
-    renewed: 'renewed', // 'translations.text_renewed',
-    replaced: 'replaced', // 'translations.text_replaced',
-    blocked: 'blocked', // 'translations.text_blocked',
-    expired: 'expired', // 'translations.text_expired',
-    unknown: 'unknown', // 'translations.text_unknown',
+    not_active: translations.text_not_active,
+    order_in_process: translations.text_order_in_process,
+    renewed: translations.text_renewed,
+    replaced: translations.text_replaced,
+    blocked: translations.text_blocked,
+    expired: translations.text_expired,
+    unknown: translations.text_unknown,
   }
 
   return (
@@ -167,21 +161,14 @@ export function PaymentCard(props: PaymentCardProps) {
           <div className="dnb-payment-card__card__top">
             <BankLogo
               logoType={cardData.cardDesign.bankLogo}
-              height={undefined}
+              color={cardData.cardDesign.bankLogoColors}
             />
             <ProductLogo
               productType={cardData.productType}
               cardDesign={cardData.cardDesign.cardDesign}
             />
 
-            {/* 
-             productType: ProductType
-              cardDesign: CardDesign
-             */}
-            <BankAxeptLogo
-              bankAxept={cardData.bankAxept}
-              // cardDesign={cardData.cardDesign}
-            />
+            <BankAxeptLogo bankAxept={cardData.bankAxept} />
           </div>
           <div className="dnb-payment-card__card__bottom">
             <span

diff --git a/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx b/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx
@@ -14,6 +14,7 @@ import '../style/themes/ui'
 import { PaymentCard, getCardData } from './../PaymentCard' // BankAxeptType, // ProductType, // getCardData,
 import H3 from '../../../elements/H3'
 import cardData from '../utils/cardProducts'
+import { PaymentCardRawData } from '../types'
 
 export default {
   title: 'Eufemia/Extensions/PaymentCard',
@@ -23,15 +24,16 @@ const CustomWrapper = styled(Wrapper)`
   /* empty */
 `
 
-// const customData = {
-//   productCode: 'UNDEFINED',
-//   productName: 'DNB Custom Card',
-//   displayName: 'Custom card', // Only showed in compact variant
-//   cardDesign: 'gold',
-//   cardType: 'Visa',
-//   productType: 'Business',
-//   bankAxept: 'BankAxept',
-// }
+const customData: PaymentCardRawData = {
+  productCode: 'UNDEFINED',
+  productName: 'DNB Custom Card',
+  displayName: 'Custom card', // Only showed in compact variant
+  // cardDesign: 'gold',
+  cardDesign: { cardDesign: 'SagaGold' },
+  cardType: 'VisaColored',
+  productType: 'Business',
+  bankAxept: 'BankAxeptBlack',
+}
 
 export const PaymentCards = () => (
   <CustomWrapper className="dnb-spacing">
@@ -48,9 +50,9 @@ export const PaymentCards = () => (
       />
     </Box>
 
-    {/* <Box>
+    <Box>
       <PaymentCard
-        locale="en-GB"
+        // locale="en-GB"
         product_code="DNB"
         card_number="************1337"
         card_status="expired"
@@ -71,7 +73,7 @@ export const PaymentCards = () => (
         variant="compact"
         card_number="************1337"
       />
-    </Box> */}
+    </Box>
 
     <Box>
       {cards.map((product_code) => {

diff --git a/packages/dnb-eufemia/src/extensions/payment-card/types.ts b/packages/dnb-eufemia/src/extensions/payment-card/types.ts
@@ -49,11 +49,11 @@ export type PaymentCardRawData = {
 }
 
 export type CardDesignData = {
-  name: string
-  cardStyle: string
-  bankLogo: LogoType
-  cardType: CardTypeDesign
-  bankAxept: BankAxeptType
+  name?: string
+  cardStyle?: string
+  bankLogo?: LogoType
+  cardType?: CardTypeDesign
+  bankAxept?: BankAxeptType
   cardStatus?: CardStatus
   productType?: ProductType
   cardDesign?: CardDesign