Addresses

Frontastic component name

Addresses

Page type

Used on the My account Addresses dynamic page

Example image

Empty addressesAddress listAdd addressEdit addressRemove address
Empty address exampleAddress exampleAdd address exampleEdit 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)