@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/stories/spec/step/features/refresh/RefreshWithPersistAsync.story.js

@@ -0,0 +1,958 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { getMockHttpClient } from '../../../../../test-utils';
+import { abortableDelay, respondWith } from '../../../../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../../../../test-utils/DynamicFlowWise';
+const getRespondWithDelay = (delayMs) => async (_, init) => {
+    var _a;
+    await abortableDelay(delayMs, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null);
+    return respondWith(refreshedStep);
+};
+const httpClient = getMockHttpClient({
+    '/refresh': getRespondWithDelay(500),
+    '/persist': async () => respondWith({ cardToken: 'X_njjb1uoi0j4jrqgr1pn69mtqrb' }),
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Features/Refresh On Change',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function RefreshWithPersistAsync() {
+    return renderWithStep(initialStep);
+}
+const renderWithStep = (step) => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: async (input, init) => {
+        action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+        return httpClient(input, init);
+    }, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: action('onEvent'), onLog: action('onLog') }));
+const initialStep = {
+    key: 'account',
+    type: 'form',
+    title: 'Enter their account details',
+    actions: [
+        {
+            title: 'Confirm',
+            url: '/v2/contacts',
+            type: 'primary',
+            method: 'POST',
+            $id: 'submit',
+        },
+    ],
+    schemas: [
+        {
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['currency'],
+                    properties: {
+                        currency: {
+                            title: 'Currency',
+                            type: 'string',
+                            analyticsId: 'currency-select',
+                            oneOf: [
+                                {
+                                    title: 'EUR',
+                                    analyticsId: 'EUR',
+                                    icon: { name: 'flag-eur', type: 'icon' },
+                                    description: 'Euro',
+                                    const: 'EUR',
+                                },
+                                {
+                                    title: 'GBP',
+                                    analyticsId: 'GBP',
+                                    icon: { name: 'flag-gbp', type: 'icon' },
+                                    description: 'British pound',
+                                    const: 'GBP',
+                                },
+                                {
+                                    title: 'USD',
+                                    analyticsId: 'USD',
+                                    icon: { name: 'flag-usd', type: 'icon' },
+                                    description: 'United States dollar',
+                                    const: 'USD',
+                                },
+                            ],
+                            default: 'USD',
+                        },
+                    },
+                    required: ['currency', 'legalEntityType'],
+                },
+                {
+                    title: 'Bank details',
+                    analyticsId: 'recipient-type',
+                    oneOf: [
+                        {
+                            title: 'ACH',
+                            type: 'object',
+                            analyticsId: 'Aba',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'ACH routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                            refreshFormOnChange: true,
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            refreshFormOnChange: true,
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        postCode: {
+                                            title: 'Post code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Aba',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'Wire',
+                            type: 'object',
+                            analyticsId: 'FedWireLocal',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'Fedwire routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        postCode: {
+                                            title: 'Post code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'FedWireLocal',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'SWIFT',
+                            type: 'object',
+                            analyticsId: 'SwiftCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account number',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['bic', 'accountNumber'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        postCode: {
+                                            title: 'Post code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'SwiftCode',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'US card',
+                            type: 'object',
+                            analyticsId: 'Card',
+                            image: {
+                                url: 'https://wise.com/public-resources/assets/recipients/unionpay.png',
+                                type: 'image',
+                            },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['expiryMonth', 'expiryYear', 'cardToken'],
+                                    properties: {
+                                        expiryMonth: {
+                                            title: 'Expiry month',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '08',
+                                            format: 'numeric',
+                                        },
+                                        expiryYear: {
+                                            title: 'Expiry year',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '2022',
+                                            format: 'numeric',
+                                        },
+                                        cardToken: {
+                                            title: 'Card token',
+                                            type: 'string',
+                                            hidden: true,
+                                            persistAsync: {
+                                                method: 'POST',
+                                                url: '/persist',
+                                                param: 'cardNumber',
+                                                idProperty: 'cardToken',
+                                                schema: {
+                                                    title: 'Card number',
+                                                    type: 'string',
+                                                    placeholder: '1234567890123456',
+                                                    format: 'numeric',
+                                                },
+                                            },
+                                        },
+                                    },
+                                    required: ['cardToken'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Card',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                    ],
+                    control: 'tab',
+                    placeholder: 'Please select where you are sending to',
+                },
+            ],
+            $id: 'form',
+        },
+    ],
+    refreshFormUrl: '/refresh',
+    model: {
+        ownedByCustomer: false,
+        profileId: 14518756,
+        legalEntityType: 'PERSON',
+        name: {},
+        currency: 'USD',
+        details: {},
+    },
+    layout: [{ schemaId: 'form', type: 'form' }],
+};
+const refreshedStep = {
+    key: 'account',
+    type: 'form',
+    title: 'Enter their account details',
+    actions: [],
+    schemas: [
+        {
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['profileId', 'currency', 'legalEntityType'],
+                    properties: {
+                        profileId: {
+                            title: 'Profile ID (optional)',
+                            type: 'number',
+                            analyticsId: 'Profile ID (optional)',
+                            hidden: true,
+                            const: 14518756,
+                        },
+                        currency: {
+                            title: 'Currency',
+                            type: 'string',
+                            analyticsId: 'currency-select',
+                            oneOf: [
+                                {
+                                    title: 'EUR',
+                                    analyticsId: 'EUR',
+                                    icon: { name: 'flag-eur', type: 'icon' },
+                                    description: 'Euro',
+                                    const: 'EUR',
+                                },
+                                {
+                                    title: 'GBP',
+                                    analyticsId: 'GBP',
+                                    icon: { name: 'flag-gbp', type: 'icon' },
+                                    description: 'British pound',
+                                    const: 'GBP',
+                                },
+                                {
+                                    title: 'USD',
+                                    analyticsId: 'USD',
+                                    icon: { name: 'flag-usd', type: 'icon' },
+                                    description: 'United States dollar',
+                                    const: 'USD',
+                                },
+                            ],
+                            default: 'USD',
+                        },
+                        legalEntityType: {
+                            title: 'Select recipient type',
+                            type: 'string',
+                            analyticsId: 'Select recipient type',
+                            hidden: true,
+                            const: 'PERSON',
+                        },
+                    },
+                    required: ['currency', 'legalEntityType'],
+                },
+                {
+                    title: 'Bank details',
+                    analyticsId: 'recipient-type',
+                    oneOf: [
+                        {
+                            title: 'ACH',
+                            type: 'object',
+                            analyticsId: 'Aba',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'ACH routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Aba',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'Wire',
+                            type: 'object',
+                            analyticsId: 'FedWireLocal',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'Fedwire routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                                { title: 'Arizona', const: 'AZ' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'FedWireLocal',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'SWIFT',
+                            type: 'object',
+                            analyticsId: 'SwiftCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account number',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['bic', 'accountNumber'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'SwiftCode',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'US card',
+                            type: 'object',
+                            analyticsId: 'Card',
+                            image: {
+                                url: 'https://wise.com/public-resources/assets/recipients/unionpay.png',
+                                type: 'image',
+                            },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['expiryMonth', 'expiryYear', 'cardToken'],
+                                    properties: {
+                                        expiryMonth: {
+                                            title: 'Expiry month',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '08',
+                                            format: 'numeric',
+                                        },
+                                        expiryYear: {
+                                            title: 'Expiry year',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '2022',
+                                            format: 'numeric',
+                                        },
+                                        cardToken: {
+                                            title: 'Card token',
+                                            type: 'string',
+                                            hidden: true,
+                                            persistAsync: {
+                                                method: 'POST',
+                                                url: '/persist',
+                                                param: 'cardNumber',
+                                                idProperty: 'cardToken',
+                                                schema: {
+                                                    title: 'Card number',
+                                                    type: 'string',
+                                                    placeholder: '1234567890123456',
+                                                    format: 'numeric',
+                                                },
+                                            },
+                                        },
+                                    },
+                                    required: ['cardToken'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Card',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                    ],
+                    control: 'tab',
+                    placeholder: 'Please select where you are sending to',
+                },
+            ],
+            $id: 'form',
+        },
+    ],
+    refreshFormUrl: '/refresh',
+    model: {
+        ownedByCustomer: false,
+        address: { country: 'US' },
+        profileId: 14518756,
+        legalEntityType: 'PERSON',
+        name: {},
+        currency: 'USD',
+        details: { cardToken: 'X_njjb1uoi0j4jrqgr1pn69mtqrb' },
+        type: 'Card',
+    },
+    layout: [{ schemaId: 'form', type: 'form' }],
+};