Drawer Menu with a Customer Greeting

A Drawer Menu that greets a signed-in customer by name at the top - or invites a guest to sign in - followed by the merchant's menuItems.

Settings panel

The account row's action is configurable. menuItems is added automatically for drawer menus, so it isn't declared here:

configurationSchema.json

[
  { "type": "action-select", "name": "accountAction", "label": "Account action" }
]

Example

index.tsx

import React from 'react';
import { Actionable, Box, Flexbox, Icon, Text } from '@evlop/native-components';
import { CustomBlock, useCustomer } from '@evlop/shopify';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const GreetingDrawerMenu: CustomBlock.DrawerMenu = ({ data = {} }) => {
  const insets = useSafeAreaInsets();
  const customer = useCustomer();
  const menuItems = Array.isArray(data.menuItems) ? data.menuItems : [];

  const isSignedIn = Boolean(customer?.id);
  const name = customer?.firstName || customer?.displayName;

  return (
    <Flexbox flexDirection="column" paddingTop={insets.top + 16} paddingBottom={insets.bottom + 16}>
      <Actionable action={data.accountAction}>
        <Flexbox flexDirection="row" alignItems="center" gap={12} px={20} pb={16}>
          <Icon icon="material-community-icons:account-circle-outline" size={40} color="primary-500" />
          <Flexbox flexDirection="column" flex={1}>
            <Text fontSize="lg" fontWeight="Bold">
              {isSignedIn ? `Hi, ${name || 'there'}` : 'Welcome'}
            </Text>
            <Text fontSize="sm" color="gray-500">
              {isSignedIn ? 'View your account' : 'Sign in or create an account'}
            </Text>
          </Flexbox>
          <Icon icon="material-community-icons:chevron-right" size={22} color="gray-400" />
        </Flexbox>
      </Actionable>

      <Box height={1} bg="gray-100" mb={8} />

      {menuItems.map((item, index) => (
        <Actionable key={`${item.label || 'menu-item'}-${index}`} action={item.action}>
          <Flexbox flexDirection="row" alignItems="center" gap={14} px={20} py={12}>
            {item.icon ? <Icon icon={item.icon} size={22} color="gray-700" /> : null}
            <Text fontSize="md">{item.label}</Text>
          </Flexbox>
        </Actionable>
      ))}
    </Flexbox>
  );
};

export default GreetingDrawerMenu;

How it works

• useCustomer() (from @evlop/shopify) returns the signed-in customer, and re-renders the block when the customer signs in or out. For a guest there's no customer, so customer?.id is used to tell the two states apart.
• Fall back gracefully on the name. Not every customer has a first name, so the greeting tries firstName, then displayName, then a generic "there".
• One row, two meanings. The account row runs the same data.accountAction either way - point it at the app's account page, which shows sign-in to guests and the account details to signed-in customers.
• useSafeAreaInsets() keeps the content clear of the status bar and home indicator, since the drawer runs the full height of the screen.