@shopgate/engage/account/components/Profile/ProfileHeader.js

Shopgate's ENGAGE library.

import React from 'react';
import { css } from 'glamor';
import { i18n } from '@shopgate/engage/core';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { useProfileContext } from "./Profile.provider";
import { jsx as _jsx } from "react/jsx-runtime";
const styles = {
  root: css({
    marginTop: 8,
    [responsiveMediaQuery('<md')]: {
      marginTop: 16,
      marginBottom: 16
    }
  }),
  title: css({
    color: 'var(--color-text-high-emphasis)',
    fontSize: 17,
    fontWeight: '600'
  }).toString()
};

/**
 * @returns {JSX}
 */
const ProfileHeader = () => {
  const {
    internalCustomerNumber
  } = useProfileContext().customer || {};
  return /*#__PURE__*/_jsx("div", {
    className: styles.root,
    children: /*#__PURE__*/_jsx("span", {
      className: styles.title,
      children: i18n.text('account.profile.customer.number', {
        customerNumber: internalCustomerNumber
      })
    })
  });
};
export default ProfileHeader;