\n
\n {generateTitle(props.data.status)}
\n dispatch(closePopup())}>\n Close
\n \n
\n \n \n );\n};\n\nexport default PopupAction;\n","import { Spinner } from 'react-bootstrap';\nimport \"./loading.styles.scss\"\n\nconst Loading = () => {\n return (\n \n
\n {!props.data.withActionButton ? (\n props.data && props.data.error ? (\n Oops!
\n ) : (\n Success!
\n )\n ) : (\n \"\"\n )}\n \n {generateText(props.data.email, props.data.status)}\n
\n {props.data.withActionButton && (\n \n {\n dispatch(closePopup());\n }}\n >\n CANCEL\n \n\n \n
\n )}\n \n
\n )\n}\n\nexport default Loading","import {lazy} from 'react';\n\nconst ForgetPasswordPage = lazy(() => import('./forget-password/forget-password.component'))\nconst ResetPasswordPage = lazy(() => import('./reset-password/reset-password.component'))\nconst SigninPage = lazy(() => import('./signin/signin.component'))\nconst AccountPage = lazy(() => import('./account/account.component'))\nconst DashboardPage = lazy(() => import('./dashboard/dashboard.component'))\nconst CardTemplatePage = lazy(() => import('./card-template/card-template.component'))\nconst CardManagementPage = lazy(() => import('./card-management/card-management.component'))\nconst UserPage = lazy(() => import('./user/user.component'))\nconst AccountManagementPage = lazy(() => import('./account-management/account-management.component'))\nconst CardOrderPage = lazy(() => import('./card-orders/card-order.component'))\nconst CardReviewPage = lazy(() => import('./card-review/card-review.component'))\nconst CardOrderReviewPage = lazy(() => import('./card-orders/card-order-review.component'))\nconst ResetPasswordMessagePage = lazy(() => import('./reset-password-to-email/reset-password.component'))\nconst PrivacyPolicyPage = lazy(() => import('./privacy-policy/privacy-policy.component'))\nconst WebsiteAgreementPage = lazy(() => import('./website-agreement/website-agreement.component'))\nconst TermAndConditionPage = lazy(() => import('./term-and-condition/term.component'))\nconst TermAndConditionPublicPage = lazy(() => import('./term-and-condition/term-public.component'))\nconst AccountActivationPage = lazy(() => import('./account-activation/account-activation.component'))\nconst EditProfilePage = lazy(() => import('./edit-profile/edit-profile.component'))\nconst DeliveryAddressPage = lazy(() => import('./delivery-address/delivery-address.component'))\nconst BillingInformationPage = lazy(() => import('./billing-information/billing-information.component'))\nconst CardOrderBatchPage = lazy(() => import('./card-order-batch/card-order-batch.component'))\nconst CreateOrderBatchPage = lazy(() => import('./card-order-batch/create-order-batch.component'))\nconst TransactionDetailReport = lazy(() => import('./reports/transaction-detail-report.component'))\nconst FuelSummaryReport = lazy(() => import('./reports/fuel-summary-report.component'))\nconst BillingSortReport = lazy(() => import('./reports/billing-sort-report.component'))\nconst ListDriverOrVehicleReport = lazy(() => import('./reports/list-driver-or-vehicle-report.component'))\nconst ExceptionReport = lazy(() => import('./reports/exception-report.component'))\nconst TaxSummaryReport = lazy(() => import('./reports/tax-summary-report.component'))\nconst OwnerOperatorReport = lazy(() => import('./reports/owner-operator-report.component'))\nconst DailyTransactionReport = lazy(() => import('./reports/daily-transaction-report.component'))\nconst ScheduledExceptionReport = lazy(() => import('./reports/scheduled-exception-report.component'))\nconst InvoicedTransactionReport = lazy(() => import('./reports/invoiced-transaction-report.component'))\nconst DriverVehicleRecordsMonthlyAuditReport = lazy(() => import('./reports/driver-vehicle-records-monthly-audit-report.component'))\nconst ScheduledReportInstructions = lazy(() => import('./reports/scheduled-report-instructions.components'))\nconst TaxExemptReport = lazy(() => import('./reports/tax-exempt-report.component'))\nconst SubmitLogReport = lazy(() => import('./reports/submit-log-report.component'))\nconst UserLogReport = lazy(() => import('./reports/user-log-report.component'))\n\nexport {\n SigninPage,\n AccountPage,\n DashboardPage,\n CardTemplatePage,\n ForgetPasswordPage,\n UserPage,\n CardManagementPage,\n ResetPasswordPage,\n AccountManagementPage,\n CardOrderPage,\n CardReviewPage,\n CardOrderReviewPage,\n ResetPasswordMessagePage,\n PrivacyPolicyPage,\n WebsiteAgreementPage,\n TermAndConditionPage,\n TermAndConditionPublicPage,\n AccountActivationPage,\n EditProfilePage,\n DeliveryAddressPage,\n BillingInformationPage,\n CardOrderBatchPage,\n CreateOrderBatchPage,\n TransactionDetailReport,\n FuelSummaryReport,\n BillingSortReport,\n ListDriverOrVehicleReport,\n ExceptionReport,\n TaxSummaryReport,\n OwnerOperatorReport,\n DailyTransactionReport,\n ScheduledExceptionReport,\n InvoicedTransactionReport,\n DriverVehicleRecordsMonthlyAuditReport,\n ScheduledReportInstructions,\n TaxExemptReport,\n SubmitLogReport,\n UserLogReport\n}","import React, { useEffect, useState } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\n\nimport { Link } from 'react-router-dom'\n\nimport { Form, Table, Tooltip, OverlayTrigger, Popover} from \"react-bootstrap\";\nimport _ from 'lodash'\n\n// internal component\nimport DuplicateTooltip from \"./duplicate-tooltip.component\";\nimport CardTemplateDetailModal from '../card-template/card-template-detail-modal.component'\n\n// external component\nimport ScrollBar from 'react-scrollbars-custom'\nimport Select from \"react-select\";\nimport TagsInput from 'react-tagsinput'\n\n// icon\nimport { IconContext } from \"react-icons\";\nimport { IoIosCopy } from \"react-icons/io\";\nimport { FaTrash, FaInfoCircle } from \"react-icons/fa\";\n\n// redux action\nimport { loadZipCodes } from \"./../../redux/card-template/card-template.actions\"\nimport { openPopup } from \"../../redux/user/user.actions\"\nimport { removeUploadedCardData } from '../../redux/card/card.actions'\n\n// css\nimport 'react-tagsinput/react-tagsinput.css'\n\nconst FirstStep = ({ listNewCard, handleNext, step, duplicateAmount, showVehicleTypePopup, showFuelProfilePopup, showTimeProfilePopup, showPopup, errorMessage }) => {\n const dispatch = useDispatch();\n\n // redux data\n const { \n cardTemplates,\n vehicleTypes,\n fuelProfiles,\n timeProfiles,\n statesOption,\n periodGallons,\n periodAmounts,\n listVehicleTypeDescription\n } = useSelector((state) => state.cardTemplate)\n\n const { uploadedCardData } = useSelector((state) => state.card)\n\n const { user } = useSelector((state) => state.auth)\n\n useEffect(() => {\n if (step === 0) {\n let tempListNewCard = []\n let tempListCard = []\n\n if(!duplicateAmount){\n listNewCard = _.uniqBy(listNewCard, 'id');\n }\n\n if (listNewCard.length > 0 || uploadedCardData !== null) {\n if (listNewCard.length > 0) {\n tempListCard = [...listNewCard]\n } else {\n tempListCard = [...uploadedCardData[0].cards]\n }\n tempListCard.map((card, index) => {\n tempListNewCard.push({...card})\n\n tempListNewCard[index].vehicle_number = null;\n\n let tempStates = [...card.states]\n tempListNewCard[index].states = []\n if (tempStates.length > 0) {\n tempStates.map((state) => {\n if (state.hasOwnProperty('value')) {\n tempListNewCard[index].states.push(state)\n } else {\n let indexState = statesOption.findIndex(x => x.id === state)\n if (indexState !== -1) {\n tempListNewCard[index].states.push(\n {\n label: statesOption[indexState].name,\n value: state\n }\n )\n }\n }\n })\n }\n \n let tempZips = [...card.zips]\n tempListNewCard[index].zips = []\n if (tempZips.length > 0) {\n tempZips.map((zip) => {\n if (zip !== '') {\n tempListNewCard[index].zips.push(zip)\n }\n }) \n }\n })\n setNewCards([...tempListNewCard])\n } else {\n dispatch(removeUploadedCardData())\n addNewCard()\n }\n setCardError({...errorMessage})\n // console.log('listNewCard :>> ', listNewCard);\n }\n }, [step])\n\n useEffect(() => {\n setCardError({...errorMessage})\n }, [errorMessage])\n\n\n // local state / variable\n const [ newCards, setNewCards ] = useState([])\n const [ cardError, setCardError ] = useState({})\n const [ maxGallonFillInput, setMaxGallonFillInput ] = useState(0)\n\n // for show duplicate input\n const [ showOverlay, setShowOverlay ] = useState(false)\n const [ selectedCardIndex, setSelectedCardIndex ] = useState(-1)\n\n // for show modal card template\n const [ showModalCardDetailTemplate, setShowModalCardDetailTemplate ] = useState(false)\n const [selectedCardTemplateId, setSelectedCardTemplateId] = useState('')\n\n // component\n const VehicleTypePopup = () => {\n return (\n | Vehicle Type | \nDescription | \n
|---|---|
| {vehicleType.name} | \n{getVehicleTypeDescription(vehicleType.name)} | \n
e.stopPropagation()}>\n \n \n showPopup('vehicle')}\n />\n \n \n \n
\n \n )\n }\n\n const FuelProfilePopup = () => {\n return (\n | Fuel Profile | \nDescription | \n
|---|---|
| {fuelProfile.name} | \n\n |
e.stopPropagation()}>\n \n \n showPopup('fuelprofile')}\n />\n \n \n \n
\n \n )\n }\n\n const TimeProfilePopup = () => {\n return (\n | Time Profile Type | \nDescription | \n
|---|---|
| {timeProfile.name} | \n\n |
e.stopPropagation()}>\n \n \n showPopup('timeprofile')}\n />\n \n \n \n
\n \n )\n }\n\n const CFNPopup = () => {\n return (\n \n \n }\n >\n \n
\n \n }\n >\n \n
\n
\n )\n }\n\n const CardInput = (key, index, type = 'text', val, formType = 'input') => {\n let maxNumber = 99999\n let placeholder = ''\n if (key === 'pin') {\n placeholder = 'Auto'\n }\n if (key === 'max_gallon_fill') {\n if(val == '' || val <= 300){\n maxNumber = 300\n }else if(val > 300){\n maxNumber = val\n }\n }\n return (\n \n {\n changeCardValue(key, index, e.target.value, maxNumber);\n }}\n // onBlur={key === 'pin' ? (e) => pinValidation(index, val) : false}\n disabled={newCards[index].card_template_id === ''}\n />\n \n {cardError.hasOwnProperty(`data.${index}.${key}`) ? cardError[`data.${index}.${key}`] : ''}\n \n
\n )\n }\n\n const CardToggle = (key, index, val) => {\n let cardTemplateIndex = cardTemplates.data.findIndex(x => x.id === newCards[index].card_template_id)\n let cardTemplate = ''\n if (cardTemplateIndex !== -1) {\n cardTemplate = cardTemplates.data[cardTemplateIndex]\n }\n let disabledStatus = false\n let value = val\n if (key === 'is_odometer') {\n disabledStatus = true\n // value = true\n } else {\n if (newCards[index].card_template_id === '') {\n disabledStatus = true\n } else if (cardTemplate.card_network_name === 'PPA' && key === 'is_retail') {\n disabledStatus = true\n }\n }\n return (\n { setShowOverlay(false); setSelectedCardIndex(-1) }}>\n \n setShowModalCardDetailTemplate(false)} \n cardTemplateId={selectedCardTemplateId} \n />}\n
\n )\n}\n\nexport default FirstStep;","import React, { useState, useEffect } from \"react\";\nimport { useSelector } from \"react-redux\";\n\nimport { Row, Col, Form, Modal, Card, Spinner } from \"react-bootstrap\";\nimport { IconContext } from \"react-icons\";\nimport { FaCheckCircle, FaInfoCircle } from \"react-icons/fa\";\nimport Select from 'react-select';\nimport NumberFormat from \"react-number-format\";\n\nimport \"./card-management.styles.scss\";\n\nconst SecondStep = ({ handleNext, backStep, deliveryAddress, isVirtualCard }) => {\n const { statesOption } = useSelector((state) => state.cardTemplate)\n const { data } = useSelector(state => state.deliveryAddress);\n const { user } = useSelector((state) => state.auth)\n const { account } = useSelector((state) => state.account)\n const { loadingCreateCard } = useSelector(state => state.card)\n const [ initDeliveryAddress, setInitDeliveryAddress ] = useState({...deliveryAddress})\n const [ shippingMethod, setShippingMethod ] = useState(\"\")\n const [ selectedAddress, setSelectedAddress ] = useState(\n {\n label : 'New Address Below',\n value : {\n id: '',\n address: '',\n city: '',\n zipcode: ''\n }\n }\n )\n const [ selectedState, setSelectedState ] = useState(\n {\n label: '',\n value: ''\n }\n )\n const [ deliveryError, setDeliveryError ] = useState({})\n\n useEffect(() => {\n if (account !== null) {\n if (user.user_type_id === 2) {\n setInitDeliveryAddress({...initDeliveryAddress, requestor: account.name})\n }\n }\n }, [])\n\n const addressList = () => {\n let tempAddressList = []\n tempAddressList.push(\n {\n label : 'New Address Below',\n value : {\n id: '',\n address: '',\n city: '',\n zipcode: ''\n }\n }\n )\n data.map(deliveryAddress => {\n tempAddressList.push(\n {\n label: deliveryAddress.address_name,\n value: deliveryAddress\n }\n )\n })\n return tempAddressList\n }\n\n const statesSorted = (listState) => {\n let tempStatesSorted = listState.sort((a, b) => {\n let fa = a.name.toLowerCase(),\n fb = b.name.toLowerCase();\n\n if (fa < fb) {\n return -1;\n }\n if (fa > fb) {\n return 1;\n }\n return 0;\n })\n tempStatesSorted.map((state, index) => {\n if (state.name === 'All States (ALL)') {\n tempStatesSorted.splice(index, 1)\n }\n })\n return tempStatesSorted\n }\n\n const changeDeliveryMethod = (deliveryMethod) => {\n let tempInitDeliveryAddress = {...initDeliveryAddress}\n if (deliveryMethod === 'address') {\n tempInitDeliveryAddress.pickup_address = \"730 Central Ave S Kent, WA 98032\"\n tempInitDeliveryAddress.pickup_name = \"\"\n tempInitDeliveryAddress.pickup_phone_number = \"\"\n tempInitDeliveryAddress.pickup_special_instruction = \"\"\n tempInitDeliveryAddress.is_delivery = true\n tempInitDeliveryAddress.create_new_address = true\n } else {\n tempInitDeliveryAddress.delivery_address_name = \"\"\n tempInitDeliveryAddress.delivery_attention_to = \"\"\n tempInitDeliveryAddress.delivery_city = \"\"\n tempInitDeliveryAddress.delivery_special_instruction = \"\"\n tempInitDeliveryAddress.delivery_state = \"\"\n tempInitDeliveryAddress.delivery_street_address = \"\"\n tempInitDeliveryAddress.delivery_street_address_secondary = \"\"\n tempInitDeliveryAddress.delivery_zipcode = \"\"\n tempInitDeliveryAddress.create_new_address = false\n tempInitDeliveryAddress.is_delivery = false\n setSelectedAddress({...addressList()[0]})\n setSelectedState(\n {\n label: '',\n value: ''\n }\n )\n }\n setInitDeliveryAddress({...tempInitDeliveryAddress})\n }\n\n const selectAddress = (address) => {\n setSelectedAddress({...address});\n let tempInitDeliveryAddress = {...initDeliveryAddress}\n tempInitDeliveryAddress.delivery_address_name = address.value.id !== '' ? address.value.address_name : ''\n tempInitDeliveryAddress.delivery_attention_to = address.value.id !== '' ? address.value.attention_to : ''\n tempInitDeliveryAddress.delivery_city = address.value.id !== '' ? address.value.city : ''\n tempInitDeliveryAddress.delivery_state = address.value.id !== '' ? address.value.state : ''\n tempInitDeliveryAddress.delivery_street_address = address.value.id !== '' ? address.value.address : ''\n tempInitDeliveryAddress.delivery_street_address_secondary = address.value.id !== '' ? address.value.address_secondary : ''\n tempInitDeliveryAddress.delivery_zipcode = address.value.id !== '' ? address.value.zipcode : ''\n tempInitDeliveryAddress.delivery_phone_number = address.value.id !== '' ? address.value.phone: ''\n if (address.value.id !== '') {\n tempInitDeliveryAddress.create_new_address = false\n let stateIndex = statesOption.findIndex(x => x.id === address.value.state)\n setSelectedState(\n {\n label: stateIndex !== -1 ? statesOption[stateIndex].name : '',\n value: stateIndex !== -1 ? statesOption[stateIndex].id : ''\n }\n )\n } else {\n tempInitDeliveryAddress.create_new_address = true\n setSelectedState(\n {\n label: '',\n value: ''\n }\n )\n }\n setInitDeliveryAddress({...tempInitDeliveryAddress})\n }\n\n const selectState = (state) => {\n setSelectedState({...state})\n setInitDeliveryAddress({...initDeliveryAddress, delivery_state: state.value})\n }\n\n const deliveryAddressValidation = () => {\n let status = true\n let errors = {}\n let validation = ''\n let listDeliveryValidation = {\n delivery_address_name: 'Address name field is required',\n // delivery_attention_to: 'Attention to field is required',\n delivery_city: 'City field is required',\n delivery_state: 'State field is required',\n delivery_street_address: 'Street address field is required',\n delivery_zipcode: 'Zip Code field is required'\n }\n let pickupValidation = {\n pickup_name: 'Name field is required',\n pickup_phone_number: 'Phone number field is required'\n }\n if (initDeliveryAddress.is_delivery) {\n validation = listDeliveryValidation\n } else {\n validation = pickupValidation\n }\n for (var key in validation) {\n if (initDeliveryAddress[key] === '') {\n status = false\n errors[key] = validation[key]\n }\n }\n setDeliveryError({...errors})\n return status\n }\n\n const nextStep = () => {\n if (isVirtualCard) {\n handleNext(initDeliveryAddress)\n } else {\n if (deliveryAddressValidation()) {\n handleNext(initDeliveryAddress) \n }\n }\n }\n\n const customOptionLabel = ({ value, label }) => (\n \n \n \n
\n
\n \n \n | \n | # | \nTemplate / Network Type | \nDescription | \nVehicle Number | \nPIN | \n\n \n Vehicle Type\n {VehicleTypePopup()}\n \n | \n \n \n Fuel Profile\n {FuelProfilePopup()}\n \n | \n \n \n Time Profile\n {TimeProfilePopup()}\n \n | \n \n \n Max. Gallon Per Fill\n {ControlPopup(\"Please set your gallon per fill to your vehicles tank size.\")}\n \n | \n \n Max. Gallon Per Period\n | \n\n Gallon Period\n | \nMax. Dollar Amount Per Fill | \nMax. Dollar Amount Per Period | \nDollar Period | \n\n \n Odometer\n {ControlPopup(\"This is a required feature\")}\n \n | \n \n \n Misc Key\n {ControlPopup(\"Entry information is the customer's choice. Transactions sort by Misc Key entry ONLY if Misc Key entry is in the customer vehicle card file. This is also for Mobile Fueling and will prompt the driver at the pump to enter information.\")}\n \n | \n \n \n Strict Control\n {StrictControlPopup()}\n \n | \n Tax Exempt Doc | \nCost Center | \n\n \n Misc 1\n {ControlPopup(\"10 Characters\")}\n \n | \n \n \n Misc 2\n {ControlPopup(\"10 Characters\")}\n \n | \n \n \n Misc 3\n {ControlPopup(\"15 Characters\")}\n \n | \n \n \n Misc 4\n {ControlPopup(\"25 Characters (VIN)\")}\n \n | \n \n \n Retail Access\n {ControlPopup(\"If Retail Access is selected, please view the actual card to verify where access has been granted. If Pacific Pride - please note that only 5 zip codes can be blocked to reduce retail access.\")}\n \n | \n \n \n {/* CFN State Lock In */}\n CFN Retail Access\n {CFNPopup()}\n \n | \n \n \n {/* PPA Zipcode Lockout */}\n Pacific Pride Retail Lockout\n {PPAPopup()}\n \n | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| \n \n \n \n | \n {index + 1} | \n\n \n {CardDropdown(cardTemplates.data, index, 'card_template_id', 'Select Template')}\n \n | \n {CardInput('description', index, 'text', card.description)} | \n{vehicleNumberRule(card.card_template_id) ? CardInput('vehicle_number', index, 'text', card.vehicle_number) : '-'} | \n{availablePinRule(card.card_template_id) && CardInput('pin', index, 'number', card.pin)} | \n{CardDropdown(vehicleTypes, index, 'card_vehicle_type_id', '')} | \n{fuelProfileRule(card.card_template_id) && CardDropdown(fuelProfileSorted(fuelProfiles, card.card_template_id), index, 'card_fuel_profile_id', '')} | \n{timeProfileRule(card.card_template_id) && CardDropdown(timeProfileSorted(timeProfiles, card.card_template_id), index, 'card_time_profile_id', '')} | \n{gallonRule(card.card_template_id) ? CardInput('max_gallon_fill', index, 'number', card.max_gallon_fill) : '-'} | \n{gallonRule(card.card_template_id) ? CardInput('max_gallon_period', index, 'number', card.max_gallon_period) : '-'} | \n{gallonRule(card.card_template_id) ? CardDropdown(sortDropdownOption(periodGallons), index, 'card_period_gallon_id', '') : '-'} | \n{amountRule(card.card_template_id, 'max_amount_fill') ? CardInput('max_amount_fill', index, 'number', card.max_amount_fill) : '-'} | \n{amountRule(card.card_template_id, 'max_amount_period') ? CardInput('max_amount_period', index, 'number', card.max_amount_period) : '-'} | \n{amountRule(card.card_template_id, 'card_period_amount_id') ? CardDropdown(sortDropdownOption(periodAmounts), index, 'card_period_amount_id', '') : '-'} | \n{CardToggle('is_odometer', index, card.is_odometer)} | \n{ miscKeyRule(card.card_template_id) ? CardToggle('is_misc_key', index, card.is_misc_key) : '-'} | \n{allowConcurrentRule(card.card_template_id) ? CardToggle('strict_control', index, card.strict_control) : '-'} | \n{taxRule(card.card_template_id) ? CardInput('tax_doc', index, 'text', card.tax_doc): '-'} | \n{CardInput('cost_center', index, 'text', card.cost_center)} | \n{CardInput('misc_1', index, 'text', card.misc_1, 'textarea')} | \n{CardInput('misc_2', index, 'text', card.misc_2, 'textarea')} | \n{CardInput('misc_3', index, 'text', card.misc_3, 'textarea')} | \n{CardInput('misc_4', index, 'text', card.misc_4, 'textarea')} | \n{retailRule(card.card_template_id) ? CardToggle('is_retail', index, card.is_retail): '-'} | \n{allowRetailStatesRule(card.card_template_id) && card.is_retail ? CFNDropdown(index) : '-'} | \n\n {retailPurchasesZipRule(card.card_template_id) && card.is_retail ?\n \n \n : '-'}\n | \n
\n BACK\n \n
\n {\n showModalCardDetailTemplate && \n \n
\n );\n\n const shippingMethods = [\n {\n label: \"USPS\",\n value: \"USPS\"\n },\n {\n label: \"UPS Overnight\",\n value: \"UPS Overnight\"\n },\n {\n label: \"UPS Ground\",\n value: \"UPS Ground\"\n }\n ]\n\n return (\n {label}
\n {\n value.id !== '' && {value.address} - {value.city} - {value.zipcode}
\n }\n \n
\n :\n Your request has been submitted to Customer Service.
\nYou will receive an email with a case number to track the progress of your request. Once completed, another email will be sent to you closing the case. You will then be able to download an updated version of the card list to view your request.
\n\n \n setInitDeliveryAddress({ ...initDeliveryAddress, receive_pin_order: e.target.checked })}\n label=\"I'd like to receive the list of pins with my order\"\n />\n \n
\n }\n \n {\n changeDeliveryMethod(\"address\");\n }}\n >\n \n {\n changeDeliveryMethod(\"office\");\n }}\n >\n \n
\n {\n initDeliveryAddress.is_delivery\n ? \n \n \n \n Please select from the address below or add a new one.\n \n {\n selectAddress(address)\n }}\n components={{\n IndicatorSeparator: () => null\n }}\n styles={{\n option: (styles, { isDisabled, isSelected }) => {\n return {\n ...styles,\n backgroundColor: isSelected && \"#ff0000\",\n };\n },\n valueContainer: styles => ({...styles, padding: '12px 12px'})\n }}\n options={[...addressList()].map(address => {\n return {\n label: address.label,\n value: address.value\n }\n })\n }\n formatOptionLabel={customOptionLabel}\n />\n \n \n
\n \n \n Shipping Method \n \n \n
\n }\n \n Special Instructions \n setInitDeliveryAddress({...initDeliveryAddress, delivery_special_instruction: e.target.value})}\n />\n \n {\n user.user_type_id === 1 &&\n \n Requestor \n setInitDeliveryAddress({...initDeliveryAddress, requestor: e.target.value})}\n placeholder=\"John Doe\"\n />\n \n }\n
\n : \n {\n selectedAddress.value.id === '' &&\n \n
\n }\n \n \n Address Name \n setInitDeliveryAddress({...initDeliveryAddress, delivery_address_name: e.target.value})}\n />\n \n \n \n Attention To \n setInitDeliveryAddress({...initDeliveryAddress, delivery_attention_to: e.target.value})}\n />\n \n \n
\n \n \n Address \n setInitDeliveryAddress({...initDeliveryAddress, delivery_street_address: e.target.value})}\n />\n \n \n \n City \n setInitDeliveryAddress({...initDeliveryAddress, delivery_city: e.target.value})}\n />\n \n {/* \n Address 2 \n setInitDeliveryAddress({...initDeliveryAddress, delivery_street_address_secondary: e.target.value})}\n />\n */}\n \n
\n \n \n State \n { selectState(state) }}\n className={deliveryError.hasOwnProperty('delivery_state') ? 'is-invalid' : ''}\n components={{\n IndicatorSeparator: () => null\n }}\n value={\n {\n label: statesOption.findIndex(x => (x.id).toString() === initDeliveryAddress.delivery_state.toString()) !== - 1 ? statesOption[statesOption.findIndex(x => (x.id).toString() === initDeliveryAddress.delivery_state.toString())].name : '',\n value: initDeliveryAddress.delivery_state\n }\n }\n styles={\n {\n menu: styles => ({ ...styles, zIndex: 3 }),\n control: styles => ({ ...styles, borderColor: deliveryError.hasOwnProperty('delivery_state') ? '#dc3545' : '#ced4da' })\n }\n }\n options={statesSorted(statesOption).map(state => {\n let name = state.name.replace(\"(\", \" (\")\n return {\n label: name,\n value: state.id\n }\n })}\n />\n \n \n \n ZIP Code \n setInitDeliveryAddress({...initDeliveryAddress, delivery_zipcode: e.target.value})}\n />\n \n \n
\n \n \n Phone Number \n setInitDeliveryAddress({...initDeliveryAddress, delivery_phone_number: e.target.value})}\n placeholder=\"Phone Numer\"\n />\n \n \n
\n
\n {\n user.user_type_id === 1 &&\n ADD NEW ADDRESS
\n \n{deliveryError.delivery_address_name}
\n {deliveryError.delivery_attention_to}
\n {deliveryError.delivery_street_address}
\n {deliveryError.delivery_city}
\n {deliveryError.delivery_street_address_secondary}
\n {deliveryError.delivery_state}
\n {deliveryError.delivery_zipcode}
\n {deliveryError.delivery_street_address}
\n \n \n \n Name \n setInitDeliveryAddress({...initDeliveryAddress, pickup_name: e.target.value})}\n />\n \n \n
\n \n \n Phone Number \n setInitDeliveryAddress({...initDeliveryAddress, pickup_phone_number: e.target.value})}\n placeholder=\"Phone Number\"\n />\n \n \n
\n \n
\n \n \n Special Instructions \n setInitDeliveryAddress({...initDeliveryAddress, pickup_special_instruction: e.target.value})}\n />\n \n \n
\n \n \n Requestor \n \n \n setInitDeliveryAddress({...initDeliveryAddress, requestor: e.target.value})}\n placeholder=\"John Doe\"\n />\n \n }\n \n
\n
\n }\n Please enter the information of the person who will pickup this order. We will call this person when the order is ready to pickup.
\n {deliveryError.pickup_name}
\n {deliveryError.pickup_phone_number}
\n \n Pickup Address \n
\n \n {initDeliveryAddress.pickup_address}
\n \n \n \n
\n \n
\n \n \n
\n Order {createCardData[0].card_order_number} has been received.
\n Go back to List of Cards\n\n
\n \n
\n \n \n NEW CARD ORDER\n \n Dashboard / Card Maintenance / New Card Order\n \n
\n \n
\n : \n
\n \n \n
\n {renderStepperComponent()}\n \n
\n \n \n
\n \n
\n \n Your card order hasn't been submitted yet.
\nAre you sure you want to exit this process?
\n\n \n \n
\n 404 PAGE NOT FOUND
\n )}\n />\n\n \n \n \n 
\n \n \n \n Options \n \n \n }\n >\n \n \n\n \n
\n \n
\n }\n\n const render = () => {\n if (role === \"auth\") {\n return auth();\n }\n return header();\n }\n\n return render();\n}\n\nexport default Header;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { IconContext } from \"react-icons\";\nimport { BsGridFill, BsExclamationCircleFill, BsFillPersonFill, BsFillPersonCheckFill } from 'react-icons/bs'\nimport { FaAddressCard } from 'react-icons/fa'\n\n// import Components \nimport { Row, Col, Nav, NavDropdown } from \"react-bootstrap\";\nimport {useSelector} from 'react-redux';\n\n\n// import all styles\nimport \"./menus.styles.scss\";\n\n\nconst Menus = ({ history }) => {\n const {location: {pathname}} = history;\n\n const { user } = useSelector((state) => state.auth)\n\n const menuTitleCard = \n \n window.location = '/dashboard'} >\n \n \n \n \n \n \n window.location = '/card-management'}>Edit Cards \n {\n user.user_type_id === 1 && window.location = '/card-template'}>Card Templates \n }\n window.location = '/card-order'}>Card Order \n {\n user.user_type_id === 1 && window.location = '/card-order-batch'}>Batches \n }\n \n \n \n \n On Demand Report \n window.location = '/transaction-detail-report'}>Transaction Detail Report \n window.location = '/fuel-summary-report'}>Fuel Summary Report \n window.location = '/billing-sort-report'}>Billing Sort Report \n window.location = '/list-driver-or-vehicle-report'}>List Driver or Vehicle Report \n window.location = '/exception-report'}>Exception Report \n window.location = '/tax-summary-report'}>Tax Summary Report \n window.location = '/owner-operator-report'}>Owner Operator Report \n Admin Report \n window.location = '/tax-exempt-report'}>Tax Exempt Report \n window.location = '/submit-log-report'}>Submit Log Report \n window.location = '/user-log-report'}>User Log Report \n Scheduled Report \n window.location = '/daily-transaction-report'}>Daily Transaction Report \n window.location = '/scheduled-exception-report'}>Exception Report \n window.location = '/invoiced-transaction-report'}>Invoiced Transaction Report \n window.location = '/driver-vehicle-records-monthly-audit-report'}>Driver and Vehicle Records Monthly Audit Report \n \n \n {/* \n window.location = '/user')}>\n \n \n \n */}\n {/* \n \n \n window.location = '/account')} >Account Maintenance \n */}\n \n \n window.location = '/billing-information'}> Billing Information \n window.location = '/delivery-address'}>Delivery Addresses \n window.location = '/user'}>User Maintenance \n \n \n Contact Support \n \n window.location = '/edit-password'\n }>Edit Password \n {\n logouts()\n }}>Logout \n
\n \n \n \n \n \n Contact Support \n \n window.location = '/edit-password'\n }>Edit Password \n {\n logouts()\n }}>Logout \n\n \n \n
\n \n \n \n
\n :\n \n \n
\n }\n \n \n
\n);\n\nexport default Footer;\n","var _path;\n\nfunction _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); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgUser(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 30,\n height: 30,\n viewBox: \"0 0 30 30\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M15 .563a15 15 0 1 0 15 15 15 15 0 0 0-15-15zm0 5.806a5.323 5.323 0 1 1-5.323 5.323A5.323 5.323 0 0 1 15 6.369zm0 20.806a11.59 11.59 0 0 1-8.861-4.125 6.744 6.744 0 0 1 5.961-3.617 1.48 1.48 0 0 1 .429.067 8.008 8.008 0 0 0 2.471.417 7.978 7.978 0 0 0 2.474-.417 1.48 1.48 0 0 1 .429-.067 6.744 6.744 0 0 1 5.958 3.617A11.59 11.59 0 0 1 15 27.175z\",\n transform: \"translate(0 -.563)\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgUser);\nexport default __webpack_public_path__ + \"static/media/user.476ce87d.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState } from 'react';\n// import Components \nimport { ReactComponent as KeyIcon } from './../../assets/key.svg';\nimport { ReactComponent as UserIcon } from './../../assets/user.svg';\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"./modal-message.styles.scss\";\n\n\nconst ModalMessage = ({ type, title, email }) => {\n const [show, setShow] = useState(true);\n const handleClose = () => setShow(false);\n\n const renderBody = () => {\n switch (type) {\n case 'error-activation':\n return \n \n
\n \n
\n \n For lost or stolen cards, immediately call Customer Service at 1.800.950.3835 (24 hours a day).\n \n COPYRIGHT ©2024 PETROCARD, INC. ALL RIGHTS RESERVED. TERMS & AGREEMENTS.\n
\n \n
\n case 'reset-password':\n return \n
\n \n {email}\n \n \n
\n case 'account-activation':\n return \n
\n \n Your password has been successfully reset!\n \n \n Click here to login to your account.\n \n \n
\n case 'edit-profile':\n return \n
\n \n Your account has been successfully activated!\n \n \n Click here to login to your account.\n \n \n
\n case 'edit-password':\n return \n
\n \n Your Profile has been successfully updated!\n \n \n
\n case 'add-user':\n return \n
\n \n Your password has been successfully updated!\n \n \n
\n\n default:\n return \n }\n }\n\n return (\n \n
\n \n Success\n \n \n We’ve sent an invitation to {email}\n
\n