Frontastic component name

Orders

Page type

Used on the My account Orders dynamic page

Example images

Empty orders list

Orders list

Single order overview

Empty order exampleEmpty order example

Orders list exampleOrders list example

Single order overview exampleSingle order overview example

Code samples

{
    "tasticType": "frontastic/account/orders",
    "name": "Orders",
    "category": "Account",
    "icon": "menu",
    "schema": [
        {
            "name": "Data source selection",
            "fields": [
                {
                    "label": "Data source",
                    "field": "stream",
                    "type": "stream",
                    "streamType": "account-orders",
                    "default": null
                }
            ]
        }   
    ]
}
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 AccountOrders from '../../../patterns/organisms/Account/AccountOrders'

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

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

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

    return (
        <AccountMenu
            selectedMenuItem={MENU_ITEMS.ORDERS}
            welcome={<WelcomeOverview firstName={firstName} />}
            handleLogout={app.getLoader('context').logout}
            openPanel={() => {
                setOpenPanel(true)
            }}
            >
            <AccountOrders
                orders={stream}
                openPanel={openPanel}
                onClose={() => {
                    setOpenPanel(false)
                }}
            />
        </AccountMenu>
    )
}

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

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

Did this page help you?