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

Shopgate's ENGAGE library.

import React from 'react';
import { css } from 'glamor';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { i18n } from '@shopgate/engage/core';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { useAddressBook, ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from '@shopgate/engage/checkout';
import { RippleButton, Card, ContextMenu } from '@shopgate/engage/components';
import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  root: css({
    padding: 16,
    display: 'flex',
    flexDirection: 'column',
    width: 'calc(50% - 16px)',
    [responsiveMediaQuery('<md', {
      webOnly: false
    })]: {
      width: '100%'
    }
  }).toString(),
  contextMenu: css({
    marginRight: -8,
    marginBottom: 4
  }).toString(),
  header: css({
    display: 'flex',
    flexDirection: 'row'
  }).toString(),
  body: css({
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: '100%',
    [responsiveMediaQuery('<md', {
      webOnly: false
    })]: {
      flexDirection: 'column'
    }
  }).toString(),
  column: css({
    display: 'flex',
    flexDirection: 'column'
  }).toString(),
  selectButtonColumn: css({
    justifyContent: 'flex-end',
    paddingLeft: 8,
    [responsiveMediaQuery('<md', {
      webOnly: false
    })]: {
      paddingLeft: 0
    }
  }).toString(),
  name: css({
    color: 'var(--color-text-high-emphasis)',
    flex: 1,
    fontSize: 16,
    fontWeight: '600'
  }).toString(),
  others: css({
    color: 'var(--color-text-medium-emphasis)',
    fontSize: 16
  }),
  defaultLabel: css({
    color: 'var(--color-text-low-emphasis)',
    fontSize: 15
  }).toString(),
  selectedLabel: css({
    color: 'var(--color-text-high-emphasis)',
    fontSize: 15,
    fontWeight: 500,
    paddingTop: 8
  }).toString(),
  button: css({
    '&&:disabled': {
      padding: '8px 0'
    },
    '&&': {
      marginTop: 8,
      borderRadius: 5,
      fontSize: 14,
      padding: 0,
      textTransform: 'none'
    }
  }).toString(),
  ripple: css({
    padding: '8px 16px'
  }).toString()
};

/**
 * @returns {JSX}
 */
const ProfileAddressCard = ({
  contact,
  deleteContact,
  editContact,
  selectContact,
  selected
}) => {
  const {
    isCheckout,
    type
  } = useAddressBook();
  return /*#__PURE__*/_jsxs(Card, {
    className: styles.root,
    children: [/*#__PURE__*/_jsxs("div", {
      className: styles.header,
      children: [/*#__PURE__*/_jsx("span", {
        className: styles.name,
        children: contact.middleName ? `${contact.firstName} ${contact.middleName} ${contact.lastName}` : `${contact.firstName} ${contact.lastName}`
      }), /*#__PURE__*/_jsxs(ContextMenu, {
        classes: {
          container: styles.contextMenu
        },
        children: [/*#__PURE__*/_jsx(ContextMenu.Item, {
          onClick: editContact,
          children: i18n.text('account.profile.address_book.context.edit')
        }), /*#__PURE__*/_jsx(ContextMenu.Item, {
          onClick: deleteContact,
          children: i18n.text('account.profile.address_book.context.remove')
        })]
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: styles.body,
      children: [/*#__PURE__*/_jsxs("div", {
        className: styles.column,
        children: [!isCheckout && contact.emailAddress ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: contact.emailAddress
        }) : null, contact.postalCode || contact.region || contact.city || contact.country ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: i18n.text('checkout.billing.address', {
            postalCode: contact.postalCode || '',
            region: iso3166?.[contact.country]?.divisions?.[contact.region] || contact.region || '',
            city: contact.city || '',
            country: contact.country || ''
          })
        }) : null, contact.address1 ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: contact.address1
        }) : null, contact.address2 ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: contact.address2
        }) : null, contact.address3 ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: contact.address3
        }) : null, contact.address4 ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: contact.address4
        }) : null, !isCheckout && contact.mobile ? /*#__PURE__*/_jsx("span", {
          className: styles.others,
          children: contact.mobile
        }) : null, (!isCheckout || type === ADDRESS_TYPE_BILLING) && contact.isDefaultBilling ? /*#__PURE__*/_jsx("span", {
          className: styles.defaultLabel,
          children: i18n.text('account.profile.address_book.default_billing')
        }) : null, (!isCheckout || type === ADDRESS_TYPE_SHIPPING) && contact.isDefaultShipping ? /*#__PURE__*/_jsx("span", {
          className: styles.defaultLabel,
          children: i18n.text('account.profile.address_book.default_shipping')
        }) : null]
      }), /*#__PURE__*/_jsx("div", {
        className: classNames(styles.column, styles.selectButtonColumn),
        children: isCheckout ? /*#__PURE__*/_jsx(RippleButton, {
          className: styles.button,
          rippleClassName: styles.ripple,
          type: "secondary",
          disabled: selected,
          onClick: selectContact,
          children: i18n.text(`account.profile.address_book.${selected ? 'selected' : 'select'}`)
        }) : null
      })]
    })]
  });
};
ProfileAddressCard.defaultProps = {
  selectContact: null,
  selected: false
};
export default ProfileAddressCard;