@shopgate/engage/back-in-stock/components/BackInStockButton/index.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";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;}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);});};}import React,{useCallback}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{Link,CheckedIcon,Button,NotificationIcon}from'@shopgate/engage/components';import{BACK_IN_STOCK_PATTERN}from'@shopgate/engage/back-in-stock/constants';import{i18n}from'@shopgate/engage/core';import styles from"./style";import connect from"./connector";var colors=themeConfig.colors;/**
 * This component renders a button to subscribe a product or a hint
 * that the product is already subscribed
 * @param {Object} props The component props
 * @param {boolean} props.isLinkToBackInStockEnabled Whether the link to the back in
 * stock page is active
 * @param {boolean} props.stopPropagation Stop event propagation
 * @param {string} props.productId The product id
 * @param {Object} props.subscription The subscription
 * @param {Function} props.addBackInStockSubscription Add product to back in stock list
 * @param {Function} props.grantPushPermissions Request / Set push permission
 * @return {JSX.Element}
 */var BackInStockButton=function BackInStockButton(_ref){var productId=_ref.productId,_ref$isLinkToBackInSt=_ref.isLinkToBackInStockEnabled,isLinkToBackInStockEnabled=_ref$isLinkToBackInSt===void 0?false:_ref$isLinkToBackInSt,subscription=_ref.subscription,_ref$stopPropagation=_ref.stopPropagation,stopPropagation=_ref$stopPropagation===void 0?false:_ref$stopPropagation,addBackInStockSubscription=_ref.addBackInStockSubscription,grantPushPermissions=_ref.grantPushPermissions,alignRight=_ref.alignRight,showAsButton=_ref.showAsButton;var handleClick=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(event){var allowed;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(stopPropagation){event.stopPropagation();}_context.next=3;return grantPushPermissions({useRationaleModal:true,useSettingsModal:true,rationaleModal:{message:'back_in_stock.rationale.message',confirm:'back_in_stock.rationale.confirm',dismiss:'common.cancel'},meta:{context:'backInStock',usesSoftPushOptIn:false,permission:'push'}});case 3:allowed=_context.sent;if(allowed){addBackInStockSubscription({productId:productId});}case 5:case"end":return _context.stop();}},_callee);}));return function(_x){return _ref2.apply(this,arguments);};}(),[addBackInStockSubscription,grantPushPermissions,productId,stopPropagation]);if((subscription===null||subscription===void 0?void 0:subscription.status)==='active'){return React.createElement(Link,{href:BACK_IN_STOCK_PATTERN,disabled:!isLinkToBackInStockEnabled,className:classNames(styles.backInStockMessageContainer,_defineProperty({},styles.rightAligned,alignRight)),tag:"span"},React.createElement(CheckedIcon,{color:colors.success,className:alignRight?styles.icon:classNames(styles.iconCentered,styles.icon)}),React.createElement("span",{className:styles.backInStockMessage},i18n.text('back_in_stock.we_will_remind_you')));}if(showAsButton){return React.createElement(Button,{type:"primary",tabIndex:0,onClick:handleClick,className:styles.button},React.createElement("span",{className:styles.buttonText},i18n.text('back_in_stock.get_notified')));}return(// eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events
React.createElement("a",{role:"button",tabIndex:0,onClick:handleClick,className:classNames(styles.button,_defineProperty({},styles.rightAligned,alignRight))},React.createElement(NotificationIcon,{color:colors.primary,className:styles.icon}),React.createElement("span",{className:styles.buttonText},i18n.text('back_in_stock.get_notified'))));};BackInStockButton.defaultProps={stopPropagation:false,isLinkToBackInStockEnabled:false,showAsButton:false,alignRight:false,subscription:null,productId:null};export default connect(BackInStockButton);