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

Shopgate's ENGAGE library.

import{hot}from'react-hot-loader/root';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";var variables=themeConfig.variables;export var styles={root:css({padding:"0 ".concat(variables.gap.big,"px ").concat(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}
 */var CheckoutAddress=function CheckoutAddress(_ref){var _address$middleName,_address$address,_address$address2,_address$address3,_iso3166$address$coun,_iso3166$address$coun2;var type=_ref.type;var _useCheckoutContext=useCheckoutContext(),billingAddress=_useCheckoutContext.billingAddress,shippingAddress=_useCheckoutContext.shippingAddress,orderReserveOnly=_useCheckoutContext.orderReserveOnly,isShippingAddressSelectionEnabled=_useCheckoutContext.isShippingAddressSelectionEnabled,isGuestCheckout=_useCheckoutContext.isGuestCheckout;var _ref2=useProfileContext()||{},_ref2$contacts=_ref2.contacts,contacts=_ref2$contacts===void 0?[]:_ref2$contacts;var address=useMemo(function(){return type===ADDRESS_TYPE_BILLING?billingAddress:shippingAddress;},[billingAddress,shippingAddress,type]);var headline=useMemo(function(){if(type===ADDRESS_TYPE_BILLING&&isGuestCheckout&&orderReserveOnly){return'checkout.billing.headline_reserve';}return"checkout.".concat(type,".headline");},[isGuestCheckout,orderReserveOnly,type]);var editLink=useMemo(function(){if(!address){return null;}if(isGuestCheckout){return"".concat(GUEST_CHECKOUT_PATTERN,"?edit=").concat(type);}return"".concat(CHECKOUT_ADDRESS_BOOK_PATH,"/").concat(type);},[address,isGuestCheckout,type]);var editLabel=useMemo(function(){if(isGuestCheckout){return undefined;}return"checkout.".concat(type,".change");},[isGuestCheckout,type]);var selectAddressLink=useMemo(function(){if(!address&&(!Array.isArray(contacts)||contacts.length===0)){return"".concat(CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN).replace(':type',type);}return"".concat(CHECKOUT_ADDRESS_BOOK_PATH,"/").concat(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 React.createElement("div",{className:styles.root},React.createElement(Section,{className:styles.card,title:headline,editLink:editLink,editLabel:editLabel},address?React.createElement(Fragment,null,React.createElement("span",null,((_address$middleName=address.middleName)===null||_address$middleName===void 0?void 0:_address$middleName.length)?"".concat(address.firstName," ").concat(address.middleName," ").concat(address.lastName):"".concat(address.firstName," ").concat(address.lastName)),type===ADDRESS_TYPE_BILLING&&isGuestCheckout&&orderReserveOnly&&React.createElement(Fragment,null,React.createElement("span",null,address.emailAddress),React.createElement("span",null,address.mobile)),React.createElement("span",null,address.address1),((_address$address=address.address2)===null||_address$address===void 0?void 0:_address$address.length)?React.createElement("span",null,address.address2):null,((_address$address2=address.address3)===null||_address$address2===void 0?void 0:_address$address2.length)?React.createElement("span",null,address.address3):null,((_address$address3=address.address4)===null||_address$address3===void 0?void 0:_address$address3.length)?React.createElement("span",null,address.address4):null,address.postalCode||address.region||address.city||address.country?React.createElement("span",null,i18n.text("checkout.".concat(type,".address"),{postalCode:address.postalCode||'',region:(iso3166===null||iso3166===void 0?void 0:(_iso3166$address$coun=iso3166[address.country])===null||_iso3166$address$coun===void 0?void 0:(_iso3166$address$coun2=_iso3166$address$coun.divisions)===null||_iso3166$address$coun2===void 0?void 0:_iso3166$address$coun2[address.region])||address.region||'',city:address.city||'',country:address.country||''})):null):React.createElement(Link,{href:selectAddressLink,className:styles.link},i18n.text("checkout.".concat(type,".select_address")))));};CheckoutAddress.defaultProps={type:ADDRESS_TYPE_BILLING};export default hot(CheckoutAddress);