{"version":3,"sources":["components/Header.tsx","components/Footer.tsx","configuration.ts","components/Form.tsx","components/Checkout.tsx","screens/Entry.tsx","screens/Status.tsx","App.tsx","index.tsx"],"names":["Header","_jsx","className","children","_jsxs","Link","to","src","alt","Footer","Date","getFullYear","Configuration","apiPrefix","paymentUrl","statusRedirectUrl","getCheckoutId","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","values","response","wrap","_context","prev","next","fetch","method","headers","body","JSON","stringify","companyName","invoiceNumber","amount","Number","invoiceAmount","phoneNumber","email","sent","abrupt","stop","_x","apply","arguments","validatePhoneNumber","test","String","toLowerCase","validateInvoiceNumber","validateEmail","Form","_ref2","setFormSuccess","setCheckoutId","_useState","useState","_useState2","_slicedToArray","invoiceFormValues","setInvoiceFormValues","_useState3","_useState4","touchedFormValues","setTouchedFormValues","_useState5","_useState6","formError","setFormError","_useState7","_useState8","isLoading","setIsLoading","errors","error","length","message","validate","isInvalid","Object","some","toggleIsLoading","prevIsLoading","shouldMarkError","field","hasError","shouldShow","getErrorMessage","handleChange","event","_objectSpread","_defineProperty","target","name","value","handleSubmit","_ref3","_callee2","data","_context2","preventDefault","status","json","id","t0","_x2","onSubmit","onBlur","htmlFor","type","onChange","disabled","Loader","color","height","_Fragment","href","Checkout","PropTypes","func","isRequired","loaded","setLoaded","useEffect","callback","existingScript","document","getElementById","script","createElement","concat","appendChild","onload","loadExternalScript","action","Entry","string","checkoutId","formSuccess","Status","search","useLocation","queryString","parse","checkoutSuccess","setCheckoutSuccess","merchantTransactionId","setTransactionId","then","statusResponse","jsonResponse","result","code","match","finally","App","getConfig","responseBody","window","location","origin","Router","Switch","Route","path","ReactDOM","render","React","StrictMode"],"mappings":"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","file":"static/js/main.25ab7ecb.chunk.js","sourcesContent":["import React from 'react';\nimport { Link } from 'react-router-dom';\n\nimport './Header.css';\n\nconst Header = (): JSX.Element => {\n  return (\n    <header className=\"App-header\">\n      <div className=\"Header\">\n        <Link to=\"/\">\n          <img src=\"stst-logo.png\" className=\"Logo\" alt=\"The StepStone Group logo.\" />\n        </Link>\n        <h1 className=\"Title\">The Stepstone Group UK – Invoice Payment Service</h1>\n      </div>\n    </header>\n  );\n};\n\nexport default Header;\n","import React from 'react';\nimport './Footer.css';\n\nconst Footer = (): JSX.Element => {\n  return (\n    <footer className=\"App-footer\">\n      <div className=\"Footer\">© Copyright and database rights The Stepstone Group UK Ltd {new Date().getFullYear()}</div>\n      <div className=\"extra-div\"></div>\n    </footer>\n  );\n};\n\nexport default Footer;\n","const Configuration = {\n  apiPrefix: '',\n  paymentUrl: '',\n  statusRedirectUrl: '',\n};\n\nexport default Configuration;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Loader from 'react-loader-spinner';\nimport Configuration from '../configuration';\n\nimport 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';\nimport './Form.css';\n\ntype InvoiceForm = {\n  companyName: string;\n  invoiceNumber: string;\n  invoiceAmount: string;\n  phoneNumber: string;\n  email: string;\n};\n\ntype FormError = {\n  error: boolean;\n  message: string;\n};\n\nconst getCheckoutId = async (values: InvoiceForm) => {\n  const response = await fetch(Configuration.apiPrefix + '/api/Invoice/checkout', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      companyName: values.companyName,\n      invoiceNumber: values.invoiceNumber,\n      amount: Number(values.invoiceAmount),\n      phoneNumber: values.phoneNumber,\n      email: values.email,\n    }),\n  });\n\n  return response;\n};\n\nconst validate = (invoiceFormValues: InvoiceForm): Record<string, FormError> => {\n  return {\n    companyName: {\n      error: invoiceFormValues.companyName.length === 0,\n      message: 'Cannot be empty',\n    },\n    invoiceNumber: {\n      error: validateInvoiceNumber(invoiceFormValues.invoiceNumber),\n      message: 'Must be a valid invoice number (e.g. 80000000 or PRO12345678)',\n    },\n    invoiceAmount: {\n      error: Number(invoiceFormValues.invoiceAmount) <= 0,\n      message: 'Cannot be zero or negative',\n    },\n    phoneNumber: {\n      error: validatePhoneNumber(invoiceFormValues.phoneNumber),\n      message: 'Must be a valid phone number',\n    },\n    email: {\n      error: validateEmail(invoiceFormValues.email),\n      message: 'Please use a valid email address',\n    },\n  };\n};\n\nconst validatePhoneNumber = (phoneNumber: string) => {\n  const re = /^[0-9]{8,20}$/;\n  return !re.test(String(phoneNumber).toLowerCase());\n};\n\nconst validateInvoiceNumber = (invoiceNumber: string) => {\n  const re = /^(?:(?:pro[0-9])|8)[0-9]{7,8}$/;\n  return !re.test(String(invoiceNumber).toLowerCase());\n};\n\nconst validateEmail = (email: string) => {\n  const re =\n    /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n  return !re.test(String(email).toLowerCase());\n};\n\nconst Form: React.FC<FormProps> = ({ setFormSuccess, setCheckoutId }): JSX.Element => {\n  const [invoiceFormValues, setInvoiceFormValues] = useState({\n    companyName: '',\n    invoiceNumber: '',\n    invoiceAmount: '',\n    phoneNumber: '',\n    email: '',\n  });\n\n  const [touchedFormValues, setTouchedFormValues]: [Record<string, boolean>, any] = useState({\n    companyName: false,\n    invoiceNumber: false,\n    invoiceAmount: false,\n    phoneNumber: false,\n    email: false,\n  });\n\n  const [formError, setFormError] = useState(false);\n\n  const [isLoading, setIsLoading] = useState(false);\n\n  const errors = validate(invoiceFormValues);\n  const isInvalid = Object.values(errors).some((error) => error.error);\n\n  const toggleIsLoading = (): void => {\n    setIsLoading((prevIsLoading) => !prevIsLoading);\n  };\n\n  const shouldMarkError = (field: string): boolean => {\n    const hasError = errors[field].error;\n    const shouldShow = touchedFormValues[field];\n\n    return hasError ? shouldShow : false;\n  };\n\n  const getErrorMessage = (field: string): string => {\n    return shouldMarkError(field) ? errors[field].message : '';\n  };\n\n  const handleChange = (event: any): void => {\n    setInvoiceFormValues({\n      ...invoiceFormValues,\n      [event.target.name]: event.target.value,\n    });\n  };\n\n  const handleBlur = (event: any): void => {\n    setTouchedFormValues({\n      ...touchedFormValues,\n      [event.target.name]: true,\n    });\n  };\n\n  const handleSubmit = async (event: any) => {\n    event.preventDefault();\n    setFormError(false);\n    toggleIsLoading();\n\n    try {\n      const response = await getCheckoutId(invoiceFormValues);\n\n      if (response.status === 200) {\n        const data = await response.json();\n        setCheckoutId(data.id);\n        setFormSuccess(true);\n        setInvoiceFormValues({\n          companyName: '',\n          invoiceNumber: '',\n          invoiceAmount: '',\n          phoneNumber: '',\n          email: '',\n        });\n        setTouchedFormValues({\n          companyName: false,\n          invoiceNumber: false,\n          invoiceAmount: false,\n          phoneNumber: false,\n          email: false,\n        });\n      } else {\n        setFormError(true);\n      }\n    } catch (err) {\n      setFormError(true);\n    }\n\n    toggleIsLoading();\n  };\n\n  return (\n    <div className=\"Form\">\n      <div className=\"Form-header\">Please complete the fields below to pay your invoice</div>\n      <div>All of the following fields are required.</div>\n      <form className=\"Form-inputs\" onSubmit={handleSubmit} onBlur={handleBlur}>\n        <div className=\"Form-input\">\n          <label htmlFor=\"companyName\">Company name:</label>\n          <input\n            type=\"text\"\n            id=\"companyName\"\n            name=\"companyName\"\n            onChange={handleChange}\n            value={invoiceFormValues.companyName}\n            className={shouldMarkError('companyName') ? 'Input-error' : ''}\n          />\n          <div className=\"Error\">{getErrorMessage('companyName')}</div>\n        </div>\n        <div className=\"Form-input\">\n          <label htmlFor=\"invoiceNumber\">Invoice number:</label>\n          <input\n            type=\"text\"\n            id=\"invoiceNumber\"\n            name=\"invoiceNumber\"\n            onChange={handleChange}\n            value={invoiceFormValues.invoiceNumber}\n            className={shouldMarkError('invoiceNumber') ? 'Input-error' : ''}\n          />\n          <div className=\"Error\">{getErrorMessage('invoiceNumber')}</div>\n        </div>\n        <div className=\"Form-input\">\n          <label htmlFor=\"invoiceAmount\">Total invoice amount (£):</label>\n          <input\n            type=\"number\"\n            id=\"invoiceAmount\"\n            name=\"invoiceAmount\"\n            onChange={handleChange}\n            value={invoiceFormValues.invoiceAmount}\n            className={shouldMarkError('invoiceAmount') ? 'Input-error' : ''}\n          />\n          <div className=\"Error\">{getErrorMessage('invoiceAmount')}</div>\n        </div>\n        <div className=\"Form-input\">\n          <label htmlFor=\"phoneNumber\">Contact number:</label>\n          <input\n            type=\"text\"\n            id=\"phoneNumber\"\n            name=\"phoneNumber\"\n            onChange={handleChange}\n            value={invoiceFormValues.phoneNumber}\n            className={shouldMarkError('phoneNumber') ? 'Input-error' : ''}\n          />\n          <div className=\"Error\">{getErrorMessage('phoneNumber')}</div>\n        </div>\n        <div className=\"Form-input\">\n          <label htmlFor=\"email\">Email:</label>\n          <input\n            type=\"text\"\n            id=\"email\"\n            name=\"email\"\n            onChange={handleChange}\n            value={invoiceFormValues.email}\n            className={shouldMarkError('email') ? 'Input-error' : ''}\n          />\n          <div className=\"Error\">{getErrorMessage('email')}</div>\n        </div>\n        <div className=\"Form-submit\">\n          <button name=\"submit\" disabled={isInvalid || (!isInvalid && isLoading)}>\n            {isLoading ? <Loader type=\"TailSpin\" color=\"white\" height={16} /> : <>Proceed to payment</>}\n          </button>\n          <div className=\"Error\">\n            {formError\n              ? 'Sorry, there was an error submitting your details. Please try again later or contact us if the error persists.'\n              : ''}\n          </div>\n        </div>\n      </form>\n      <div>\n        If you do not know your invoice number or would like to set up a direct debit for future invoice payments,\n        please call us on 0333 0145 175 or email <a href=\"mailto:UK_AR@thestepstonegroup.com\">UK_AR@thestepstonegroup.com</a>.\n      </div>\n    </div>\n  );\n};\n\nexport default Form;\n\nconst propTypes = {\n  setFormSuccess: PropTypes.func.isRequired,\n  setCheckoutId: PropTypes.func.isRequired,\n};\n\nForm.propTypes = propTypes;\n\ntype FormProps = PropTypes.InferProps<typeof propTypes>;\n","import React, { useState, useEffect } from 'react';\r\nimport Configuration from '../configuration';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst loadExternalScript = (id: string, callback: any) => {\r\n  const existingScript = document.getElementById('total-processing');\r\n  if (!existingScript && id !== '') {\r\n    const script = document.createElement('script');\r\n    script.src = `${Configuration.paymentUrl}/v1/paymentWidgets.js?checkoutId=` + id;\r\n    script.id = 'total-processing';\r\n    document.body.appendChild(script);\r\n\r\n    script.onload = () => {\r\n      if (callback) callback();\r\n    };\r\n\r\n    if (existingScript && callback) callback();\r\n  }\r\n};\r\n\r\nconst Checkout: React.FC<CheckoutProps> = ({ id }): JSX.Element => {\r\n  const [loaded, setLoaded] = useState(false);\r\n\r\n  useEffect(() => {\r\n    loadExternalScript(id, () => {\r\n      setLoaded(true);\r\n    });\r\n  });\r\n\r\n  return (\r\n    <div className=\"Checkout\">\r\n      {loaded ? (\r\n        <form action={Configuration.statusRedirectUrl} className=\"paymentWidgets\" data-brands=\"VISA MASTER AMEX\"></form>\r\n      ) : (\r\n        ''\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Checkout;\r\n\r\nconst propTypes = {\r\n  id: PropTypes.string.isRequired,\r\n};\r\nCheckout.propTypes = propTypes;\r\n\r\ntype CheckoutProps = PropTypes.InferProps<typeof propTypes>;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Form from '../components/Form';\r\nimport Checkout from '../components/Checkout';\r\n\r\nconst Entry: React.FC<EntryProps> = ({ checkoutId, setCheckoutId }): JSX.Element => {\r\n  const [formSuccess, setFormSuccess] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      {!formSuccess ? (\r\n        <>\r\n          <div className=\"Welcome\">Welcome</div>\r\n          <Form setFormSuccess={setFormSuccess} setCheckoutId={setCheckoutId} />\r\n        </>\r\n      ) : (\r\n        <>\r\n          <div className=\"Welcome\">Please enter your card details below</div>\r\n          <Checkout id={checkoutId} />\r\n        </>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Entry;\r\n\r\nconst propTypes = {\r\n  checkoutId: PropTypes.string.isRequired,\r\n  setCheckoutId: PropTypes.func.isRequired,\r\n};\r\nEntry.propTypes = propTypes;\r\n\r\ntype EntryProps = PropTypes.InferProps<typeof propTypes>;\r\n","import React, { useState, useEffect } from 'react';\r\nimport queryString from 'query-string';\r\nimport { Link, useLocation } from 'react-router-dom';\r\nimport Configuration from '../configuration';\r\nimport Loader from 'react-loader-spinner';\r\n\r\nimport 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';\r\n\r\nimport './Status.css';\r\nimport { ITotalProcessingResponse } from '../Models/ITotalProcessingResponse';\r\n\r\nconst Status = (): JSX.Element => {\r\n  const { search } = useLocation();\r\n  const checkoutId = queryString.parse(search).id;\r\n\r\n  const [checkoutSuccess, setCheckoutSuccess] = useState(false);\r\n  const [isLoading, setIsLoading] = useState(true);\r\n  const [merchantTransactionId, setTransactionId] = useState('');\r\n\r\n  const isResponseCodeOk = (code: string) => {\r\n    const regex = /^(000\\.000\\.|000\\.100\\.1|000\\.[36])/g;\r\n    const match = code.match(regex);\r\n    return match !== null;\r\n  };\r\n\r\n  useEffect(() => {\r\n    fetch(Configuration.apiPrefix + `/api/Invoice/status?checkoutId=${checkoutId}`, {\r\n      method: 'GET',\r\n      headers: { 'Content-Type': 'application/json' },\r\n    })\r\n      .then((statusResponse) => {\r\n        statusResponse.json().then((jsonResponse: ITotalProcessingResponse) => {\r\n          setCheckoutSuccess(statusResponse.status === 200 && isResponseCodeOk(jsonResponse.result.code));\r\n          setTransactionId(jsonResponse.merchantTransactionId);\r\n        });\r\n      })\r\n      .finally(() => setIsLoading(false));\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"Status\">\r\n      <div className=\"Status-result\">\r\n        {checkoutSuccess && !isLoading ? (\r\n          <>\r\n            <div className=\"Status-heading\">Thank you, your payment has been successful.</div>\r\n            <p>\r\n              Your payment reference number is <b>{merchantTransactionId}</b>.\r\n            </p>\r\n            <p>\r\n              If you have any questions, please call 0333 0145 175 or email{' '}\r\n              <a href=\"mailto:UK_AR@thestepstonegroup.com\">UK_AR@thestepstonegroup.com</a>.\r\n            </p>\r\n            <p>\r\n              Click <Link to=\"/\">here</Link> to pay another invoice.\r\n            </p>\r\n          </>\r\n        ) : isLoading ? (\r\n          <Loader type=\"TailSpin\" color=\"black\" />\r\n        ) : (\r\n          <>\r\n            <div className=\"Status-heading\">Your checkout was unsuccessful.</div>\r\n            <p>\r\n              Please call us on 0333 0145 175 or email <a href=\"mailto:UK_AR@thestepstonegroup.com\">UK_AR@thestepstonegroup.com</a>{' '}\r\n              for assistance, providing the following checkout reference ID: <b>{checkoutId}</b>.\r\n            </p>\r\n          </>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Status;\r\n","import React, { useState, useEffect } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport './App.css';\nimport Header from './components/Header';\nimport Footer from './components/Footer';\nimport Entry from './screens/Entry';\nimport Status from './screens/Status';\nimport Configuration from './configuration';\n\nconst App = (): JSX.Element => {\n  const [checkoutId, setCheckoutId] = useState('');\n\n  const getConfig = async () => {\n    const response = await fetch(Configuration.apiPrefix + '/api/config', {\n      method: 'GET',\n    });\n    const responseBody = await response.json();\n    Configuration.paymentUrl = responseBody.paymentUrl;\n    Configuration.statusRedirectUrl = window.location.origin + '/status'; //responseBody.statusRedirectUrl;\n\n    return response;\n  };\n\n  useEffect(() => {\n    (async () => {\n      await getConfig();\n    })();\n  });\n\n  return (\n    <Router>\n      <div className=\"App\">\n        <Header />\n        <div className=\"Main\">\n          <div className=\"Main-content\">\n            <Switch>\n              <Route path=\"/status\">\n                <Status />\n              </Route>\n              <Route path=\"/\">\n                <Entry checkoutId={checkoutId} setCheckoutId={setCheckoutId} />\n              </Route>\n            </Switch>\n          </div>\n        </div>\n        <Footer />\n      </div>\n    </Router>\n  );\n};\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}