@shopgate/engage/checkout/components/AddressBook/AddressList.js

Shopgate's ENGAGE library.

import "core-js/modules/es.string.replace.js";
import React, { useMemo } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { getCheckoutBillingAddress, getCheckoutShippingAddress } from '@shopgate/engage/checkout/selectors/order';
import { i18n, historyPush } from '@shopgate/engage/core';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { RippleButton, ResponsiveContainer } from '@shopgate/engage/components';
import { ResponsiveBackButton } from "../ResponsiveBackButton";
import AddressCard from "../../../account/components/Profile/ProfileAddressCard";
import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
import { useAddressBook } from "../../hooks/common";
import { ADDRESS_TYPE_SHIPPING, ADDRESS_TYPE_BILLING, CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN } from "../../constants";

/**
 * @param {Object} state State.
 * @returns {Object}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const mapStateToProps = state => ({
  shippingAddress: getCheckoutShippingAddress(state),
  billingAddress: getCheckoutBillingAddress(state)
});

/**
 * @param {Object} dispatch Dispatch
 * @returns {Object}
 */
const mapDispatchToProps = dispatch => ({
  push: props => dispatch(historyPush(props))
});
const styles = {
  title: css({
    color: 'var(--color-text-high-emphasis)',
    lineHeight: 2.5,
    fontSize: 17,
    fontWeight: '600'
  }).toString(),
  container: css({
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    margin: -4,
    padding: 16
  }).toString(),
  headline: css({
    padding: 16,
    fontSize: '2.125rem',
    fontWeight: 'normal',
    margin: 0,
    lineHeight: '2.25rem'
  }).toString(),
  button: css({
    '&&': {
      marginTop: 8,
      marginRight: 16,
      backgroundColor: 'var(--color-primary)',
      borderRadius: 5,
      fontSize: 14,
      textTransform: 'none',
      padding: 0,
      [responsiveMediaQuery('<md', {
        webOnly: false
      })]: {
        width: '100%',
        marginRight: 0
      }
    }
  }).toString(),
  ripple: css({
    padding: '8px 16px'
  }).toString(),
  actions: css({
    display: 'flex',
    justifyContent: 'flex-end',
    flexDirection: 'row',
    padding: '0 16px 16px',
    [responsiveMediaQuery('<md', {
      webOnly: false
    })]: {
      flex: 1
    }
  }).toString()
};

/**
 * @returns {JSX}
 */
const AddressList = ({
  push,
  shippingAddress,
  billingAddress
}) => {
  const {
    contacts,
    deleteContact,
    editContact
  } = useProfileContext();
  const {
    type,
    updateOrderWithContact
  } = useAddressBook();
  const title = useMemo(() => {
    if ([ADDRESS_TYPE_SHIPPING, ADDRESS_TYPE_BILLING].includes(type)) {
      return i18n.text(`titles.checkout_addresses_${type}`);
    }
    return '';
  }, [type]);
  const selectedContactId = useMemo(() => {
    if (type === ADDRESS_TYPE_SHIPPING) {
      return shippingAddress?.customerContactId || null;
    }
    if (type === ADDRESS_TYPE_BILLING) {
      return billingAddress?.customerContactId || null;
    }
    return null;
  }, [billingAddress, shippingAddress, type]);
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
      webOnly: true,
      breakpoint: ">xs",
      children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
        className: styles.headline,
        children: title
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: styles.container,
      children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
        contact: contact,
        selected: contact.id === selectedContactId,
        selectContact: () => updateOrderWithContact(contact.id),
        deleteContact: () => deleteContact(contact.id),
        editContact: () => editContact(contact)
      }, contact.id))
    }), /*#__PURE__*/_jsx("div", {
      className: styles.actions,
      children: /*#__PURE__*/_jsx(RippleButton, {
        className: styles.button,
        rippleClassName: styles.ripple,
        type: "primary",
        onClick: () => push({
          pathname: `${CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN}`.replace(':type', type)
        }),
        children: i18n.text('account.profile.address_book.add')
      })
    })]
  });
};
AddressList.defaultProps = {
  shippingAddress: null,
  billingAddress: null
};
export default connect(mapStateToProps, mapDispatchToProps)(AddressList);