Addresses Tastic

Tastic name:

Addresses

Page type:

Master pages

Example images:

Empty addresses	Address list	Add address	Edit address	Remove address

Schema.json:

{
    "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" }
                    ]
                }
            ]
        }
    ]
}

Tastic.jsx

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 'Molecules/Account/Menu'
import WelcomeOverview from 'Organisms/Account/AccountOverview/welcomeOverview'
import AccountAddresses from 'Organisms/Account/AccountAddresses'

import MENU_ITEMS from '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)