diff --git a/gatsby-browser.js b/gatsby-browser.js index 5790b2e33..80f77219b 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1707,6 +1707,21 @@ export const onRouteUpdate = ({ location, prevLocation }) => { } else if (window.location.pathname.indexOf("contact/sales/seal") >= 0) { + } else if (window.location.pathname.indexOf("contact/sales/form-data-api") >= 0) { + + document + .querySelector(".Form-Data-API-ContactUs") + .closest("main") + .setAttribute("daa-lh", "Body"); + + document + .querySelector(".Form-Data-API") + .setAttribute("daa-lh", "Form Data API"); + + document + .querySelector(".Hero-Banner") + .setAttribute("daa-lh", "Hero Banner"); + } else if (window.location.pathname.indexOf("contact") >= 0) { document .querySelector(".Contact-Home") diff --git a/src/components/form-data-api.js b/src/components/form-data-api.js new file mode 100644 index 000000000..9542cb01e --- /dev/null +++ b/src/components/form-data-api.js @@ -0,0 +1,381 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import InputField from "./formComponent/InputField"; +import SelectField from "./formComponent/SelectField"; +import CheckBoxField from "./formComponent/CheckBoxField"; +import _isEmpty from "lodash/isEmpty"; +import _times from "lodash/times"; + +const regionOptions = [ + { + key: 1, + label: "North America" + }, + { + key: 2, + label: "Latin America" + }, + { + key: 3, + label: "Asia/Pacific/Japan" + }, + { + key: 4, + label: "Europe/Middle East/Africa" + } +]; + +const volumeOPtions = [ + { + key: 1, + label: "less than 10K transactions/mo" + }, + { + key: 2, + label: "10-50k transactions/mo" + }, + { + key: 3, + label: "more than 50k transactions/mo" + } +]; + +const FormDataAPI = ({ }) => { + const [errorMsg, seterrorMsg] = useState({}); + const [formValue, setFormValue] = useState({}); + const [btnDisable, setBtnDisable] = useState(false) + + const onChange = e => { + if (e.target.id === "firstName") { + setFormValue({ ...formValue, firstName: e.target.value }); + } + if (e.target.id === "lastName") { + setFormValue({ ...formValue, lastName: e.target.value }); + } + if (e.target.id === "business_email") { + setFormValue({ ...formValue, business_email: e.target.value }); + } + if (e.target.id === "company_website") { + setFormValue({ ...formValue, company_website: e.target.value }); + } + if (e.target.id === "phone") { + setFormValue({ ...formValue, phone: e.target.value }); + } + if (e.target.id === "job_title") { + setFormValue({ ...formValue, job_title: e.target.value }); + } + if (e.target.id === "region") { + setFormValue({ ...formValue, region: e.target.value }); + } + if (e.target.id === "expected_monthly_volume") { + setFormValue({ ...formValue, expected_monthly_volume: e.target.value }); + } + if (e.target.id === "checkbox") { + setFormValue({ ...formValue, checkbox: e.target.checked }); + } + }; + + const onSubmit = async e => { + e.preventDefault(); + setBtnDisable(true) + + let randomString = _times(16, () => + ((Math.random() * 0xf) << 0).toString(16) + ).join(""); + let emailCheck = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + var blacklist = /\b(death|kill|murder)\b/; + var checkBlackWords; + let error = {}; + + if (_isEmpty(formValue?.firstName)) { + error.firstName = "Required *"; + setBtnDisable(false) + } else if (blacklist.test(formValue.firstName)) { + error.firstName = "Please avoid inappropriate words"; + setBtnDisable(false) + } else { + error.firstName = ""; + } + if (_isEmpty(formValue?.lastName)) { + error.lastName = "Required *"; + setBtnDisable(false) + } else if (blacklist.test(formValue?.lastName)) { + error.lastName = "Please avoid inappropriate words"; + setBtnDisable(false) + } else { + error.lastName = ""; + } + + if (_isEmpty(formValue?.business_email)) { + error.business_email = "Required *"; + setBtnDisable(false) + } else if (!emailCheck.test(formValue?.business_email)) { + error.business_email = "Email address is not valid"; + setBtnDisable(false) + } else if (blacklist.test(formValue?.business_email)) { + error.business_email = "Please avoid inappropriate words"; + setBtnDisable(false) + } else { + error.business_email = ""; + } + if (_isEmpty(formValue?.company_website)) { + error.company_website = "Required *"; + setBtnDisable(false) + } else if (blacklist.test(formValue?.company_website)) { + error.company_website = "Please avoid inappropriate words"; + setBtnDisable(false) + } else { + error.company_website = ""; + } + if (_isEmpty(formValue?.job_title)) { + error.job_title = "Required *"; + setBtnDisable(false) + } else if (blacklist.test(formValue?.job_title)) { + error.job_title = "Please avoid inappropriate words"; + setBtnDisable(false) + } else { + error.job_title = ""; + } + if (_isEmpty(formValue?.region)) { + error.region = "Required *"; + setBtnDisable(false) + } else { + error.region = ""; + } + if (_isEmpty(formValue?.expected_monthly_volume)) { + error.expected_monthly_volume = "Required *"; + setBtnDisable(false) + } else { + error.expected_monthly_volume = ""; + } + if (formValue?.checkbox !== true) { + error.checkbox = "Required *"; + setBtnDisable(false) + } else { + error.checkbox = ""; + } + seterrorMsg({ ...error }); + + if ( + !_isEmpty(formValue?.firstName) && + !blacklist.test(formValue?.firstName) && + !_isEmpty(formValue?.lastName) && + !blacklist.test(formValue?.lastName) && + !_isEmpty(formValue?.business_email) && + emailCheck.test(formValue?.business_email) && + !blacklist.test(formValue?.business_email) && + !_isEmpty(formValue?.company_website) && + !blacklist.test(formValue?.company_website) && + !_isEmpty(formValue?.job_title) && + !blacklist.test(formValue?.job_title) && + !_isEmpty(formValue?.region) && + !_isEmpty(formValue?.expected_monthly_volume) && + !checkBlackWords && + formValue?.checkbox == true + ) { + let pdfElectronicSealAPIData = { + ...formValue, + formType: "pdfAccessibility", + formId: randomString + }; + try { + const config = { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json" + }, + body: JSON.stringify(pdfElectronicSealAPIData) + }; + const resp = await fetch( + `https://927029-dcpm.adobeioruntime.net/api/v1/web/default/submit`, + config + ); + const response = await resp.json(); + if (resp.status === 200) { + setFormValue({ + firstName: "", + lastName: "", + where_did_you_hear_about_us: false, + need_test_certificate: false, + checkbox: false + }); + alert( + "Thank you! Your information has been successfully submitted." + ); + setBtnDisable(false) + } + } catch (err) { + console.log("err", err); + } + } + }; + return ( +
+ ); +}; + +FormDataAPI.propTypes = { + theme: PropTypes.string, + content: PropTypes.string +}; + +export { FormDataAPI }; diff --git a/src/pages/apis/pdf-extract.md b/src/pages/apis/pdf-extract.md index c0c6673b1..0163c8636 100644 --- a/src/pages/apis/pdf-extract.md +++ b/src/pages/apis/pdf-extract.md @@ -28,6 +28,14 @@ apiHeroAssetImg doc-ext-invoice