@shopgate/engage
Version:
Shopgate's ENGAGE library.
7 lines • 8.6 kB
JavaScript
import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useMemo,useEffect,useState}from'react';import{hot}from'react-hot-loader/root';import PropTypes from'prop-types';import{css}from'glamor';import{ResponsiveContainer,RippleButton}from'@shopgate/engage/components';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{CartItems}from'@shopgate/engage/cart';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{useRoute}from'@shopgate/engage/core';import{i18n}from"../../../core/helpers/i18n";import{convertLineItemsToCartItems,isReserveOnlyOrder,isDirectShipOnlyOrder}from"../../helpers";import{ResponsiveBackButton}from"../ResponsiveBackButton";import CheckoutConfirmationPickUpContact from"./CheckoutConfirmationPickUpContact";import CheckoutConfirmationOrderContact from"./CheckoutConfirmationOrderContact";import CheckoutConfirmationPickupNotes from"./CheckoutConfirmationPickupNotes";import CheckoutConfirmationBilledTo from"./CheckoutConfirmationBilledTo";import CheckoutConfirmationShippedTo from"./CheckoutConfirmationShippedTo";import CheckoutConfirmationOrderSummary from"./CheckoutConfirmationOrderSummary";import{SupplementalContent}from"../SupplementalContent";import connect from"./CheckoutConfirmation.connector";var variables=themeConfig.variables;var style={root:css({display:'flex',flexDirection:'row'}),main:css(_defineProperty({flex:1},responsiveMediaQuery('>=md',{webOnly:true}),{paddingRight:16})),side:css(_defineProperty({},responsiveMediaQuery('>=md',{webOnly:true}),{marginTop:134,marginLeft:variables.gap.big*-1,flex:0.45})),cartItems:css({marginBottom:32}),container:css(_defineProperty({padding:"".concat(variables.gap.big,"px ").concat(variables.gap.small*1.5,"px 0 ").concat(variables.gap.xbig,"px")},responsiveMediaQuery('<sm'),{paddingLeft:variables.gap.big})),backButtonContainer:css(_defineProperty({paddingLeft:variables.gap.big,display:'none'},responsiveMediaQuery('>=sm',{webOnly:true}),{display:'block'})),heading:css({fontSize:'2.125rem',fontWeight:'normal',margin:0,lineHeight:'2.25rem',paddingBottom:variables.gap.xbig}),yourItemsHeading:css({fontSize:'1.25rem',fontWeight:'bold',margin:"".concat(variables.gap.bigger,"px 0 0")}),instructions:css({marginBottom:variables.gap.xbig}),body:css({border:0,fontSize:'0.875rem',lineHeight:'1.25rem'}),orderNum:css({padding:0,fontSize:'1.25rem',fontWeight:500,lineHeight:'1.5rem',margin:"0 0 ".concat(variables.gap.big,"px"),border:0}),button:css(_defineProperty({flex:'0 0 auto !important',borderRadius:'2px !important',minWidth:'50% !important'},responsiveMediaQuery('<md'),{width:'100%'})),buttonWrapper:css({padding:variables.gap.big}),supplementalWrapper:css({padding:"".concat(variables.gap.xbig,"px ").concat(variables.gap.big,"px")}).toString()};/**
* CheckoutConfirmation component
* @returns {JSX}
*/var CheckoutConfirmation=function CheckoutConfirmation(_ref){var onContinueShopping=_ref.onContinueShopping,isUserLoggedIn=_ref.isUserLoggedIn,fetchCheckoutOrder=_ref.fetchCheckoutOrder;var _useRoute=useRoute(),order=_useRoute.state.order,query=_useRoute.query;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),orderData=_useState2[0],setOrderData=_useState2[1];// Finding the source of order data.
// Either from the route state or from a pipeline request.
useEffect(function(){/** */var handleFetch=/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var data;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return fetchCheckoutOrder();case 2:data=_context.sent;setOrderData(data);case 4:case"end":return _context.stop();}},_callee);}));return function handleFetch(){return _ref2.apply(this,arguments);};}();if(!order){handleFetch();return;}setOrderData(order);},[fetchCheckoutOrder,order,query]);// Map order data to more UI friendly format.
var _useMemo=useMemo(function(){if(!orderData){return{};}return{orderNumber:orderData.orderNumber,date:orderData.date,cartItems:convertLineItemsToCartItems(orderData.lineItems),isReserveOnly:isReserveOnlyOrder(orderData),isDirectShipOnly:isDirectShipOnlyOrder(orderData),currencyOverride:orderData.currencyCode};},[orderData]),orderNumber=_useMemo.orderNumber,date=_useMemo.date,cartItems=_useMemo.cartItems,isReserveOnly=_useMemo.isReserveOnly,isDirectShipOnly=_useMemo.isDirectShipOnly,currencyOverride=_useMemo.currencyOverride;if(!orderData||!cartItems){return null;}return React.createElement("div",{className:style.root},React.createElement("div",{className:style.main},React.createElement("div",{className:style.backButtonContainer},React.createElement(ResponsiveBackButton,{label:"checkout.success.continue",onClick:onContinueShopping})),React.createElement("div",{className:style.container},React.createElement("h2",{className:style.heading},i18n.text('checkout.success.title')),React.createElement("p",{className:style.orderNum},i18n.text('checkout.success.order_date',{date:i18n.date(new Date(date).getTime(),'short')}),' | ',i18n.text('checkout.success.order_number',{orderNumber:orderNumber})),React.createElement("div",{className:style.instructions},React.createElement("p",{className:style.body},i18n.text('checkout.success.instructions_1')),React.createElement("p",{className:style.body},i18n.text('checkout.success.instructions_2')))),React.createElement("div",{className:style.cartItems},React.createElement(CartItems,{cartItems:cartItems,onFocus:function onFocus(){},multiLineReservation:true,editable:false,isCheckoutConfirmation:true,isDirectShipOnly:isDirectShipOnly,currencyOverride:currencyOverride})),React.createElement(ResponsiveContainer,{breakpoint:"<md",appAlways:true},React.createElement(CheckoutConfirmationPickUpContact,{order:orderData}),React.createElement(CheckoutConfirmationPickupNotes,{order:orderData}),React.createElement(CheckoutConfirmationShippedTo,{order:orderData}),!isUserLoggedIn&&isReserveOnly?React.createElement(CheckoutConfirmationOrderContact,{order:orderData}):React.createElement(CheckoutConfirmationBilledTo,{order:orderData}),React.createElement(CheckoutConfirmationOrderSummary,{order:orderData}),React.createElement(SupplementalContent,{className:style.supplementalWrapper})),React.createElement("div",{className:style.buttonWrapper},React.createElement(RippleButton,{type:"secondary",disabled:false,className:style.button.toString(),onClick:onContinueShopping},i18n.text('checkout.success.continue')))),React.createElement("div",{className:style.side},React.createElement(ResponsiveContainer,{breakpoint:">=md",webOnly:true},React.createElement(CheckoutConfirmationPickUpContact,{order:orderData}),React.createElement(CheckoutConfirmationPickupNotes,{order:orderData}),React.createElement(CheckoutConfirmationShippedTo,{order:orderData}),!isUserLoggedIn&&isReserveOnly?React.createElement(CheckoutConfirmationOrderContact,{order:orderData}):React.createElement(CheckoutConfirmationBilledTo,{order:orderData}),React.createElement(CheckoutConfirmationOrderSummary,{order:orderData}),React.createElement(SupplementalContent,{className:style.supplementalWrapper}))));};export default hot(connect(CheckoutConfirmation));