@shopgate/engage/checkout/paymentMethods/stripe/StripeCreditCard.js

Shopgate's ENGAGE library.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{useContext}from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{i18n}from'@shopgate/engage/core';import{TextField}from'@shopgate/engage/components';import{getCSSCustomProp}from'@shopgate/engage/styles';import{CardNumberElement,CardCvcElement,CardExpiryElement}from'@stripe/react-stripe-js';import Section from"../../components/Checkout/CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import StripeContext from"./StripeProvider.context";var colors=themeConfig.colors;var styles={root:css({padding:'0 16px',display:'flex',flexDirection:'column',flex:'0 0 auto',' .formElement':{background:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:0,marginBottom:38,borderTopLeftRadius:4,borderTopRightRadius:4,borderBottom:"1px solid ".concat(colors.shade12)},' .formElement label':{color:'var(--color-text-low-emphasis)',paddingLeft:24},' .underline':{marginBottom:0,borderBottom:'none'},' .errorText':{bottom:-20,left:18},' .StripeElement':{paddingLeft:16}}).toString(),secondRow:css({display:'flex',flexDirection:'row'}).toString(),cvc:css({flex:1.5,marginRight:16}).toString(),expiry:css({flex:1}).toString()};/* eslint-disable react/prop-types */ /**
 * Wrapper
 * @param {Object} Element element
 * @returns {Object}
 */var wrapStripeElement=function wrapStripeElement(Element){return(/*#__PURE__*/function(_React$Component){function _class(){var _this2;_classCallCheck(this,_class);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,_class,[].concat(args));_defineProperty(_this2,"onChange",function(){_this2.props.onChange({target:{value:' '}});});return _this2;}_inherits(_class,_React$Component);return _createClass(_class,[{key:"render",value:/** Render
   * @returns {JSX} */function render(){return React.createElement(Element,_extends({},this.props,{onChange:this.onChange}));}}]);}(React.Component));};/* eslint-enable react/prop-types */var StripeCardNumberElement=wrapStripeElement(CardNumberElement);var StripeCardCvcElement=wrapStripeElement(CardCvcElement);var StripeCardExpiryElement=wrapStripeElement(CardExpiryElement);/**
 * PickupContactForm
 * @returns {JSX}
 */var StripeCreditCard=function StripeCreditCard(){var _paymentData$meta;var cardRef=React.useRef();var _useContext=useContext(StripeContext),error=_useContext.error,setError=_useContext.setError;var _useCheckoutContext=useCheckoutContext(),needsPayment=_useCheckoutContext.needsPayment,paymentData=_useCheckoutContext.paymentData;// Scrolls to stripe config when error is set.
React.useEffect(function(){if(!error)return;cardRef.current.scrollIntoView({behavior:'smooth'});},[error]);if(!needsPayment){return null;}if(!!(paymentData===null||paymentData===void 0?void 0:(_paymentData$meta=paymentData.meta)===null||_paymentData$meta===void 0?void 0:_paymentData$meta.stripeRequest)||!!(paymentData===null||paymentData===void 0?void 0:paymentData.meta)){return null;}var textFieldStyles={style:{base:{color:getCSSCustomProp('--color-text-high-emphasis'),'::placeholder':{color:getCSSCustomProp('--color-text-low-emphasis')}}}};return React.createElement("div",{ref:cardRef,className:styles.root},React.createElement(Section,{title:"checkout.creditCard.headline",hasForm:true},React.createElement(TextField,{label:i18n.text('checkout.creditCard.card'),name:"creditCard",inputComponent:StripeCardNumberElement,isControlled:false,value:" ",errorText:error||undefined,onChange:function onChange(){return error&&setError(null);},variables:true,attributes:{options:_extends({showIcon:true},textFieldStyles)}}),React.createElement("div",{className:styles.secondRow},React.createElement(TextField,{className:styles.cvc,label:i18n.text('checkout.creditCard.cvc'),name:"creditCard",inputComponent:StripeCardCvcElement,isControlled:false,onChange:function onChange(){return error&&setError(null);},value:" ",attributes:{options:_extends({},textFieldStyles)}}),React.createElement(TextField,{className:styles.expiry,label:i18n.text('checkout.creditCard.expiry'),name:"creditCard",inputComponent:StripeCardExpiryElement,isControlled:false,onChange:function onChange(){return error&&setError(null);},value:" ",attributes:{options:_extends({},textFieldStyles)}}))));};export default StripeCreditCard;