From 1c95df10ffd57a92b42f45770e303edec73182db Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Mon, 23 Oct 2023 13:10:26 +0200 Subject: [PATCH 01/14] add new types for card status --- .../dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts index 55a7b90924c..0dd5d371310 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts +++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts @@ -7,7 +7,10 @@ export type PaymentCardCardStatus = | 'active' | 'blocked' | 'expired' - | 'not_active'; + | 'not_active' + | 'order_in_process' + | 'renewed' + | 'replaced'; export type PaymentCardVariant = 'normal' | 'compact'; export type PaymentCardDigits = string | number; export enum CardType { From 2cf39fefbd6fbeb51845c32a2be13361afc9f356 Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Mon, 23 Oct 2023 13:11:01 +0200 Subject: [PATCH 02/14] add translation props --- .../extensions/payment-card/PaymentCard.js | 54 ++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js index e58fe97fdde..1ecbc24abc6 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js @@ -51,6 +51,9 @@ const translationDefaultPropsProps = { text_expired: null, text_blocked: null, text_not_active: null, + text_order_in_process: null, + text_renewed: null, + text_replaced: null } export default class PaymentCard extends React.PureComponent { @@ -59,7 +62,10 @@ export default class PaymentCard extends React.PureComponent { static propTypes = { product_code: PropTypes.string.isRequired, card_number: PropTypes.string.isRequired, - card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active']), + card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active', + 'order_in_process', + 'renewed', + 'replaced']), variant: PropTypes.oneOf(['normal', 'compact']), digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), raw_data: cardDataPropTypes, @@ -225,6 +231,52 @@ function StatusOverlay({ cardStatus, translations, skeleton }) { ) + + case 'order_in_process': + return ( +
+
+ +

{translations.text_order_in_process}

+
+
+ ) + + case 'renewed': + return ( +
+
+ +

{translations.text_renewed}

+
+
+ ) + + case 'replaced': + return ( +
+
+ +

{translations.text_replaced}

+
+
+ ) + case 'blocked': return (
Date: Mon, 23 Oct 2023 13:11:12 +0200 Subject: [PATCH 03/14] add the status in test file --- .../__tests__/PaymentCard.test.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx index 32dbaf37fb8..eb1d062cf09 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx +++ b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx @@ -73,6 +73,28 @@ describe('PaymentCard', () => { expect(screen.queryByText(nb.text_not_active)).toBeInTheDocument() }) + it('has correct renewed status', () => { + render() + + expect(screen.queryByText(nb.text_renewed)).toBeInTheDocument() + }) + + it('has correct replaced status', () => { + render() + + expect(screen.queryByText(nb.text_replaced)).toBeInTheDocument() + }) + + it('has correct order_in_process status', () => { + render( + + ) + + expect( + screen.queryByText(nb.text_order_in_process) + ).toBeInTheDocument() + }) + it('has correct blocked status', () => { render() From 0b6c5366ebacb6e48cd8cfcf3abd362990e9a2a0 Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Mon, 23 Oct 2023 13:11:22 +0200 Subject: [PATCH 04/14] the hourglass icon --- .../payment-card/icons/Hourglass.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx new file mode 100644 index 00000000000..180d35f69d1 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx @@ -0,0 +1,21 @@ +import React from 'react' +const Hourglass = (props) => ( + + Under behandling + + +) +export default Hourglass From 7525047d98134aa5b65d61acc7962dc0546a951f Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Mon, 23 Oct 2023 13:11:37 +0200 Subject: [PATCH 05/14] add new switch case for statuses --- .../src/extensions/payment-card/icons/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js index 9a64335b52e..6a555e9706c 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js @@ -4,7 +4,7 @@ import BankAxept from './BankAxept' import DNB from './DNB' import Expired from './Clock' import Blocked from './Padlock' -import NotActive from './CardIn' +import CardIn from './CardIn' import MastercardDefault from './MastercardDefault' import MastercardDark from './MastercardDark' import Pluss from './Pluss' @@ -16,6 +16,7 @@ import SagaGold from './SagaGold' import SagaPlatinum from './SagaPlatinum' import VisaDefault from './VisaDefault' import VisaPlatinum from './VisaPlatinum' +import Hourglass from './Hourglass' const BankLogo = ({ logoType, height }) => logoType.cata({ @@ -71,10 +72,19 @@ const StatusIcon = ({ status }) => { return case 'not_active': - return + return case 'blocked': return + + case 'order_in_process': + return + + case 'renewed': + return + + case 'replaced': + return case 'active': default: From 7bcb9b8fa6bd82bb8724e01b2ab93771eaa7e68a Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Mon, 23 Oct 2023 13:11:51 +0200 Subject: [PATCH 06/14] add translation in NO/EN --- packages/dnb-eufemia/src/shared/locales/en-GB.js | 3 +++ packages/dnb-eufemia/src/shared/locales/nb-NO.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/dnb-eufemia/src/shared/locales/en-GB.js b/packages/dnb-eufemia/src/shared/locales/en-GB.js index 4188ec4b62d..36e10c92322 100644 --- a/packages/dnb-eufemia/src/shared/locales/en-GB.js +++ b/packages/dnb-eufemia/src/shared/locales/en-GB.js @@ -116,6 +116,9 @@ export default { text_expired: 'Expired', text_blocked: 'Blocked', text_not_active: 'Not activated', + text_order_in_process: 'Order in process', + text_renewed: 'Renewed', + text_replaced: 'Replaced', }, Logo: { alt: 'DNB Logo', diff --git a/packages/dnb-eufemia/src/shared/locales/nb-NO.js b/packages/dnb-eufemia/src/shared/locales/nb-NO.js index 131b4765862..a7c7b9a02c9 100644 --- a/packages/dnb-eufemia/src/shared/locales/nb-NO.js +++ b/packages/dnb-eufemia/src/shared/locales/nb-NO.js @@ -116,6 +116,9 @@ export default { text_expired: 'Utgått', text_blocked: 'Sperret', text_not_active: 'Ikke aktivert', + text_order_in_process: 'Under behandling', + text_renewed: 'Fornyet', + text_replaced: 'Erstattet', }, Logo: { alt: 'DNB Logo', From 0e176682e49ad58b9e01423c84c0a421054a925c Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Mon, 23 Oct 2023 13:15:53 +0200 Subject: [PATCH 07/14] add property md file --- .../src/docs/uilib/extensions/payment-card/properties.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx index 7cc96eff968..8a2408b619a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx @@ -8,7 +8,7 @@ showTabs: true | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | `product_code` | _(required)_ if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used. | | `raw_data` | _(optional)_ useful if you want to create custom cards. See Card data properties. | -| `card_status` | _(optional)_ use one of these: `active`, `not_active`, `blocked`, `expired`. Defaults to `active`. | +| `card_status` | _(optional)_ use one of these: `active`, `not_active`, `blocked`, `expired`, `renewed`, `replaced`, `order_in_process`. Defaults to `active`. | | `variant` | _(optional)_ defines the appearance. Use one of these: `normal` or `compact`. Defaults to `normal`. | | `digits` | _(optional)_ will use 8 digits if none are specified. | | `card_number` | _(optional)_ masked card number. | From 4784a1ed2218da5e00630a441d4f137222f5aa60 Mon Sep 17 00:00:00 2001 From: dsa015 <91134700+dsa015@users.noreply.github.com> Date: Tue, 24 Oct 2023 08:33:06 +0200 Subject: [PATCH 08/14] Update properties mdx import back to layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tobias Høegh --- .../src/docs/uilib/extensions/payment-card/properties.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx index 8a2408b619a..b6cc4e8ee2c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx @@ -14,7 +14,7 @@ showTabs: true | `card_number` | _(optional)_ masked card number. | | `locale` | _(optional)_ use `nb-NO` or `en-GB`. Defaults to the Eufemia provider. | | `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | -| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | +| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | ## Card Data From 8d1e09b03a045379e7a1be3a7ee7503f080df8ed Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Tue, 24 Oct 2023 10:58:23 +0200 Subject: [PATCH 09/14] reviews: removed icons, use existing one --- .../extensions/payment-card/icons/CardIn.tsx | 21 ----------------- .../payment-card/icons/Hourglass.tsx | 21 ----------------- .../extensions/payment-card/icons/Padlock.tsx | 23 ------------------- 3 files changed, 65 deletions(-) delete mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/CardIn.tsx delete mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx delete mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/Padlock.tsx diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/CardIn.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/CardIn.tsx deleted file mode 100644 index 0608bf4bbec..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/CardIn.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -const CardIn = (props) => ( - - Kort In - - -) -export default CardIn diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx deleted file mode 100644 index 180d35f69d1..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/Hourglass.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -const Hourglass = (props) => ( - - Under behandling - - -) -export default Hourglass diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Padlock.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/Padlock.tsx deleted file mode 100644 index 1fc07609ae7..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/Padlock.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' - -const Padlock = (props: React.SVGProps) => ( - - Hengelås - - -) - -export default Padlock From a8e5d0a7b6628ae54f005b6288c0c69162d132fd Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Tue, 24 Oct 2023 10:58:45 +0200 Subject: [PATCH 10/14] review: update import and give icon colour white --- .../extensions/payment-card/icons/index.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js index 6a555e9706c..69571220712 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js @@ -2,9 +2,9 @@ import React from 'react' import BankAxept from './BankAxept' import DNB from './DNB' -import Expired from './Clock' -import Blocked from './Padlock' -import CardIn from './CardIn' +import { clock_medium as Expired } from '../../../icons' +import { padlock_medium as Blocked } from '../../../icons' +import { card_in_medium as CardIn } from '../../../icons' import MastercardDefault from './MastercardDefault' import MastercardDark from './MastercardDark' import Pluss from './Pluss' @@ -16,8 +16,7 @@ import SagaGold from './SagaGold' import SagaPlatinum from './SagaPlatinum' import VisaDefault from './VisaDefault' import VisaPlatinum from './VisaPlatinum' -import Hourglass from './Hourglass' - +import { hourglass as Hourglass } from '../../../icons' const BankLogo = ({ logoType, height }) => logoType.cata({ Colored: (color) => ( @@ -69,22 +68,22 @@ const BankAxeptLogo = ({ bankAxept, cardDesign }) => { const StatusIcon = ({ status }) => { switch (status) { case 'expired': - return + return case 'not_active': - return + return case 'blocked': - return + return case 'order_in_process': - return + return case 'renewed': - return + return case 'replaced': - return + return case 'active': default: From 4c4c6cdefe230ab08953c6d3dcfd4cde3976e2aa Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Tue, 24 Oct 2023 10:59:09 +0200 Subject: [PATCH 11/14] refactor: give props option and default value --- packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx | 2 +- packages/dnb-eufemia/src/icons/dnb/clock_medium.tsx | 2 +- packages/dnb-eufemia/src/icons/dnb/hourglass.tsx | 2 +- packages/dnb-eufemia/src/icons/dnb/padlock_medium.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx b/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx index 98a93b08f49..ab729e36821 100644 --- a/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx +++ b/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx @@ -11,7 +11,7 @@ const card_in_medium = (props) => ( {...props} > ( {...props} > ( > ( {...props} > Date: Tue, 24 Oct 2023 10:59:29 +0200 Subject: [PATCH 12/14] review: use shared component instead --- .../extensions/payment-card/PaymentCard.js | 97 ++++++------------- 1 file changed, 29 insertions(+), 68 deletions(-) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js index b70afe934e7..41dd2ac59af 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js @@ -2,7 +2,6 @@ * Web PaymentCard Component * */ - import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' @@ -221,96 +220,58 @@ StatusOverlay.defaultProps = { skeleton: false, } -function StatusOverlay({ cardStatus, translations, skeleton }) { + + +const BlockingOverlay = ({cardStatus, text}, skeleton) => { + return ( +
+
+ +

{text}

+
+
+ ) + +} + +function StatusOverlay({ cardStatus, translations}) { switch (cardStatus) { case 'not_active': return ( -
-
- -

{translations.text_not_active}

-
-
+ ) case 'order_in_process': return ( -
-
- -

{translations.text_order_in_process}

-
-
+ ) case 'renewed': return ( -
-
- -

{translations.text_renewed}

-
-
+ + ) case 'replaced': return ( -
-
- -

{translations.text_replaced}

-
-
+ + ) case 'blocked': return ( -
-
- -

{translations.text_blocked}

-
-
+ + ) case 'expired': return ( -
-
- -

{translations.text_expired}

-
-
+ ) case 'active': From 9b56f6d933d7a0c447676524dc64f48f19831088 Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Tue, 31 Oct 2023 12:52:19 +0100 Subject: [PATCH 13/14] fix: remove stroke prop --- .../src/extensions/payment-card/icons/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js index 69571220712..c9a6702fadd 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js @@ -5,6 +5,7 @@ import DNB from './DNB' import { clock_medium as Expired } from '../../../icons' import { padlock_medium as Blocked } from '../../../icons' import { card_in_medium as CardIn } from '../../../icons' +import { hourglass as Hourglass } from '../../../icons' import MastercardDefault from './MastercardDefault' import MastercardDark from './MastercardDark' import Pluss from './Pluss' @@ -16,7 +17,6 @@ import SagaGold from './SagaGold' import SagaPlatinum from './SagaPlatinum' import VisaDefault from './VisaDefault' import VisaPlatinum from './VisaPlatinum' -import { hourglass as Hourglass } from '../../../icons' const BankLogo = ({ logoType, height }) => logoType.cata({ Colored: (color) => ( @@ -68,22 +68,22 @@ const BankAxeptLogo = ({ bankAxept, cardDesign }) => { const StatusIcon = ({ status }) => { switch (status) { case 'expired': - return + return case 'not_active': - return + return case 'blocked': - return + return case 'order_in_process': - return + return case 'renewed': - return + return case 'replaced': - return + return case 'active': default: From f5f9ad10951f16984a6edb1b62ffd055ed98dae4 Mon Sep 17 00:00:00 2001 From: "Diluxan.Sathalingam" Date: Tue, 31 Oct 2023 12:52:55 +0100 Subject: [PATCH 14/14] refactor: remove uncessary prop check --- packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx | 2 +- packages/dnb-eufemia/src/icons/dnb/clock_medium.tsx | 2 +- packages/dnb-eufemia/src/icons/dnb/hourglass.tsx | 2 +- packages/dnb-eufemia/src/icons/dnb/padlock_medium.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx b/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx index ab729e36821..f7aa96c9d61 100644 --- a/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx +++ b/packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx @@ -11,7 +11,7 @@ const card_in_medium = (props) => ( {...props} > ( {...props} > ( > ( {...props} >