@shopgate/engage/checkout/components/Checkout/CheckoutAddress.js

Shopgate's ENGAGE library.

import "core-js/modules/es.string.replace.js";
import React, { Fragment, useMemo } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { i18n } from '@shopgate/engage/core';
import { themeConfig } from '@shopgate/engage';
import { Link } from '@shopgate/engage/components';
import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
import Section from "./CheckoutSection";
import { useCheckoutContext } from "../../hooks/common";
import { GUEST_CHECKOUT_PATTERN, CHECKOUT_ADDRESS_BOOK_PATH, CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN } from "../../constants/routes";
import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from "../../constants";
import iso3166 from "../../../components/Form/Builder/helpers/iso-3166-2";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const {
  variables
} = themeConfig;
export const styles = {
  root: css({
    padding: `0 ${variables.gap.big}px ${variables.gap.big}px`,
    display: 'flex',
    flexDirection: 'column',
    flex: '0 0 auto'
  }).toString(),
  card: css({
    display: 'flex',
    flexDirection: 'column',
    fontSize: 15,
    margin: '8px 0'
  }).toString(),
  link: css({
    fontSize: '0.875rem',
    color: 'var(--color-primary)',
    textTransform: 'uppercase',
    textAlign: 'center'
  }).toString()
};

/**
 * CheckoutAddress
 * @param {Object} props The component props
 * @returns {JSX}
 */
const CheckoutAddress = ({
  type
}) => {
  const {
    billingAddress,
    shippingAddress,
    orderReserveOnly,
    isShippingAddressSelectionEnabled,
    isGuestCheckout
  } = useCheckoutContext();
  const {
    contacts = []
  } = useProfileContext() || {};
  const address = useMemo(() => type === ADDRESS_TYPE_BILLING ? billingAddress : shippingAddress, [billingAddress, shippingAddress, type]);
  const headline = useMemo(() => {
    if (type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly) {
      return 'checkout.billing.headline_reserve';
    }
    return `checkout.${type}.headline`;
  }, [isGuestCheckout, orderReserveOnly, type]);
  const editLink = useMemo(() => {
    if (!address) {
      return null;
    }
    if (isGuestCheckout) {
      return `${GUEST_CHECKOUT_PATTERN}?edit=${type}`;
    }
    return `${CHECKOUT_ADDRESS_BOOK_PATH}/${type}`;
  }, [address, isGuestCheckout, type]);
  const editLabel = useMemo(() => {
    if (isGuestCheckout) {
      return undefined;
    }
    return `checkout.${type}.change`;
  }, [isGuestCheckout, type]);
  const selectAddressLink = useMemo(() => {
    if (!address && (!Array.isArray(contacts) || contacts.length === 0)) {
      return `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type);
    }
    return `${CHECKOUT_ADDRESS_BOOK_PATH}/${type}`;
  }, [address, contacts, type]);
  if (isGuestCheckout && !address) {
    return null;
  }

  // Do not try to render the shipping address when it's not a directShip order
  if (type === ADDRESS_TYPE_SHIPPING && !isShippingAddressSelectionEnabled) {
    return null;
  }
  return /*#__PURE__*/_jsx("div", {
    className: styles.root,
    children: /*#__PURE__*/_jsx(Section, {
      className: styles.card,
      title: headline,
      editLink: editLink,
      editLabel: editLabel,
      children: address ? /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("span", {
          children: address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`
        }), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx("span", {
            children: address.emailAddress
          }), /*#__PURE__*/_jsx("span", {
            children: address.mobile
          })]
        }), /*#__PURE__*/_jsx("span", {
          children: address.address1
        }), address.address2?.length ? /*#__PURE__*/_jsx("span", {
          children: address.address2
        }) : null, address.address3?.length ? /*#__PURE__*/_jsx("span", {
          children: address.address3
        }) : null, address.address4?.length ? /*#__PURE__*/_jsx("span", {
          children: address.address4
        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx("span", {
          children: i18n.text(`checkout.${type}.address`, {
            postalCode: address.postalCode || '',
            region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
            city: address.city || '',
            country: address.country || ''
          })
        }) : null]
      }) : /*#__PURE__*/_jsx(Link, {
        href: selectAddressLink,
        className: styles.link,
        children: i18n.text(`checkout.${type}.select_address`)
      })
    })
  });
};
CheckoutAddress.defaultProps = {
  type: ADDRESS_TYPE_BILLING
};
export default CheckoutAddress;