{this.props.title}
\r\n {this.props.grad && }\r\n \r\n\r\n
\r\n );\r\n }\r\n}","import React, { useState, useEffect } from 'react';\r\nimport { ProgressBar, Classes, Popover, Callout, Tabs, Tab, HTMLSelect, Button, FormGroup, RadioGroup, Radio, H2, Checkbox, Intent, Card, Elevation, H5, InputGroup } from \"@blueprintjs/core\";\r\nimport { Address } from \"./Address\";\r\nimport { IconNames } from \"@blueprintjs/icons\";\r\nimport { CreditCardPaymentInfo } from \"./CreditCardPaymentInfo\";\r\nimport titleImg from '../images/myDieselSavings.PNG';\r\nimport axios from 'axios';\r\nimport { isMobile } from 'react-device-detect';\r\nimport StateDropDown from \"../UI/StateDropDown\";\r\n\r\nexport default function Join(props) {\r\n const [showProcessing, setShowProcessing] = useState(0);\r\n const [popupType, setPopupType] = useState('req');\r\n const [clickPass, setClickPass] = useState(false);\r\n const [shouldValidate, setValidate] = useState(false);\r\n const [referrals, setReferrals] = useState([]);\r\n const [addressValidated, setAddressValidated] = useState({ mailing: false, billing: false, company: false, temporary: false });\r\n const [addressToValidate, setAddressToValidate] = useState();\r\n document.title = \"My Diesel Savings\";\r\n const notRequired = [\"issuer\", \"billingaddress2\", \"mailingaddress2\", \"sameAs\",\r\n \"companyName\",\r\n \"companyaddress\",\r\n \"companyaddress2\",\r\n \"companycity\",\r\n \"companystate\",\r\n \"companyzip\",\r\n \"temporaryaddress\",\r\n \"gastanksize\",\r\n \"temporaryaddress2\",\r\n \"backupEmail\",\r\n \"temporarycity\",\r\n \"temporarystate\",\r\n \"suffix\",\r\n \"middleinitial\",\r\n \"temporaryzip\",\r\n \"issuer\"];\r\n const paymentNotReq = {\r\n credit: [\"achRoutingNumber\", \"achAccountNumber\", \"achVerfyAccountNumber\"],\r\n ach: [\"name\", \"cvc\", \"expiry\", \"number\"]\r\n };\r\n const billingFields = [\"billingaddress\", \"billingcity\", \"billingstate\", \"billingzip\"];\r\n const noNumberFields = [\"lpstate\", \"dlissue\", \"billingstate\", \"mailingstate\", \"companystate\", \"temporarystate\"];\r\n const numberOnlyFields = [\"achRoutingNumber\", \"achVerfyAccountNumber\", \"achAccountNumber\"];\r\n const noNegNumberFields = [\"numAddReqCards\", \"tankSize\", \"gasTankSize\"];\r\n\r\n const [popupOpen, setPopupOpen] = useState(false);\r\n const [imageReady, setImageReady] = useState(false);\r\n const [isValid, setIsValid] = useState(true);\r\n \r\n\r\n function checkIsValid() {\r\n\r\n for (const property in state) {\r\n if (!notRequired.includes(property) && !paymentNotReq[state[\"paymentMethod\"]].includes(property)) {\r\n if (!(state[\"sameAs\"] && billingFields.includes(property))) {\r\n if (state[property] === '') {\r\n return false;\r\n }\r\n }\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n function hasACH() {\r\n if (state.achAccountNumber\r\n || state.achRoutingNumber\r\n || state.achVerfyAccountNumber)\r\n return true;\r\n\r\n return false;\r\n }\r\n function hasCredit() {\r\n\r\n if (state.number\r\n || state.expiry\r\n || state.cvc\r\n || state.name) {\r\n\r\n return true;\r\n\r\n }\r\n\r\n return false;\r\n }\r\n const [state, setState] = useState(\r\n {\r\n suffix: '',\r\n middleinitial: '',\r\n paymentMethod: 'ach',\r\n achAccountTypeRadio: 'checking',\r\n achAccountNumber: '',\r\n achRoutingNumber: '',\r\n achVerfyAccountNumber: '',\r\n sameAs: false,\r\n firstName: '',\r\n lastName: '',\r\n companyName: '',\r\n companyaddress: '',\r\n companyaddress2: '',\r\n companycity: '',\r\n companystate: '',\r\n companyzip: '',\r\n temporaryaddress: '',\r\n temporaryaddress2: '',\r\n temporarycity: '',\r\n temporarystate: '',\r\n temporaryzip: '',\r\n mailingaddress: '',\r\n mailingaddress2: '',\r\n mailingcity: '',\r\n mailingstate: '',\r\n mailingzip: '',\r\n billingaddress: '',\r\n billingaddress2: '',\r\n billingcity: '',\r\n billingstate: '',\r\n billingzip: '',\r\n referrer: '',\r\n cvc: '',\r\n expiry: '',\r\n custType: '3',\r\n name: '',\r\n number: '',\r\n mobilePhone: '',\r\n homePhone: '',\r\n email: '',\r\n backupEmail: '',\r\n numAddReqCards: '',\r\n dlnum: '',\r\n lpnum: '',\r\n dlissue: '',\r\n tankSize: '',\r\n lpstate: '',\r\n issuer: '',\r\n gastanksize: '',\r\n cardIsValid: false,\r\n cardFrom: new URLSearchParams(window.location.search).get(\"ref\")\r\n });\r\n\r\n useEffect(() => {\r\n console.log(window.location.href);\r\n\r\n console.log(\"version 0.10\");\r\n function onLoad() {\r\n\r\n const headers = {\r\n \"Content-Type\": \"application/json\",\r\n \"Cache-Control\": \"no-cache\",\r\n 'Access-Control-Allow-Origin': '*',\r\n };\r\n\r\n setTimeout(() => {\r\n axios.get('api/customerportal/getReferrals',\r\n {\r\n headers: headers\r\n }).then((response) => {\r\n handleGetReferralsResponse(response);\r\n }).catch((e) => handleJoinError(e));\r\n }, 1000);\r\n }\r\n\r\n const img = new Image();\r\n img.onload = () => {\r\n setImageReady(true);\r\n }\r\n img.src = titleImg;\r\n onLoad();\r\n }, [])\r\n\r\n function handleGetReferralsResponse(response) {\r\n setReferrals(response.data.referrals);\r\n\r\n }\r\n function updateState(name, value) {\r\n\r\n const newState = { ...state };\r\n newState[name] = value;\r\n setState(newState);\r\n\r\n }\r\n\r\n function handleInputChange(e) {\r\n const { name, value } = e.target;\r\n\r\n const re = /^[0-9\\b]+$/;\r\n const al = /^[A-Za-z]+$/;\r\n\r\n if (value !== '' && numberOnlyFields.includes(name) && !re.test(value))\r\n return;\r\n\r\n if (value !== '' && noNumberFields.includes(name) && !al.test(value))\r\n return;\r\n\r\n if (value !== '' && noNegNumberFields.includes(name) && !re.test(value))\r\n return;\r\n if (value !== '' && noNegNumberFields.includes(name) && value === \"-\")\r\n return;\r\n\r\n if (value !== '' && noNegNumberFields.includes(name) && isNaN(parseInt(value)))\r\n return;\r\n if (value !== '' && noNegNumberFields.includes(name) && parseInt(value) < 0)\r\n return\r\n\r\n if (!isValid)\r\n setIsValid(true);\r\n\r\n updateState(name, value);\r\n }\r\n\r\n function handleCardValidAndIssuer(issuer, isValid) {\r\n const newState = { ...state };\r\n newState.issuer = issuer;\r\n newState.cardIsValid = isValid;\r\n setState(newState);\r\n }\r\n\r\n function handleCardInput(name, value) {\r\n updateState(name, value);\r\n }\r\n\r\n function handleAccountTypeRadioChange(event) {\r\n const value = event.target.value;\r\n updateState(\"achAccountTypeRadio\", value);\r\n }\r\n\r\n function handleSameAs(event) {\r\n const check = event.target.checked;\r\n updateState(\"sameAs\", check);\r\n }\r\n\r\n function handleUseCredit() {\r\n setClickPass(true);\r\n }\r\n\r\n const ccWarningMobileInfoStyle = {\r\n Height: \"270px\",\r\n overfllow: \"scroll\"\r\n }\r\n\r\n function creditPaymentMethod() {\r\n if (!clickPass) {\r\n const useCreditSytle =\r\n {\r\n marginRight: isMobile ? \"0px\" : \"15px\",\r\n marginTop: \"15px\",\r\n float: isMobile ? \"right\" : \"\"\r\n };\r\n function headline() {\r\n const headlineText = \"ACH transactions have the lowest costs associated with any payment system and are widely considered to be the safest financial transactions.\";\r\n if (isMobile)\r\n return ({headlineText});\r\n else\r\n return (\r\n
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n ![\"we](\"visa-mastercard-discover-logo.png\")
\r\n
\r\n \r\n {headlineText}
);\r\n }\r\n return (\r\n\r\n \r\n {headline}\r\n\r\n The Electronic Fund Transfer Act protects consumers from fraudulent ACH transactions.\r\n Customers have 60 days after the transmittal of the statement with the unauthorized charge to report it to their bank, and they have no liability.\r\n Another added security measure with ACH is that authorization is required before any money can be debited from a bank account. That means that the\r\n customer has to authorize the company to debit the account and the company conforms to ACH Operating Rules, which is not the case with credit and/or debit card transactions.\r\n\r\n \r\n
);\r\n }\r\n\r\n\r\n return (\r\n \r\n handleTabChange('ach')}\r\n icon=\"endorsed\" intent=\"success\" text=\"Continue with ACH\" />\r\n
\r\n \r\n
);\r\n }\r\n\r\n function achPaymentMethod() {\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n\r\n function HandleSubmit() {\r\n\r\n setValidate(true);\r\n\r\n if (checkIsValid()) {\r\n\r\n if (hasCredit() && !isValidExpiry()) {\r\n setPopupType(\"exp\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n if (state.achRoutingNumber.length !== 9 && hasACH()) {\r\n setPopupType(\"ach\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n if ((!isValidEmail(state.email) || ((state.backupEmail !== '' && !isValidEmail(state.backupEmail))))) {\r\n setPopupType(\"bem\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n if (!phoneValueIsValid(state.homePhone)) {\r\n setPopupType(\"hph\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n if (!phoneValueIsValid(state.mobilePhone)) {\r\n setPopupType(\"mph\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n for (const property in noNegNumberFields) {\r\n if (parseInt(state[property]) < 0) {\r\n setPopupType(\"nnn\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n }\r\n\r\n if (hasCredit()) {\r\n if (state.issuer !== \"mastercard\" && state.issuer !== \"visa\" && state.issuer !== \"discover\") {\r\n setPopupType(\"ct\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n if (!state.cardIsValid) {\r\n setPopupType(\"valid\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n }\r\n \r\n setShowProcessing(4);\r\n\r\n }\r\n else {\r\n setPopupType(\"req\");\r\n setPopupOpen(true);\r\n }\r\n }\r\n\r\n function phoneValueIsValid(str) {\r\n\r\n if (!str || str.length === 0)\r\n return false;\r\n\r\n var pe = /^[\\\\+]?[(]?[0-9]{3}[)]?[-\\s\\\\.]?[0-9]{3}[-\\s\\\\.]?[0-9]{4,6}$/im;\r\n\r\n if (!pe.test(str))\r\n return false;\r\n\r\n let jn = str.replace(/\\)/g, \"\");\r\n jn = jn.replace(/\\(/g, \"\");\r\n jn = jn.replace(/-/g, \"\");\r\n\r\n if (jn.length > 10)\r\n return false;\r\n\r\n let start = 0;\r\n const end = jn.length;\r\n if (jn.length >= 4)\r\n start = jn.length - 4;\r\n else\r\n start = 0;\r\n\r\n var l4 = jn.substring(start, end);\r\n\r\n const re = /^[0-9\\b]+$/;\r\n\r\n if (!l4 || l4.length < 1 || !re.test(l4))\r\n return false;\r\n\r\n return true;\r\n }\r\n\r\n function getPopupContent() {\r\n if (popupType === 'ach') {\r\n return (\r\n \r\n
);\r\n }\r\n if (popupType === 'req') {\r\n return (\r\n ACH Routing Number
\r\nThe ACH Routing field must be 9 digits.
\r\n\r\n
);\r\n }\r\n if (popupType === 'ct') {\r\n return (\r\n Required Fields Missing
\r\nPlease complete all the required fields and try again.
\r\n\r\n
);\r\n }\r\n if (popupType === 'nnn') {\r\n return (\r\n Credit card type not accepted
\r\nOnly Master Card, Visa and Discover is accepted.
\r\n\r\n
);\r\n }\r\n if (popupType === 'exp') {\r\n return (\r\n Must be a positive Number
\r\nThe Number of Requested cards, diesel tanks size
\r\nand gas tank size must have positive numbers
\r\n\r\n
);\r\n }\r\n if (popupType === 'bem') {\r\n return (\r\n Credit Card Expiry
\r\nThe date entered for the credit card is and expired date.
\r\nPlease correct to continue.
\r\n\r\n
);\r\n }\r\n if (popupType === 'hph') {\r\n return (\r\n Email not valid
\r\nThe Email address supplied is not in a valid format.
\r\nuse format: someone@someplace.com
\r\n\r\n
);\r\n }\r\n if (popupType === 'mph') {\r\n return (\r\n Home Phone Number
\r\nis not in a valid format.
\r\nuse format: 555-876-5409
\r\n\r\n
);\r\n }\r\n if (popupType === 'valid') {\r\n return (\r\n Mobile Phone Number
\r\nis not in a valid format.
\r\nuse format: 555-876-5409
\r\n\r\n
);\r\n }\r\n }\r\n\r\n function handleTabChange(e) {\r\n\r\n setClickPass(false);\r\n\r\n updateState(\"paymentMethod\", e);\r\n }\r\n\r\n function makeInvalid() {\r\n if (isValid)\r\n setIsValid(false);\r\n\r\n\r\n }\r\n\r\n function isNowInvalid() {\r\n makeInvalid();\r\n\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Required)\"\r\n };\r\n }\r\n\r\n function GroupProps(name) {\r\n\r\n if (shouldValidate) {\r\n\r\n\r\n if (name === 'expiry' && hasCredit() && !isValidExpiry()) {\r\n makeInvalid();\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Expired)\"\r\n }\r\n }\r\n\r\n if ((name === \"name\" || name === \"expiry\" || name === \"cvc\" || name === \"number\") && !hasCredit())\r\n return;\r\n\r\n\r\n if ((name === \"achAccountNumber\" || name === \"achRoutingNumber\" || name === \"achVerfyAccountNumber\") && hasCredit() && !hasACH())\r\n return;\r\n\r\n if (\r\n (name === 'billingstateselect' && !state.billingstate)\r\n || (name === 'mailingstateselect' && !state.mailingstate)\r\n || (name === 'dlissueselect' && !state.dlissue)\r\n || (name === 'lpstateselect' && !state.lpstate)) {\r\n makeInvalid();\r\n return {\r\n borderWidth: \"1px\",\r\n borderStyle: \"solid\",\r\n borderColor: \"#db3737\"\r\n }\r\n }\r\n if ((name === 'billingstate' && !state.billingstate)\r\n || (name === 'mailingstate' && !state.mailingstate)\r\n || (name === 'dlissue' && !state.dlissue)\r\n || (name === 'lpstate' && !state.lpstate))\r\n return \"(Required)\";\r\n\r\n if (name === 'mailingstate'\r\n || name === 'billingstate'\r\n || name === 'dlissue'\r\n || name === 'lpstate'\r\n || name === 'companystate'\r\n || name === 'temporarystate')\r\n return '';\r\n\r\n if (name === 'referrerSelect' && state[\"referrer\"] === '') {\r\n makeInvalid();\r\n return {\r\n style: {\r\n borderWidth: \"1px\",\r\n borderStyle: \"solid\",\r\n borderColor: \"#db3737\"\r\n }\r\n }\r\n }\r\n\r\n if (hasACH()) {\r\n if (name === 'achVerfyAccountNumber' && state[\"achVerfyAccountNumber\"] !== state[\"achAccountNumber\"]) {\r\n makeInvalid();\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Does not match accout number)\"\r\n }\r\n }\r\n }\r\n\r\n if (paymentNotReq[state[\"paymentMethod\"]].includes(name))\r\n return {};\r\n\r\n\r\n if (name === \"homePhone\" || name === \"mobilePhone\") {\r\n if (!phoneValueIsValid(state[name])) {\r\n return isNowInvalid();\r\n }\r\n }\r\n\r\n if (!notRequired.includes(name) && state[name] === '') {\r\n\r\n return isNowInvalid();\r\n }\r\n\r\n if (name === \"backupEmail\" || name === \"email\") {\r\n if (state[name] !== '') {\r\n if (!isValidEmail(state[name])) {\r\n makeInvalid();\r\n\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Not a valid email address)\"\r\n };\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (name === 'mailingstate' || name === 'billingstate' || name === 'dlissue' || name === 'lpstate' || name === 'temporarystate' || name === 'companystate')\r\n return '';\r\n\r\n return {};\r\n }\r\n function isValidExpiry() {\r\n const value = state.expiry.replace(/\\D+/g, \"\");\r\n const month = parseInt(value.slice(0, 2));\r\n let year = parseInt(value.slice(2, 6));\r\n if (year < 1000)\r\n year += 2000;\r\n const currentYear = new Date().getFullYear();\r\n if (year > currentYear)\r\n return true;\r\n if (year < currentYear)\r\n return false;\r\n const currentMonth = new Date().getMonth();\r\n if (month < currentMonth)\r\n return false;\r\n\r\n return true;\r\n }\r\n function isValidEmail(value) {\r\n const pattern = new RegExp(/^((\"[\\w-\\s]+\")|([\\w-]+(?:\\.[\\w-]+)*)|(\"[\\w-\\s]+\")([\\w-]+(?:\\.[\\w-]+)*))(@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-z]{2,6}(?:\\.[a-z]{2})?)$)|(@\\[?((25[0-5]\\.|2[0-4][0-9]\\.|1[0-9]{2}\\.|[0-9]{1,2}\\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\]?$)/i);\r\n\r\n if (!pattern.test(value))\r\n return false;\r\n\r\n return true;\r\n\r\n }\r\n const outerSplitStyle = {\r\n display: \"inline-block\",\r\n width: \"100%\"\r\n };\r\n const innerSplitElementStyle = {\r\n width: \"50%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n };\r\n const innerSplit4ElementStyle = {\r\n width: \"33%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n };\r\n const innerSplitMiddleElementStyle = {\r\n width: \"17%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n };\r\n const tanksizeSplit = {\r\n width: \"25%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n }\r\n function AdditionalInfo() {\r\n\r\n return (\r\n Credit card number is not valid
\r\nPlease enter a valid credit card number and try again.
\r\n\r\n \r\n \r\n
);\r\n }\r\n\r\n function makeReferralOption(x) {\r\n return (\r\n );\r\n }\r\n\r\n function ContactInfo() {\r\n\r\n return (\r\n <>\r\n Additional Information
\r\n \r\n \r\nContact Information
\r\n \r\n \r\n\r\n 
\r\n
\r\n );\r\n }\r\n\r\n function CorrectedCard() {\r\n if (addressToValidate.response.addressNotFound)\r\n return (USPS found a different address
\r\nSelect the best address to use or cancel to return
\r\n \r\n\r\n \r\n \r\n\r\n \r\n {CorrectedCard()}\r\n \r\n\r\n
\r\n Entered for {addressToValidate.title}
\r\nAddress: {addressToValidate.address.address1}
\r\nAddress2: {addressToValidate.address.address2}
\r\nCity: {addressToValidate.address.city}
\r\nState: {addressToValidate.address.state}
\r\nZip: {addressToValidate.address.zip}
\r\n {ChooseButton(() => choosebuttonClick('e', addressToValidate.type))}\r\n\r\n \r\n Cancel\r\n \r\n
\r\n Corrected Address
\r\nAddress Not Found
\r\nCancel to correct the address.
\r\nCorrected Address
\r\nAddress: {addressToValidate.response.address1}
\r\nAddress2: {addressToValidate.response.address2}
\r\nCity: {addressToValidate.response.city}
\r\nState: {addressToValidate.response.state}
\r\nZip: {addressToValidate.response.zip}
\r\n {ChooseButton(() => choosebuttonClick('c', addressToValidate.type))}\r\n\r\n \r\n \r\n One minute while we validate your addresses with the USPS servers.\r\n \r\n\r\n
\r\n );\r\n }\r\n\r\n function post() {\r\n\r\n setShowProcessing(1);\r\n const headers = {\r\n \"Content-Type\": \"application/json\",\r\n \"Cache-Control\": \"no-cache\",\r\n 'Access-Control-Allow-Origin': '*',\r\n };\r\n\r\n const params =\r\n { ...state };\r\n\r\n setTimeout(() => {\r\n\r\n axios.post('api/customerportal/join',\r\n params, {\r\n headers: headers\r\n }).then((response) => {\r\n handleJoinResponse(response);\r\n }).catch((e) => handleJoinError(e));\r\n }, 1000);\r\n }\r\n\r\n function handleJoinResponse(response) {\r\n setShowProcessing(2);\r\n\r\n }\r\n\r\n function handleJoinError(e) {\r\n setShowProcessing(3);\r\n console.log(\"an error Occurred while posting data to the server.\");\r\n console.log(e);\r\n\r\n }\r\n\r\n const addressStyle = {\r\n width: \"50%\",\r\n marginTop: \"10px\",\r\n display: \"inline-block\"\r\n }\r\n const mailingAddressStyle = {\r\n width: \"50%\",\r\n marginTop: \"40px\",\r\n display: \"inline-block\"\r\n }\r\n const mobileAddressStyle = {\r\n marginTop: \"10px\"\r\n }\r\n const mobileRightAddressStyle = {\r\n marginTop: \"10px\"\r\n }\r\n const addressContainer = {\r\n display: \"inline-block\",\r\n width: \"100%\"\r\n }\r\n const rightAddressShort = {\r\n width: \"50%\",\r\n marginTop: \"10px\",\r\n display: \"inline-block\",\r\n paddingLeft: \"10px\",\r\n float: \"right\"\r\n }\r\n const achTabStyle =\r\n {\r\n color: \"white\",\r\n marginRight: isMobile ? \"15px\" : \"\"\r\n }\r\n\r\n\r\n function signup() {\r\n\r\n return (\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n\r\n function finish() {\r\n return (\r\n \r\n
\r\n\r\n \r\n {ContactInfo()}\r\n
\r\n \r\n {AdditionalInfo()}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n { return '' }}\r\n prefix={\"company\"}\r\n showCompanyName\r\n handleInputChange={handleInputChange}\r\n title={\"Company Information\"}\r\n values={state} />\r\n
\r\n \r\n { return ''; }}\r\n prefix={\"temporary\"}\r\n handleInputChange={handleInputChange}\r\n title={\"Temporary Address\"}\r\n values={state}\r\n extraSpace={isMobile ? false : true} />\r\n
\r\n Payment Information
\r\n\r\n\r\n\r\n setPopupOpen(false)}\r\n isOpen={popupOpen}>\r\n\r\n \r\n {getPopupContent()}\r\n\r\n \r\n
\r\n \r\n \r\n \r\n Thank you for signing up. Your data has been submitted for review. The team will be reaching out shortly.\r\n \r\n\r\n \r\n
);\r\n }\r\n\r\n function processing() {\r\n return (\r\n NOTE: Please whitelist support@mdshosted.com to ensure you get updates about your cards progress!
\r\n\r\n \r\n \r\n One minute while we transfer your data to our secure servers.\r\n \r\n
\r\n );\r\n }\r\n\r\n function error() {\r\n return (\r\n \r\n \r\n \r\n Something went wrong. Contact support\r\n \r\n
);\r\n }\r\n\r\n function main() {\r\n\r\n if (showProcessing === 1)\r\n return processing();\r\n\r\n if (showProcessing === 2)\r\n return finish();\r\n\r\n if (showProcessing === 3)\r\n return error();\r\n\r\n if (showProcessing === 4)\r\n performValidations(addressValidated);\r\n\r\n if (showProcessing === 7) {\r\n return addressValidation();\r\n }\r\n if (showProcessing === 5)\r\n return showAddressValidationPanel();\r\n\r\n if (showProcessing === 6)\r\n return (<>done);\r\n\r\n return signup();\r\n }\r\n\r\n\r\n\r\n return (\r\n <>\r\n {imageReady ? main() : <>}\r\n \r\n );\r\n}\r\n","import { useState, useEffect } from 'react';\r\n\r\nfunction getWindowDimensions() {\r\n const { innerWidth: width, innerHeight: height } = window;\r\n return {\r\n width,\r\n height\r\n };\r\n}\r\n\r\nexport default function useWindowDimensions() {\r\n const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());\r\n\r\n useEffect(() => {\r\n function handleResize() {\r\n setWindowDimensions(getWindowDimensions());\r\n }\r\n\r\n window.addEventListener('resize', handleResize);\r\n return () => window.removeEventListener('resize', handleResize);\r\n }, []);\r\n\r\n return windowDimensions;\r\n}","import React, { useState, useEffect } from 'react';\r\nimport { Spinner, ProgressBar, Classes, Popover, Callout, Tabs, Tab, TextArea, HTMLSelect, Button, FormGroup, RadioGroup, Label, Radio, H2, Checkbox, Intent, Card, Elevation, H5, InputGroup } from \"@blueprintjs/core\";\r\nimport { Address } from \"./Address\";\r\nimport { IconNames } from \"@blueprintjs/icons\";\r\nimport { CreditCardPaymentInfo } from \"./CreditCardPaymentInfo\";\r\nimport titleImg from '../images/logo1.png';\r\nimport axios from 'axios';\r\nimport { isMobile } from 'react-device-detect';\r\nimport LabelStateSelect from \"../UI/StateDropDown\";\r\nimport { Document, Page } from 'react-pdf/dist/esm/entry.webpack';\r\nimport { pdfjs } from 'react-pdf';\r\nimport useWindowDimensions from \"../Hooks/UseWindowDimensions\";\r\nimport './Escapees.css';\r\n\r\n\r\npdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';\r\n\r\nexport default function EscapeesJoin(props) {\r\n const [showProcessing, setShowProcessing] = useState(0);\r\n const [popupType, setPopupType] = useState('req');\r\n const [clickPass, setClickPass] = useState(false);\r\n const [shouldValidate, setValidate] = useState(false);\r\n const [pdfDetails, setPdfDetails] = useState({ numPages: 0, id: 0 });\r\n const favicon = document.getElementById(\"favicon\");\r\n const cardFrom = new URLSearchParams(window.location.search).get(\"crdfrm\");\r\n const partnerCustomerCode = new URLSearchParams(window.location.search).get(\"pcc\");\r\n const partnerExpiration = new URLSearchParams(window.location.search).get(\"pce\");\r\n const isMds = !partnerCustomerCode && !partnerExpiration;\r\n\r\n favicon.href = \"https://cdn.mdshosted.com/web/siteicon.png\";\r\n\r\n function onDocumentLoadSuccess(numPages, id) {\r\n setPdfDetails({ numPages, id: Number(id) });\r\n }\r\n document.title = \"Program Application\";\r\n const [addressValidated, setAddressValidated] = useState({ mailing: false, billing: false, company: false, temporary: false });\r\n const [addressToValidate, setAddressToValidate] = useState();\r\n\r\n const addressFields = [\r\n 'companyaddress', 'companyaddress2', 'companycity', 'companystate',\r\n 'companyzip',\r\n 'temporaryaddress',\r\n 'temporaryaddress2',\r\n 'temporarycity',\r\n 'temporarystate',\r\n 'temporaryzip',\r\n 'mailingaddress',\r\n 'mailingaddress2',\r\n 'mailingcity',\r\n 'mailingstate',\r\n 'mailingzip',\r\n 'billingaddress',\r\n 'billingaddress2',\r\n 'billingcity',\r\n 'billingstate',\r\n 'billingzip'];\r\n\r\n const notRequired = [\"issuer\", \"billingaddress2\", \"mailingaddress2\", \"sameAs\",\r\n \"companyName\",\r\n \"companyaddress\",\r\n \"companyaddress2\",\r\n \"companycity\",\r\n \"companystate\",\r\n \"companyzip\",\r\n \"homePhone\",\r\n \"temporaryaddress\",\r\n \"gastanksize\",\r\n \"temporaryaddress2\",\r\n \"backupEmail\",\r\n \"temporarycity\",\r\n \"temporarystate\",\r\n \"suffix\",\r\n \"middleinitial\",\r\n \"shippingMessage\",\r\n \"temporaryzip\",\r\n \"issuer\"];\r\n const paymentNotReq = {\r\n credit: [\"achRoutingNumber\", \"achAccountNumber\", \"achVerfyAccountNumber\"],\r\n ach: [\"name\", \"cvc\", \"expiry\", \"number\"]\r\n };\r\n const billingFields = [\"billingaddress\", \"billingcity\", \"billingstate\", \"billingzip\"];\r\n const noNumberFields = [\"lpstate\", \"dlissue\", \"billingstate\", \"mailingstate\", \"companystate\", \"temporarystate\"];\r\n const numberOnlyFields = [\"achRoutingNumber\", \"achVerfyAccountNumber\", \"achAccountNumber\"];\r\n const noNegNumberFields = [\"numAddReqCards\", \"tankSize\", \"gasTankSize\"];\r\n const { height, width } = useWindowDimensions();\r\n const [popupOpen, setPopupOpen] = useState(false);\r\n const [imageReady, setImageReady] = useState(false);\r\n const [isValid, setIsValid] = useState(true);\r\n const [pdfs, setPdfs] = useState();\r\n const [shippingOptions, setShippingOptions] = useState();\r\n\r\n function showPdfs() {\r\n const mobileStyle = { marginTop: \"10px\" }\r\n const style = { marginLeft: \"15vw\", width: \"70vw\", marginTop: \"5vh\" };\r\n\r\n if (!pdfs)\r\n return (<>loading pdf data);\r\n\r\n if (!pdfs.length === 0 || pdfs.filter((f) => !f.validated).length === 0) {\r\n const vers = pdfs.map(m => `${m.pdfTitle}=${m.pdfVersion}`).join(',');\r\n post(vers);\r\n return processing();\r\n }\r\n\r\n const allPdfs = [...pdfs];\r\n allPdfs.sort((a, b) => a.pdfOrder > b.pdfOrder ? 1 : -1);\r\n\r\n const currentPdf = pdfDetails.id === 0 ?\r\n allPdfs.find((f) => !f.validated)\r\n : pdfs.find((f) => Number(f.pdfId) === Number(pdfDetails.id));\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n function checkIsValid() {\r\n\r\n for (const property in state) {\r\n if (!notRequired.includes(property) && !paymentNotReq[state[\"paymentMethod\"]].includes(property)) {\r\n if (!(state[\"sameAs\"] && billingFields.includes(property))) {\r\n if (state[property] === '') {\r\n return false;\r\n }\r\n }\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n function hasACH() {\r\n if (state.achAccountNumber\r\n || state.achRoutingNumber\r\n || state.achVerfyAccountNumber)\r\n return true;\r\n\r\n return false;\r\n }\r\n function hasCredit() {\r\n\r\n if (state.number\r\n || state.expiry\r\n || state.cvc\r\n || state.name) {\r\n\r\n return true;\r\n\r\n }\r\n\r\n return false;\r\n }\r\n const [state, setState] = useState(\r\n {\r\n suffix: '',\r\n middleinitial: '',\r\n paymentMethod: 'ach',\r\n achAccountTypeRadio: 'checking',\r\n shippingOption: '1',\r\n shippingMessage: '',\r\n achAccountNumber: '',\r\n achRoutingNumber: '',\r\n achVerfyAccountNumber: '',\r\n sameAs: false,\r\n firstName: '',\r\n lastName: '',\r\n companyName: '',\r\n companyaddress: '',\r\n companyaddress2: '',\r\n companycity: '',\r\n companystate: '',\r\n companyzip: '',\r\n temporaryaddress: '',\r\n temporaryaddress2: '',\r\n temporarycity: '',\r\n temporarystate: '',\r\n temporaryzip: '',\r\n mailingaddress: '',\r\n mailingaddress2: '',\r\n mailingcity: '',\r\n mailingstate: '',\r\n mailingzip: '',\r\n billingaddress: '',\r\n billingaddress2: '',\r\n billingcity: '',\r\n billingstate: '',\r\n billingzip: '',\r\n referrer: 'Escap',\r\n cvc: '',\r\n expiry: '',\r\n name: '',\r\n number: '',\r\n mobilePhone: '',\r\n homePhone: '',\r\n email: '',\r\n backupEmail: '',\r\n numAddReqCards: '',\r\n dlnum: '',\r\n lpnum: '',\r\n dlissue: '',\r\n tankSize: '',\r\n lpstate: '',\r\n issuer: '',\r\n gastanksize: '',\r\n cardIsValid: false,\r\n cardFrom: cardFrom,\r\n partnerCustomerCode: isMds ? 'PENDING' : partnerCustomerCode,\r\n partnerExpiration: partnerExpiration,\r\n isMds: isMds,\r\n pdfVersions: '1,1',\r\n custType: '1'\r\n });\r\n\r\n useEffect(() => {\r\n console.log(window.location.href);\r\n\r\n console.log(\"version 0.18 escapees\");\r\n\r\n function onLoad() {\r\n\r\n const headers = {\r\n \"Content-Type\": \"application/json\",\r\n \"Cache-Control\": \"no-cache\",\r\n 'Access-Control-Allow-Origin': '*',\r\n };\r\n\r\n setTimeout(() => {\r\n axios.get('api/customerportal/getEscapeesPdfDetails',\r\n {\r\n headers: headers\r\n })\r\n .then((response) => {\r\n setPdfs(response.data.joinPdfDetails.map((el, i) => { return { ...el, validated: false } }));\r\n setShippingOptions(response.data.shippingOptions)\r\n })\r\n .catch((e) => handleJoinError(e));\r\n }, 1000);\r\n }\r\n\r\n onLoad();\r\n\r\n const img = new Image();\r\n img.onload = () => {\r\n setImageReady(true);\r\n }\r\n img.src = titleImg;\r\n\r\n }, [])\r\n\r\n\r\n function updateState(name, value) {\r\n const newState = { ...state };\r\n newState[name] = value;\r\n setState(newState);\r\n }\r\n\r\n\r\n function handleInputChange(e) {\r\n const { name, value } = e.target;\r\n\r\n const re = /^[0-9\\b]+$/;\r\n const al = /^[A-Za-z]+$/;\r\n\r\n if (value !== '' && numberOnlyFields.includes(name) && !re.test(value))\r\n return;\r\n\r\n if (value !== '' && noNumberFields.includes(name) && !al.test(value))\r\n return;\r\n\r\n if (value !== '' && noNegNumberFields.includes(name) && !re.test(value))\r\n return;\r\n if (value !== '' && noNegNumberFields.includes(name) && value === \"-\")\r\n return;\r\n\r\n if (value !== '' && noNegNumberFields.includes(name) && isNaN(parseInt(value)))\r\n return;\r\n if (value !== '' && noNegNumberFields.includes(name) && parseInt(value) < 0)\r\n return\r\n\r\n if (!isValid)\r\n setIsValid(true);\r\n\r\n updateState(name, value);\r\n }\r\n\r\n function handleCardValidAndIssuer(issuer, isValid) {\r\n const newState = { ...state };\r\n newState.issuer = issuer;\r\n newState.cardIsValid = isValid;\r\n setState(newState);\r\n }\r\n\r\n function handleCardInput(name, value) {\r\n updateState(name, value);\r\n }\r\n\r\n function handleShippingOptionsRadioChange(event) {\r\n const value = event.target.value;\r\n updateState(\"shippingOption\", value);\r\n }\r\n\r\n function handleAccountTypeRadioChange(event) {\r\n const value = event.target.value;\r\n updateState(\"achAccountTypeRadio\", value);\r\n }\r\n\r\n function handleSameAs(event) {\r\n const check = event.target.checked;\r\n updateState(\"sameAs\", check);\r\n }\r\n\r\n function handleUseCredit() {\r\n setClickPass(true);\r\n }\r\n\r\n const ccWarningMobileInfoStyle = {\r\n Height: \"270px\",\r\n overfllow: \"scroll\"\r\n }\r\n\r\n function creditPaymentMethod() {\r\n if (!clickPass) {\r\n const useCreditSytle =\r\n {\r\n marginRight: isMobile ? \"0px\" : \"15px\",\r\n marginTop: \"15px\",\r\n float: isMobile ? \"right\" : \"\"\r\n };\r\n function headline() {\r\n const headlineText = \"ACH transactions have the lowest costs associated with any payment system and are widely considered to be the safest financial transactions.\";\r\n if (isMobile)\r\n return ({headlineText});\r\n else\r\n return (\r\n
\r\n \r\n {\r\n const allpdfs = [...pdfs];\r\n allpdfs.find((f) => f.pdfId === currentPdf.pdfId).validated = true;\r\n setPdfs(allpdfs);\r\n setPdfDetails({ numPages: 0, id: 0 });\r\n }}\r\n icon=\"endorsed\" intent=\"success\" text=\"Agree\" />\r\n {\r\n setPdfDetails({ numPages: 0, id: 0 });\r\n setShowProcessing(0);\r\n }} />\r\n
\r\n {headlineText}
);\r\n }\r\n return (\r\n\r\n \r\n {headline}\r\n\r\n There are no additional fees to use ACH. You will need your bank account and routing number to set up this payment type. Using ACH payments, you will enjoy up to 3% in savings compared to credit cards.\r\n A credit card can also be used, but please note that if you select a credit card to be your primary payment method, you will not receive the cash price from the retailer prior to receiving the Fuel Access Network discount. In addition, your credit card may charge a processing fee. The cost of the processing fee is established by each individual credit card company.\r\n\r\n\r\n\r\n \r\n
);\r\n }\r\n\r\n\r\n return (\r\n \r\n handleTabChange('ach')}\r\n icon=\"endorsed\" intent=\"success\" text=\"Continue with ACH\" />\r\n
\r\n \r\n
);\r\n }\r\n\r\n function achPaymentMethod() {\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n\r\n function HandleSubmit() {\r\n\r\n setValidate(true);\r\n\r\n if (checkIsValid()) {\r\n\r\n if (hasCredit() && !isValidExpiry()) {\r\n setPopupType(\"exp\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n if (state.achRoutingNumber.length !== 9 && hasACH()) {\r\n setPopupType(\"ach\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n if ((!isValidEmail(state.email) || ((state.backupEmail !== '' && !isValidEmail(state.backupEmail))))) {\r\n setPopupType(\"bem\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n if (!phoneValueIsValid(state.mobilePhone)) {\r\n setPopupType(\"mph\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n for (const property in noNegNumberFields) {\r\n if (parseInt(state[property]) < 0) {\r\n setPopupType(\"nnn\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n }\r\n\r\n if (hasCredit()) {\r\n if (state.issuer !== \"mastercard\" && state.issuer !== \"visa\" && state.issuer !== \"discover\") {\r\n setPopupType(\"ct\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n if (!state.cardIsValid) {\r\n setPopupType(\"valid\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n }\r\n\r\n \r\n for (var i = 0; i < addressFields.length; i++) {\r\n const field = addressFields[i];\r\n console.log(field);\r\n console.log(state[field]);\r\n if (state[field] && state[field].length > 50)\r\n {\r\n console.log(state[field]);\r\n setPopupType(\"len\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n }\r\n\r\n if (\r\n (state.middleinitial && state.middleinitial.length > 1)\r\n || (state.email && state.email.length > 255)\r\n || (state.backupEmail && state.backupEmail.length > 255)\r\n || (state.achRoutingNumber && state.achRoutingNumber.length > 9)\r\n || (state.shippingMessage && state.shippingMessage.length > 500)\r\n || (state.suffix && state.suffix.length > 5)\r\n || (state.homePhone && state.homePhone.length > 20)\r\n || (state.mobilePhone && state.mobilePhone.length > 20)\r\n || (state.lastName && state.lastName.length > 50)\r\n || (state.firstName && state.firstName.length > 50)\r\n || (state.lpnum && state.lpnum.length > 25)\r\n || (state.achAccountNumber && state.achAccountNumber.length > 35)\r\n || (state.achRoutingNumber && state.achRoutingNumber.length > 9)\r\n || (state.dlnum && state.dlnum.length > 50)) {\r\n console.log(\"here\");\r\n setPopupType(\"len\");\r\n setPopupOpen(true);\r\n return;\r\n }\r\n\r\n\r\n setShowProcessing(4);\r\n\r\n }\r\n else {\r\n setPopupType(\"req\");\r\n setPopupOpen(true);\r\n }\r\n }\r\n\r\n function phoneValueIsValid(str) {\r\n\r\n if (!str || str.length === 0)\r\n return false;\r\n\r\n var pe = /^[\\\\+]?[(]?[0-9]{3}[)]?[-\\s\\\\.]?[0-9]{3}[-\\s\\\\.]?[0-9]{4,6}$/im;\r\n\r\n if (!pe.test(str))\r\n return false;\r\n\r\n let jn = str.replace(/\\)/g, \"\");\r\n jn = jn.replace(/\\(/g, \"\");\r\n jn = jn.replace(/-/g, \"\");\r\n\r\n if (jn.length > 10)\r\n return false;\r\n\r\n let start = 0;\r\n const end = jn.length;\r\n if (jn.length >= 4)\r\n start = jn.length - 4;\r\n else\r\n start = 0;\r\n\r\n var l4 = jn.substring(start, end);\r\n\r\n const re = /^[0-9\\b]+$/;\r\n\r\n if (!l4 || l4.length < 1 || !re.test(l4))\r\n return false;\r\n\r\n return true;\r\n }\r\n\r\n function getPopupContent() {\r\n if (popupType === 'ach') {\r\n return (\r\n \r\n
);\r\n }\r\n if (popupType === 'req') {\r\n return (\r\n ACH Routing Number
\r\nThe ACH Routing field must be 9 digits.
\r\n\r\n
);\r\n }\r\n if (popupType === 'ct') {\r\n return (\r\n Required Fields Missing
\r\nPlease complete all the required fields and try again.
\r\n\r\n
);\r\n }\r\n if (popupType === 'nnn') {\r\n return (\r\n Credit card type not accepted
\r\nOnly Master Card, Visa and Discover is accepted.
\r\n\r\n
);\r\n }\r\n if (popupType === 'exp') {\r\n return (\r\n Must be a positive Number
\r\nThe Number of Requested cards, diesel tanks size
\r\nand gas tank size must have positive numbers
\r\n\r\n
);\r\n }\r\n if (popupType === 'len') {\r\n return (\r\n Credit Card Expiry
\r\nThe date entered for the credit card is and expired date.
\r\nPlease correct to continue.
\r\n\r\n
);\r\n }\r\n if (popupType === 'bem') {\r\n return (\r\n Invalid Field Length
\r\nThere are fields that are not a valid length
\r\n\r\n
);\r\n }\r\n if (popupType === 'hph') {\r\n return (\r\n Email not valid
\r\nThe Email address supplied is not in a valid format.
\r\nuse format: someone@someplace.com
\r\n\r\n
);\r\n }\r\n if (popupType === 'mph') {\r\n return (\r\n Home Phone Number
\r\nis not in a valid format.
\r\nuse format: 555-876-5409
\r\n\r\n
);\r\n }\r\n if (popupType === 'valid') {\r\n return (\r\n Mobile Phone Number
\r\nis not in a valid format.
\r\nuse format: 555-876-5409
\r\n\r\n
);\r\n }\r\n }\r\n\r\n function handleTabChange(e) {\r\n\r\n setClickPass(false);\r\n\r\n updateState(\"paymentMethod\", e);\r\n }\r\n\r\n function makeInvalid() {\r\n if (isValid)\r\n setIsValid(false);\r\n\r\n\r\n }\r\n\r\n function isNowInvalid() {\r\n makeInvalid();\r\n\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Required)\"\r\n };\r\n }\r\n\r\n function GroupProps(name) {\r\n\r\n if (shouldValidate) {\r\n\r\n\r\n if (name === 'expiry' && hasCredit() && !isValidExpiry()) {\r\n makeInvalid();\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Expired)\"\r\n }\r\n }\r\n\r\n if ((name === \"name\" || name === \"expiry\" || name === \"cvc\" || name === \"number\") && !hasCredit())\r\n return;\r\n\r\n\r\n if ((name === \"achAccountNumber\" || name === \"achRoutingNumber\" || name === \"achVerfyAccountNumber\") && hasCredit() && !hasACH())\r\n return;\r\n\r\n if (\r\n (name === 'billingstateselect' && !state.billingstate)\r\n || (name === 'mailingstateselect' && !state.mailingstate)\r\n || (name === 'dlissueselect' && !state.dlissue)\r\n || (name === 'lpstateselect' && !state.lpstate)) {\r\n makeInvalid();\r\n return {\r\n borderWidth: \"1px\",\r\n borderStyle: \"solid\",\r\n borderColor: \"#db3737\"\r\n }\r\n }\r\n if ((name === 'billingstate' && !state.billingstate)\r\n || (name === 'mailingstate' && !state.mailingstate)\r\n || (name === 'dlissue' && !state.dlissue)\r\n || (name === 'lpstate' && !state.lpstate))\r\n return \"(Required)\";\r\n\r\n if (name === 'mailingstate'\r\n || name === 'billingstate'\r\n || name === 'dlissue'\r\n || name === 'lpstate'\r\n || name === 'companystate'\r\n || name === 'temporarystate')\r\n return '';\r\n\r\n\r\n if (hasACH()) {\r\n if (name === 'achVerfyAccountNumber' && state[\"achVerfyAccountNumber\"] !== state[\"achAccountNumber\"]) {\r\n makeInvalid();\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Does not match accout number)\"\r\n }\r\n }\r\n }\r\n\r\n if (paymentNotReq[state[\"paymentMethod\"]].includes(name))\r\n return {};\r\n\r\n\r\n if (name === \"mobilePhone\") {\r\n if (!phoneValueIsValid(state[name])) {\r\n return isNowInvalid();\r\n }\r\n }\r\n\r\n if (!notRequired.includes(name) && state[name] === '') {\r\n\r\n return isNowInvalid();\r\n }\r\n\r\n \r\n\r\n\r\n if (name === \"backupEmail\" || name === \"email\") {\r\n if (state[name] !== '') {\r\n if (!isValidEmail(state[name])) {\r\n makeInvalid();\r\n\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: \"(Not a valid email address)\"\r\n };\r\n }\r\n }\r\n }\r\n\r\n const badCharLength = (l) => {\r\n makeInvalid();\r\n return {\r\n intent: Intent.DANGER,\r\n labelInfo: `(Max ${l})`\r\n }\r\n }\r\n\r\n if (addressFields.includes(name) && state[name] && state[name].length > 50)\r\n return badCharLength('50');\r\n\r\n if (name === 'companyName' && state.companyName && state.companyName.length > 100)\r\n return badCharLength('100');\r\n\r\n if (name === 'companyName' && state.companyName && state.companyName.length > 100)\r\n return badCharLength('100');\r\n\r\n if (name === 'email' && state.email && state.email.length > 255)\r\n return badCharLength('255');\r\n\r\n if (name === 'backupEmail' && state.backupEmail && state.backupEmail.length > 255)\r\n return badCharLength('255');\r\n\r\n if (name === 'homePhone' && state.homePhone && state.homePhone.length > 20)\r\n return badCharLength('20');\r\n\r\n if (name === 'mobilePhone' && state.mobilePhone && state.mobilePhone.length > 20)\r\n return badCharLength('20');\r\n\r\n if (name === 'achRoutingNumber' && state.achRoutingNumber && state.achRoutingNumber.length > 9)\r\n return badCharLength('9');\r\n\r\n if (name === 'shippingMessage' && state.shippingMessage && state.shippingMessage.length > 500)\r\n return badCharLength('500');\r\n\r\n if (name === 'suffix' && state.suffix && state.suffix.length > 5)\r\n return badCharLength('5');\r\n\r\n if (name === 'lastName' && state.lastName && state.lastName.length > 50)\r\n return badCharLength('50');\r\n\r\n if (name === 'firstName' && state.firstName && state.firstName.length > 50)\r\n return badCharLength('50');\r\n\r\n if (name === 'lpnum' && state.lpnum && state.lpnum.length > 25)\r\n return badCharLength('25');\r\n\r\n if (name === 'achAccountNumber' && state.achAccountNumber && state.achAccountNumber.length > 35)\r\n return badCharLength('35');\r\n\r\n if (name === 'achRoutingNumber' && state.achRoutingNumber && state.achRoutingNumber.length > 9)\r\n return badCharLength('9');\r\n\r\n if (name === 'dlnum' && state.dlnum && state.dlnum.length > 50)\r\n return badCharLength('50');\r\n\r\n if (name === 'MiddleInitial' && state.middleinitial && state.middleinitial.length > 1)\r\n return badCharLength('1');\r\n }\r\n\r\n if (name === 'mailingstate' || name === 'billingstate' || name === 'dlissue' || name === 'lpstate' || name === 'temporarystate' || name === 'companystate')\r\n return '';\r\n\r\n\r\n \r\n\r\n return {};\r\n }\r\n function isValidExpiry() {\r\n const value = state.expiry.replace(/\\D+/g, \"\");\r\n const month = parseInt(value.slice(0, 2));\r\n let year = parseInt(value.slice(2, 6));\r\n if (year < 1000)\r\n year += 2000;\r\n const currentYear = new Date().getFullYear();\r\n if (year > currentYear)\r\n return true;\r\n if (year < currentYear)\r\n return false;\r\n const currentMonth = new Date().getMonth();\r\n if (month < currentMonth)\r\n return false;\r\n\r\n return true;\r\n }\r\n function isValidEmail(value) {\r\n const pattern = new RegExp(/^((\"[\\w-\\s]+\")|([\\w-]+(?:\\.[\\w-]+)*)|(\"[\\w-\\s]+\")([\\w-]+(?:\\.[\\w-]+)*))(@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-z]{2,6}(?:\\.[a-z]{2})?)$)|(@\\[?((25[0-5]\\.|2[0-4][0-9]\\.|1[0-9]{2}\\.|[0-9]{1,2}\\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\]?$)/i);\r\n\r\n if (!pattern.test(value))\r\n return false;\r\n\r\n return true;\r\n\r\n }\r\n const outerSplitStyle = {\r\n display: \"inline-block\",\r\n width: \"100%\"\r\n };\r\n const innerSplitElementStyle = {\r\n width: \"50%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n };\r\n const innerSplit4ElementStyle = {\r\n width: \"33%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n };\r\n const innerSplitMiddleElementStyle = {\r\n width: \"17%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n };\r\n const tanksizeSplit = {\r\n width: \"25%\",\r\n display: \"inline-block\",\r\n paddingRight: \"10px\"\r\n }\r\n function AdditionalInfo() {\r\n\r\n return (\r\n Credit card number is not valid
\r\nPlease enter a valid credit card number and try again.
\r\n\r\n * = required.\r\n \r\n \r\n
);\r\n }\r\n\r\n function ContactInfo() {\r\n\r\n return (\r\n <>\r\n Additional Information
\r\n \r\nContact Information
\r\n \r\n\r\n \r\n
\r\n );\r\n }\r\n\r\n function CorrectedCard() {\r\n if (addressToValidate.response.addressNotFound)\r\n return (USPS found a different address
\r\nSelect the best address to use or cancel to return
\r\n \r\n\r\n \r\n \r\n\r\n \r\n {CorrectedCard()}\r\n \r\n\r\n
\r\n Entered for {addressToValidate.title}
\r\nAddress: {addressToValidate.address.address1}
\r\nAddress2: {addressToValidate.address.address2}
\r\nCity: {addressToValidate.address.city}
\r\nState: {addressToValidate.address.state}
\r\nZip: {addressToValidate.address.zip}
\r\n {ChooseButton(() => choosebuttonClick('e', addressToValidate.type))}\r\n\r\n \r\n Cancel\r\n \r\n
\r\n Corrected Address
\r\nAddress Not Found
\r\nCancel to correct the address.
\r\nCorrected Address
\r\nAddress: {addressToValidate.response.address1}
\r\nAddress2: {addressToValidate.response.address2}
\r\nCity: {addressToValidate.response.city}
\r\nState: {addressToValidate.response.state}
\r\nZip: {addressToValidate.response.zip}
\r\n {ChooseButton(() => choosebuttonClick('c', addressToValidate.type))}\r\n\r\n \r\n \r\n One minute while we validate your addresses with the USPS servers.\r\n \r\n\r\n
\r\n );\r\n }\r\n\r\n function post(vers) {\r\n\r\n setShowProcessing(1);\r\n const headers = {\r\n \"Content-Type\": \"application/json\",\r\n \"Cache-Control\": \"no-cache\",\r\n 'Access-Control-Allow-Origin': '*',\r\n };\r\n\r\n const params =\r\n { ...state };\r\n\r\n params[\"pdfVersions\"] = vers;\r\n\r\n setTimeout(() => {\r\n\r\n axios.post('api/customerportal/escapeesjoin',\r\n params, {\r\n headers: headers\r\n }).then((response) => {\r\n handleJoinResponse(response);\r\n }).catch((e) => handleJoinError(e));\r\n }, 1000);\r\n }\r\n\r\n function handleJoinResponse(response) {\r\n setShowProcessing(2);\r\n\r\n }\r\n\r\n function handleJoinError(e) {\r\n setShowProcessing(3);\r\n console.log(\"an error Occurred while posting data to the server.\");\r\n console.log(e);\r\n\r\n }\r\n\r\n const addressStyle = {\r\n width: \"50%\",\r\n marginTop: \"10px\",\r\n display: \"inline-block\"\r\n }\r\n const mailingAddressStyle = {\r\n width: \"50%\",\r\n marginTop: \"40px\",\r\n display: \"inline-block\"\r\n }\r\n const mobileAddressStyle = {\r\n marginTop: \"10px\"\r\n }\r\n const mobileRightAddressStyle = {\r\n marginTop: \"10px\"\r\n }\r\n const addressContainer = {\r\n display: \"inline-block\",\r\n width: \"100%\"\r\n }\r\n const rightAddressShort = {\r\n width: \"50%\",\r\n marginTop: \"10px\",\r\n display: \"inline-block\",\r\n paddingLeft: \"10px\",\r\n float: \"right\"\r\n }\r\n const achTabStyle =\r\n {\r\n color: \"white\",\r\n marginRight: isMobile ? \"15px\" : \"\"\r\n }\r\n\r\n\r\n function signup() {\r\n\r\n return (\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n\r\n function finish() {\r\n return (\r\n \r\n
\r\n\r\n \r\n {ContactInfo()}\r\n
\r\n \r\n {AdditionalInfo()}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n Shipping Options
\r\n\r\n\r\n \r\n {shippingOptions && shippingOptions.map(opt =>\r\n \r\n {opt.displayText}\r\n \r\n )}\r\n\r\n \r\n\r\n \r\n ({500 - state.shippingMessage.length} characters remaining)\r\n\r\n
\r\n \r\n { return ''; }}\r\n prefix={\"temporary\"}\r\n handleInputChange={handleInputChange}\r\n title={\"Shipping Address (If filled in, we will ship here!)\"}\r\n values={state}\r\n extraSpace={isMobile ? false : true} />\r\n
\r\n Payment Information*
\r\n\r\n\r\n\r\n setPopupOpen(false)}\r\n isOpen={popupOpen}>\r\n\r\n \r\n {getPopupContent()}\r\n\r\n \r\n
\r\n \r\n \r\n \r\n Thank you for signing up. Your data has been submitted for review. The team will be reaching out shortly.\r\n \r\n\r\n {\r\n //\r\n }\r\n
);\r\n }\r\n\r\n function processing() {\r\n return (\r\n NOTE: Please whitelist escapeessupport@fuelaccessnetwork.com to ensure you get updates about your cards progress!
\r\n\r\n \r\n \r\n One minute while we transfer your data to our secure servers.\r\n \r\n
\r\n );\r\n }\r\n\r\n function error() {\r\n return (\r\n \r\n \r\n \r\n We are sorry, something went wrong. please email our support staff so we can provide a better experience in the future.\r\n \r\n Send Feedback\r\n \r\n \r\n
);\r\n }\r\n function badQueryStrings() {\r\n return (\r\n \r\n \r\n \r\n
);\r\n }\r\n function main() {\r\n if ((!state.isMds && (!state.partnerCustomerCode || !state.partnerExpiration)) || !state.cardFrom)\r\n return badQueryStrings();\r\n \r\n if (showProcessing === 1)\r\n return processing();\r\n\r\n if (showProcessing === 2)\r\n return finish();\r\n\r\n if (showProcessing === 3)\r\n return error();\r\n\r\n if (showProcessing === 4)\r\n performValidations(addressValidated);\r\n\r\n if (showProcessing === 8) {\r\n return showPdfs();\r\n }\r\n\r\n if (showProcessing === 7) {\r\n return addressValidation();\r\n }\r\n if (showProcessing === 5)\r\n return showAddressValidationPanel();\r\n\r\n if (showProcessing === 6)\r\n return (<>done);\r\n\r\n return signup();\r\n }\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n Something went wrong
\r\nThere is some missing data from the request and the application can not be loaded
\r\n\r\n {imageReady ? main() : <>}\r\n
\r\n );\r\n}\r\n","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.1/8 is considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport default function register () {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Lets check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl);\r\n } else {\r\n // Is not local host. Just register service worker\r\n registerValidSW(swUrl);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW (swUrl) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker (swUrl) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl)\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n if (\r\n response.status === 404 ||\r\n response.headers.get('content-type').indexOf('javascript') === -1\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister () {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","import 'bootstrap/dist/css/bootstrap.css';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n