implement new api and logic

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx

@@ -6,8 +6,8 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import PaymentCard, {
-  getCardData,
-  Designs,
+  getCardDesign,
+  CustomCard,
   // ProductType,
   // CardType,
   // BankAxeptType,
@@ -17,7 +17,7 @@ import { H4 } from '@dnb/eufemia/src'
 export function PaymentCardAllCardsExample() {
   return (
     <ComponentBox
-      scope={{ PaymentCard, getCardData }}
+      scope={{ PaymentCard, getCardDesign }}
       data-visual-test="all-cards"
     >
       {() => {
@@ -70,15 +70,15 @@ export function PaymentCardAllCardsExample() {
         const Cards = () => (
           <>
             {demoCards.map((product_code) => {
-              const cardData = getCardData(product_code)
+              const cardData = getCardDesign(product_code)
               return (
                 <article key={product_code}>
                   <H4>
-                    {cardData.cardDesign.name}({product_code})
+                    {cardData.displayName}({product_code})
                   </H4>
                   <PaymentCard
-                    product_code={product_code}
-                    card_number="************1337"
+                    productCode={product_code}
+                    cardNumber="************1337"
                   />
                 </article>
               )
@@ -105,25 +105,23 @@ export const PaymentCardCustomExample = () => (
   <ComponentBox
     scope={{
       PaymentCard,
-      Designs,
+      // Designs,
       //   ProductType, CardType, BankAxeptType
     }}
   >
     {() => {
-      const customData = {
-        productCode: '',
-        productName: 'DNB Custom Card',
-        displayName: 'Custom card',
-        cardDesign: Designs.gold,
-        cardType: 'VisaColored',
-        productType: 'None',
-        bankAxept: 'BankAxeptWhite',
+      const customData: CustomCard = {
+        displayName: 'custom card',
+        bankLogo: { type: 'DNB' },
+        cardProvider: { type: 'Mastercard' },
+        paymentType: { type: 'BankAxept' },
+        background: 'gold',
       }
       return (
         <PaymentCard
-          product_code=""
-          raw_data={customData}
-          card_number="************1337"
+          productCode=""
+          customCard={customData}
+          cardNumber="************1337"
         />
       )
     }}
@@ -136,9 +134,9 @@ export const PaymentCardStatusExample = () => (
     data-visual-test="payment-card-status"
   >
     <PaymentCard
-      product_code="VG2"
-      card_status="blocked"
-      card_number="************1337"
+      productCode="VG2"
+      cardStatus="blocked"
+      cardNumber="************1337"
     />
   </ComponentBox>
 )
@@ -150,8 +148,8 @@ export const PaymentCardCompactExample = () => (
   >
     <PaymentCard
       variant="compact"
-      product_code="VG1"
-      card_number="************1337"
+      productCode="VG1"
+      cardNumber="************1337"
     />
   </ComponentBox>
 )

packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx

@@ -2,9 +2,9 @@ import classnames from 'classnames'
 import {
   BankLogo,
   ProductLogo,
-  BankAxeptLogo,
   StatusIcon,
   CardProviderLogo,
+  PaymentTypeLogo,
 } from './icons'
 import Context from '../../shared/Context'
 import {
@@ -19,24 +19,19 @@ import {
 import { useContext } from 'react'
 import { createSpacingClasses } from '../../components/space/SpacingUtils'
 import cardProducts from './utils/cardProducts'
-import { defaultDesign } from './utils/CardDesigns'
 import {
+  CustomCard,
   PaymentCardCardStatus,
   PaymentCardProps,
-  PaymentCardRawData,
 } from './types'
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'
+import { defaultDesign } from './utils/CardDesigns'
 
-const defaultCard: (productCode: string) => PaymentCardRawData = (
+const defaultCard: (productCode: string) => CustomCard = (
   productCode
 ) => ({
   productCode,
-  productName: '',
-  displayName: '',
-  cardDesign: defaultDesign,
-  cardType: 'None',
-  productType: 'None',
-  bankAxept: 'None',
+  ...defaultDesign,
 })
 
 const defaultProps = {
@@ -46,7 +41,9 @@ const defaultProps = {
   variant: 'normal',
 
   id: null,
-  rawData: null,
+
+  customCard: null,
+  // rawData: null,
 
   skeleton: false,
   className: null,
@@ -75,7 +72,8 @@ export default function PaymentCard(props: PaymentCardProps) {
     variant,
     digits,
     id,
-    rawData,
+    customCard: cardDesignProp,
+    // rawData,
     // locale,
     skeleton,
     className,
@@ -91,7 +89,12 @@ export default function PaymentCard(props: PaymentCardProps) {
     }
   )
 
-  const cardData: PaymentCardRawData = rawData || getCardData(productCode)
+  const cardDesign = {
+    ...getCardDesign(productCode),
+    ...cardDesignProp,
+  }
+
+  // const cardData: CustomCard = rawData || getCardData(productCode)
 
   const params = {
     className: classnames(
@@ -122,34 +125,29 @@ export default function PaymentCard(props: PaymentCardProps) {
   return (
     <figure {...params}>
       <figcaption className="dnb-sr-only dnb-payment-card__figcaption">
-        {cardData.productName}
+        {cardDesign.displayName}
       </figcaption>
       <div
         id={id}
         className={classnames(
           'dnb-payment-card__card',
-          `dnb-payment-card__${cardData.cardDesign.cardStyle}`
+          `dnb-payment-card__${cardDesign.cardClassName}` // kan denne overskrives?
         )}
-        {...(cardData.cardDesign.backgroundImage
+        {...(cardDesign.backgroundImage
           ? {
               style: {
-                backgroundImage: `url(${cardData.cardDesign.backgroundImage})`,
+                backgroundImage: `url(${cardDesign.backgroundImage})`,
               },
             }
           : {})}
       >
         <div className="dnb-payment-card__card__content">
           <div className="dnb-payment-card__card__top">
-            <BankLogo
-              logoType={cardData.cardDesign.bankLogo}
-              color={cardData.cardDesign.bankLogoColors}
-            />
-            <ProductLogo
-              productType={cardData.productType}
-              cardDesign={cardData.cardDesign.cardDesign}
-            />
-
-            <BankAxeptLogo bankAxept={cardData.bankAxept} />
+            <BankLogo {...cardDesign.bankLogo} />
+
+            <ProductLogo {...cardDesign.productType} />
+
+            <PaymentTypeLogo {...cardDesign.paymentType} />
           </div>
           <div className="dnb-payment-card__card__bottom">
             <span
@@ -168,10 +166,7 @@ export default function PaymentCard(props: PaymentCardProps) {
                 {formatCardNumber(cardNumber, digits)}
               </P>
             </span>
-            <CardProviderLogo
-              cardTypeDesign={cardData.cardType}
-              color={cardData.cardDesign.visaColors}
-            />
+            <CardProviderLogo {...cardDesign.cardProvider} />
           </div>
         </div>
 
@@ -216,11 +211,18 @@ export function formatCardNumber(cardNumber, digits = 8) {
   return cardNumber.replace(formatCardNumberRegex, ' ').trim()
 }
 
-export const getCardData: (productCode: string) => PaymentCardRawData = (
-  productCode
-) => {
-  const card = cardProducts.find(
-    (item) => item.productCode === productCode
+export function getCardDesign(productCode: string): CustomCard {
+  return (
+    cardProducts.find((item) => item.productCode === productCode) ||
+    defaultCard(productCode)
   )
-  return card || defaultCard(productCode)
 }
+
+// export const getCardData: (productCode: string) => PaymentCardRawData = (
+//   productCode
+// ) => {
+//   const card = cardProducts.find(
+//     (item) => item.productCode === productCode
+//   )
+//   return card || defaultCard(productCode)
+// }