fix(PaymentCard): removes excess space when formatting card number (#…

…2703)

packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts

@@ -124,5 +124,7 @@ export default class PaymentCard extends React.Component<
 export const getCardData: (
   product_code: string
 ) => Omit<PaymentCardRawData, 'cardDesign'> & { cardDesign: CardDesign };
-export const formatCardNumber = (cardNumber: string, digits?: number) =>
-  string;
+export const formatCardNumber: (
+  cardNumber: string,
+  digits?: number
+) => string;

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

@@ -181,12 +181,18 @@ export default class PaymentCard extends React.PureComponent {
 
 const formatCardNumberRegex = /(?=(?:....)*$)/g
 
-export const formatCardNumber = (cardNumber, digits) =>
-  digits
-    ? cardNumber
-        .slice(cardNumber.length - digits, cardNumber.length)
-        .replace(formatCardNumberRegex, ' ')
-    : cardNumber.replace(formatCardNumberRegex, ' ')
+export const formatCardNumber = (cardNumber, digits = 8) => {
+  if (!cardNumber) {
+    return cardNumber
+  }
+  if (digits && digits <= cardNumber.length) {
+    return cardNumber
+      .slice(cardNumber.length - digits, cardNumber.length)
+      .replace(formatCardNumberRegex, ' ')
+      .trim()
+  }
+  return cardNumber.replace(formatCardNumberRegex, ' ').trim()
+}
 
 export const getCardData = (productCode) => {
   const card = cardProducts.find(

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

@@ -11,6 +11,7 @@ import PaymentCard, {
   CardType,
   PaymentCardProps,
   BankAxeptType,
+  formatCardNumber,
 } from '../PaymentCard'
 import nbNO from '../../../shared/locales/nb-NO'
 import enGB from '../../../shared/locales/en-GB'
@@ -126,6 +127,70 @@ describe('PaymentCard', () => {
   })
 })
 
+describe('Helper functions', () => {
+  describe('formatCardNumber', () => {
+    it('should format card number', () => {
+      const result = formatCardNumber('************1337')
+      expect(result).toEqual('**** 1337')
+    })
+
+    it('should not break when provided with empty string as value', () => {
+      const result = formatCardNumber('')
+      expect(result).toEqual('')
+    })
+
+    it('should not break when provided with null as value', () => {
+      const result = formatCardNumber(null)
+      expect(result).toEqual(null)
+    })
+
+    it('should format card number to a certain length of 8', () => {
+      const result = formatCardNumber('************1337', 8)
+      expect(result).toEqual('**** 1337')
+    })
+
+    it('should format card number to a certain length of 6', () => {
+      const result = formatCardNumber('************1337', 6)
+      expect(result).toEqual('** 1337')
+    })
+
+    it('should format card number to a certain length of 4', () => {
+      const result = formatCardNumber('************1337', 4)
+      expect(result).toEqual('1337')
+    })
+
+    it('should format card number to a certain length of 1', () => {
+      const result = formatCardNumber('************1337', 1)
+      expect(result).toEqual('7')
+    })
+
+    it('should not break when provided with empty string and a digit', () => {
+      const result = formatCardNumber('', 8)
+      expect(result).toEqual('')
+    })
+
+    it('should not break when provided with a null and a digit', () => {
+      const result = formatCardNumber(null, 8)
+      expect(result).toEqual(null)
+    })
+
+    it('should format when digits is same as card number length', () => {
+      const result = formatCardNumber('**1337', 6)
+      expect(result).toEqual('** 1337')
+    })
+
+    it('should format as without digit, when provided with a digit of 0', () => {
+      const result = formatCardNumber('************1337', 0)
+      expect(result).toEqual('**** **** **** 1337')
+    })
+
+    it('should format as without digit, when provided with a digit greater than the characters in card number', () => {
+      const result = formatCardNumber('**1337', 8)
+      expect(result).toEqual('** 1337')
+    })
+  })
+})
+
 describe('PaymentCard scss', () => {
   it('has to match style dependencies css', () => {
     const css = loadScss(require.resolve('../style/deps.scss'))