Skip to content

Commit

Permalink
BKNDLSS-34512 [SUPPORT] How to pre-populate credit card component (#887)
Browse files Browse the repository at this point in the history 
* BKNDLSS-34512 [SUPPORT] How to pre-populate credit card component

* update descriptions

---------

Co-authored-by: serhiy.melnychuk <[email protected]>
Co-authored-by: Dmytro Vakuliuk <[email protected]>
  • Loading branch information
@serhmel @v-excelsior
3 people authored Jan 15, 2024
1 parent b7e4135 commit b64780f
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 45 deletions.
28 changes: 16 additions & 12 deletions components/bl-credit-card/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,22 @@ View an example of how to install this component and how it works in your UI [he

## Properties

| Property | Type | Default value | Logic | Data Binding | UI Setting | Description |
|-----------------------------------|-----------------------------------------------------------------------|-------------------|-------|--------------|------------|---------------------------------------------------------------|
| Card Preview Visibility | *Checkbox* | `true` | | NO | YES | Enables showing preview of the credit card. |
| CVC Visibility | *Checkbox* | `true` | | NO | YES | Enables showing CVC numbers of the credit card. |
| Direction | *Select* <br/> "Row" \| "Row reverse" \| "Column" \| "Column reverse" | "Column" | | NO | YES | Controls the direction of the component. |
| Labels Visibility | *Checkbox* | `true` | | NO | YES | Enables showing labels of the form fields. |
| Submit Button Label | *Text* | "Pay" | | NO | YES | Controls the label of the submit button. |
| Card Number Field Placeholder | *Text* | "Card Number" | | NO | YES | Controls the placeholder for the card number entry field. |
| Cardholder Name Field Placeholder | *Text* | "Cardholder Name" | | NO | YES | Controls the placeholder for the cardholder name entry field. |
| Expiry Field Placeholder | *Text* | "MM / YY" | | NO | YES | Controls the placeholder for the card expiration entry field. |
| CVC Field Placeholder | *Text* | "CVC" | | NO | YES | Controls the placeholder for the CVC entry field. |
| Cardholder Name Field Visibility | *Checkbox* | `true` | | NO | YES | Enables showing Cardholder Name field in the card form. |
| Property | Type | Default value | Logic | Data Binding | UI Setting | Description |
|-----------------------------------|-----------------------------------------------------------------------|-------------------|-----------------------------------------|--------------|------------|--------------------------------------------------------------------------------------------------|
| Card Preview Visibility | *Checkbox* | `true` | Card Preview Visibility Logic | YES | YES | Enables showing preview of the credit card. |
| CVC Visibility | *Checkbox* | `true` | CVC Visibility Logic | YES | YES | Enables showing CVC numbers of the credit card. |
| Direction | *Select* <br/> "Row" \| "Row reverse" \| "Column" \| "Column reverse" | "Column" | | NO | YES | Controls the direction of the component. |
| Labels Visibility | *Checkbox* | `true` | Labels Visibility Logic | YES | YES | Enables showing labels of the form fields. |
| Submit Button Label | *Text* | "Pay" | Submit Button Label Logic | YES | YES | Controls the label of the submit button. |
| Cardholder Name Field Visibility | *Checkbox* | `true` | Cardholder Name Field Visibility Logic | YES | YES | Enables showing Cardholder Name field in the card form. |
| Card Number Field Placeholder | *Text* | "Card Number" | Card Number Field Placeholder Logic | YES | YES | Controls the placeholder for the card number entry field. |
| Cardholder Name Field Placeholder | *Text* | "Cardholder Name" | Cardholder Name Field Placeholder Logic | YES | YES | Controls the placeholder for the cardholder name entry field. |
| Expiry Field Placeholder | *Text* | "MM / YY" | Expiry Field Placeholder Logic | YES | YES | Controls the placeholder for the card expiration entry field. |
| CVC Field Placeholder | *Text* | "CVC" | CVC Field Placeholder Logic | YES | YES | Controls the placeholder for the CVC entry field. |
| Initial Card Number | *Text* | | Initial Card Number Logic | YES | YES | Defines the initial value for the card number entry field. |
| Initial Cardholder Name | *Text* | | Initial Cardholder Name Logic | YES | YES | Defines the initial value for the cardholder name entry field. |
| Initial Expiry | *Text* | | Initial Expiry Logic | YES | YES | Defines the initial value for the card expiration entry field. Set expiration in 'MM/YY' format. |
| Initial CVC | *Text* | | Initial CVC Logic | YES | YES | Defines the initial value for the CVC number entry field. |

## Events

Expand Down
121 changes: 98 additions & 23 deletions components/bl-credit-card/component.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,26 @@
"name": "cardPreviewVisibility",
"label": "Card Preview Visibility",
"showInSettings": true,
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "cardPreviewVisibilityLogic",
"defaultValue": true,
"settingTooltip": "Select to display a preview of the card."
"settingTooltip": "Select to display a preview of the credit card.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine if the credit card preview should be visible.",
"handlerLabel": "Card Preview Visibility Logic"
},
{
"type": "checkbox",
"name": "cvcVisibility",
"label": "CVC Visibility",
"showInSettings": true,
"defaultValue": true,
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "cvcVisibilityLogic",
"settingTooltip": "Select to display digits of the credit card CVC number."
"settingTooltip": "Select to display digits of the credit card CVC number.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine if the CVC number should be visible. If the handler returns 'false' digits will be hidden.",
"handlerLabel": "CVC Visibility Logic"
},
{
"type": "select",
Expand Down Expand Up @@ -62,69 +68,138 @@
"label": "Labels Visibility",
"showInSettings": true,
"defaultValue": true,
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "labelsVisibilityLogic",
"settingTooltip": "Select to display labels of the form fields."
"settingTooltip": "Select to display labels of the form fields.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine if the labels of the form fields should be visible.",
"handlerLabel": "Labels Visibility Logic"
},
{
"type": "text",
"name": "submitButtonLabel",
"label": "Submit Button Label",
"showInSettings": true,
"defaultValue": "Pay",
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "submitButtonLabelLogic",
"settingTooltip": "Define the label of the submit button."
"settingTooltip": "Define the label of the submit button.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine the label of the submit button.",
"handlerLabel": "Submit Button Label Logic"
},
{
"type": "checkbox",
"name": "cardholderNameFieldVisibility",
"label": "Cardholder Name Field Visibility",
"showInSettings": true,
"defaultValue": true,
"hasLogicHandler": true,
"handlerId": "cardholderNameFieldVisibilityLogic",
"settingTooltip": "Select to display the cardholder name field.",
"dataBinding": true,
"handlerLabel": "Cardholder Name Field Visibility Logic",
"handlerDescription": "This is a handler for the logic to determine if the cardholder name field should be visible."
},
{
"type": "text",
"name": "cardNumberFieldPlaceholder",
"label": "Card Number Field Placeholder",
"showInSettings": true,
"defaultValue": "Card Number",
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "cardNumberFieldPlaceholderLogic",
"settingTooltip": "Define the placeholder for the card number field."
"settingTooltip": "Define the placeholder for the card number field.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine the placeholder for the card number entry field.",
"handlerLabel": "Card Number Field Placeholder Logic"
},
{
"type": "text",
"name": "cardholderNameFieldPlaceholder",
"label": "Cardholder Name Field Placeholder",
"showInSettings": true,
"defaultValue": "Cardholder Name",
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "cardholderNameFieldPlaceholderLogic",
"settingTooltip": "Define the placeholder for the cardholder name field."
"settingTooltip": "Define the placeholder for the cardholder name field.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine the placeholder for the cardholder name entry field.",
"handlerLabel": "Cardholder Name Field Placeholder Logic"
},
{
"type": "text",
"name": "expiryFieldPlaceholder",
"label": "Expiry Field Placeholder",
"showInSettings": true,
"defaultValue": "MM / YY",
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "expiryFieldPlaceholderLogic",
"settingTooltip": "Define the placeholder for the card expiration field."
"settingTooltip": "Define the placeholder for the card expiration field.",
"dataBinding": true,
"handlerDescription": "This is a handler for the logic to determine the placeholder for the card expiration entry field.",
"handlerLabel": "Expiry Field Placeholder Logic"
},
{
"type": "text",
"name": "cvcFieldPlaceholder",
"label": "CVC Field Placeholder",
"showInSettings": true,
"defaultValue": "CVC",
"hasLogicHandler": false,
"hasLogicHandler": true,
"handlerId": "cvcFieldPlaceholderLogic",
"settingTooltip": "Define the placeholder for the CVC number field."
"settingTooltip": "Define the placeholder for the CVC number field.",
"dataBinding": true,
"handlerLabel": "CVC Field Placeholder Logic",
"handlerDescription": "This is a handler for the logic to determine the placeholder for the CVC entry field."
},
{
"type": "checkbox",
"name": "cardholderNameFieldVisibility",
"label": "Cardholder Name Field Visibility",
"type": "text",
"name": "initialCardNumber",
"label": "Initial Card Number",
"settingTooltip": "Define the initial value for the card number field.",
"showInSettings": true,
"defaultValue": true,
"hasLogicHandler": false,
"handlerId": "cardholderNameFieldVisibilityLogic",
"settingTooltip": "Select to display the cardholder name field."
"hasLogicHandler": true,
"handlerId": "initialCardNumberLogic",
"handlerLabel": "Initial Card Number Logic",
"handlerDescription": "This is a handler for the logic to determine the initial value for the card number entry field.",
"dataBinding": true
},
{
"type": "text",
"name": "initialCardholderName",
"label": "Initial Cardholder Name ",
"showInSettings": true,
"hasLogicHandler": true,
"handlerId": "initialCardholderNameLogic",
"handlerLabel": "Initial Cardholder Name Logic",
"dataBinding": true,
"settingTooltip": "Define the initial value for the cardholder name field.",
"handlerDescription": "This is a handler for the logic to determine the initial value for the cardholder name entry field."
},
{
"type": "text",
"name": "initialExpiry",
"label": "Initial Expiry",
"showInSettings": true,
"hasLogicHandler": true,
"handlerId": "initialExpiryLogic",
"handlerLabel": "Initial Expiry Logic",
"dataBinding": true,
"settingTooltip": "Define the initial value for the card expiration field in 'MM/YY' format.",
"handlerDescription": "This is a handler for the logic to determine the initial value for the card expiration entry field. Set expiration in 'MM/YY' format."
},
{
"type": "text",
"name": "initialCVC",
"label": "Initial CVC",
"settingTooltip": "Define the initial value for the CVC number field.",
"showInSettings": true,
"hasLogicHandler": true,
"handlerId": "initialCVCLogic",
"handlerLabel": "Initial CVC Logic",
"handlerDescription": "This is a handler for the logic to determine the initial value for the CVC number entry field.",
"dataBinding": true
}
],
"eventHandlers": [
Expand Down
4 changes: 2 additions & 2 deletions components/bl-credit-card/src/card-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function useFormFields(formState, setFormState, card, component, eventHandlers)
type : 'tel',
name : 'number',
placeholder: cardNumberFieldPlaceholder,
pattern : '[\\d| ]{16,22}',
pattern : '[\\d ]{16,22}',
value : cardNumber,
visibility : true,
onChange : handleNumberChange,
Expand All @@ -85,7 +85,7 @@ function useFormFields(formState, setFormState, card, component, eventHandlers)
type : 'text',
name : 'name',
placeholder: cardholderNameFieldPlaceholder,
pattern : '[a-z A-Z-]+',
pattern : '[a-z A-Z\\-]+',
value : cardholderName,
visibility : cardholderNameFieldVisibility,
onChange : handleCardholderNameChange,
Expand Down
4 changes: 2 additions & 2 deletions components/bl-credit-card/src/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export function formatCVC(value, card) {
}

export function formatExpirationDate(expiry) {
const parts = expiry.match(expiryFormat);
const parts = expiry?.match(expiryFormat);

if (!parts) {
return '';
Expand Down Expand Up @@ -219,7 +219,7 @@ export function formatExpirationDate(expiry) {
}

if (month > 12) {
year = month[1] + year;
year = month[1] + year.slice(0, 1);
month = `0${ month[0] }`;
separator = ' / ';
}
Expand Down
29 changes: 23 additions & 6 deletions components/bl-credit-card/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
import { useEffect, useReducer, useState } from 'react';
import { useEffect, useMemo, useReducer, useState } from 'react';

import { CardForm } from './card-form';
import { CardPreview } from './card-preview';
import { formatCVC, getCardByNumber, validateCardCVC, validateCardExpiry, validateCardNumber } from './helpers';
import {
formatCreditCardNumber, formatCVC, formatExpirationDate, getCardByNumber,
validateCardCVC, validateCardExpiry, validateCardNumber,
} from './helpers';

const { cn } = BackendlessUI.CSSUtils;

const initialFormState = { cardNumber: '', expiry: '', cvc: '', cardholderName: '', focusedField: null };

export default function CreditCardComponent({ component, eventHandlers, elRef }) {
const { display, classList, style, direction, cardPreviewVisibility } = component;
const {
display, classList, style, direction, cardPreviewVisibility, initialCardNumber,
initialCardholderName, initialExpiry, initialCVC,
} = component;

const initialFormState = useMemo(() => {
const card = getCardByNumber(initialCardNumber);
const cardNumber = formatCreditCardNumber(initialCardNumber, card);
const cvc = formatCVC(initialCVC, card);
const expiry = formatExpirationDate(initialExpiry);

return { cardNumber, expiry, cvc, cardholderName: initialCardholderName, focusedField: null };
}, [initialCardNumber, initialCardholderName, initialExpiry, initialCVC]);

const [card, setCard] = useState();
const [formState, setFormState] = useObjectState(initialFormState);
Expand All @@ -30,10 +43,14 @@ export default function CreditCardComponent({ component, eventHandlers, elRef })
}
}, [card]);

useEffect(() => {
setFormState(initialFormState);
}, [initialFormState]);

const styles = { flexDirection: direction, ...style };

Object.assign(component, {
clearForm : () => setFormState(initialFormState),
clearForm : () => setFormState({ cardNumber: '', expiry: '', cvc: '', cardholderName: '', focusedField: null }),
validateNumber: () => validateCardNumber(cardNumber, card),
validateExpiry: () => validateCardExpiry(expiry),
validateCVC : () => validateCardCVC(cvc, card),
Expand Down

0 comments on commit b64780f

Please sign in to comment.