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

Shopgate's ENGAGE library.

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { i18n, historyPush } from '@shopgate/engage/core';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { RippleButton } from '@shopgate/engage/components';
import AddressCard from "./ProfileAddressCard";
import { useProfileContext } from "./Profile.provider";
import { PROFILE_ADDRESS_PATH } from "../../constants/routes";

/**
 * @param {Object} dispatch Dispatch
 * @returns {Object}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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
  }).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',
    [responsiveMediaQuery('<md', {
      webOnly: false
    })]: {
      flex: 1
    }
  }).toString()
};

/**
 * @returns {JSX}
 */
const ProfileAddressBook = ({
  push
}) => {
  const {
    contacts,
    deleteContact,
    editContact
  } = useProfileContext();
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("span", {
      className: styles.title,
      children: i18n.text('account.profile.address_book.title')
    }), /*#__PURE__*/_jsx("div", {
      className: styles.container,
      children: contacts && contacts.map(contact => /*#__PURE__*/_jsx(AddressCard, {
        contact: contact,
        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: PROFILE_ADDRESS_PATH
        }),
        children: i18n.text('account.profile.address_book.add')
      })
    })]
  });
};
export default connect(null, mapDispatchToProps)(ProfileAddressBook);