Addresses

Frontastic component name

Addresses

Page type

Used on the My account Addresses dynamic page

Example image

Empty addresses

Address list

Add address

Edit address

Remove address

Empty address exampleEmpty address example

Address exampleAddress example

Add address exampleAdd address example

Edit address exampleEdit address example

Remove address exampleRemove address example

Code samples

{
    "tasticType": "frontastic/account/addresses",
    "name": "Account address",
    "category": "Account",
    "icon": "menu",
    "schema": [
        {
            "name": "Shipping countries",
            "fields": [
                {
                    "label": "Countries",
                    "field": "countries",
                    "type": "group",
                    "itemLabelField": "name",
                    "fields": [
                        {
                            "label": "Name",
                            "field": "name",
                            "translatable": false,
                            "required": true,
                            "type": "string"
                        },
                        {
                            "label": "Code",
                            "field": "code",
                            "translatable": false,
                            "required": true,
                            "type": "string"
                        }
                    ],
                    "default": [
                        { "name": "Germany", "code": "DE" },
                        { "name": "United States of America", "code": "US" }
                    ]
                }
            ]
        }
    ]
}
import React, { useState } from 'react'
import PropTypes from 'prop-types'

import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import app from '@frontastic/catwalk/src/js/app/app'

import AccountMenu from '../../../patterns/molecules/Account/Menu'
import WelcomeOverview from '../../../patterns/organisms/Account/AccountOverview/welcomeOverview'
import AccountAddresses from '../../../patterns/organisms/Account/AccountAddresses'

import MENU_ITEMS from '../../../patterns/molecules/Account/Menu/MENU_ITEMS'

const AccountAddressTastic = ({ data, context, route }) => {
    const [openPanel, setOpenPanel] = useState(true)
    const {
        session: {
            loggedIn,
            account: { addresses, firstName },
        },
    } = context

    if (!loggedIn && route.route !== 'Frontastic.Frontend.Master.Account.index') {
        app.getRouter().push('Frontastic.Frontend.Master.Account.index')
    }

    return (
        <AccountMenu
            selectedMenuItem={MENU_ITEMS.ADDRESSES}
            welcome={<WelcomeOverview firstName={firstName} />}
            handleLogout={app.getLoader('context').logout}
            openPanel={() => {
                setOpenPanel(true)
            }}
            >
            <AccountAddresses
                addresses={addresses}
                openPanel={openPanel}
                countries={data.countries}
                onClose={() => {
                    setOpenPanel(false)
                }}
                handleAddAddress={app.getLoader('context').addAddress}
                handleUpdateAddress={app.getLoader('context').updateAddress}
                handleRemoveAddress={app.getLoader('context').removeAddress}
            />
        </AccountMenu>
    )
}

AccountAddressTastic.propTypes = {
    context: PropTypes.object.isRequired,
    data: PropTypes.object.isRequired,
    route: PropTypes.object.isRequired,
}

export default tastify({
    translate: true,
    connect: {
        context: true,
        route: true,
    },
})(AccountAddressTastic)

Did this page help you?