diff --git a/package.json b/package.json index 20b11ffe..e7287f70 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "snet-sdk-web": "5.0.4", "utf8": "^3.0.0", "validate.js": "^0.13.1", + "waf-captcha-frontend": "0.0.7", "web3": "^4.11.1" }, "resolutions": { @@ -126,4 +127,4 @@ "ts-protoc-gen": "^0.15.0", "url": "^0.11.4" } -} +} \ No newline at end of file diff --git a/src/components/Captcha/WAFScriptLoad.js b/src/components/Captcha/WAFScriptLoad.js deleted file mode 100644 index 0e5e9dd1..00000000 --- a/src/components/Captcha/WAFScriptLoad.js +++ /dev/null @@ -1,29 +0,0 @@ -export const WAF_SCRIPT_ID = "AwsWAFScript"; - -export function checkWAFEnv() { - const errors = []; - if (!process.env.REACT_APP_CAPTCHA_TOKEN) { - errors.push("REACT_APP_CAPTCHA_TOKEN is not set"); - } - if (!process.env.REACT_APP_JSAPI_URL) { - errors.push("REACT_APP_JSAPI_URL is not set"); - } - return { isValid: errors.length === 0, errors }; -} - -export function getWAFEnv() { - return { - JSAPI_URL: process.env.REACT_APP_JSAPI_URL, - CAPTCHA_TOKEN: process.env.REACT_APP_CAPTCHA_TOKEN, - }; -} - -export function loadCaptchaScript() { - const JSAPI_URL = getWAFEnv().JSAPI_URL; - if (document.getElementById(WAF_SCRIPT_ID) || !JSAPI_URL) return; - const AwsWafScript = document.createElement("script"); - AwsWafScript.id = WAF_SCRIPT_ID; - AwsWafScript.async = false; - AwsWafScript.src = JSAPI_URL; - document.head.appendChild(AwsWafScript); -} diff --git a/src/components/Captcha/captchaFetchHandler.js b/src/components/Captcha/captchaFetchHandler.js deleted file mode 100644 index f16ee142..00000000 --- a/src/components/Captcha/captchaFetchHandler.js +++ /dev/null @@ -1,34 +0,0 @@ -import { checkWAFEnv, getWAFEnv } from "./WAFScriptLoad"; - -export const captchaFetch = (path, init) => { - const { isValid, errors } = checkWAFEnv(); - if (!isValid) { - throw Error(errors[0]); - } - - const modalOverlay = document.getElementById("modalOverlay"); - const modal = document.getElementById("modal"); - const captchaForm = document.getElementById("captchaForm"); - const API_KEY = getWAFEnv().CAPTCHA_TOKEN; - - if (!modalOverlay || !modal || !captchaForm || !API_KEY) { - throw Error("Can't find modal components"); - } - - modalOverlay.style.display = "block"; - modal.style.display = "block"; - - return new Promise((resolve) => { - window.AwsWafCaptcha.renderCaptcha(captchaForm, { - onSuccess: () => { - modalOverlay.style.display = "none"; - modal.style.display = "none"; - resolve(window.AwsWafIntegration.fetch(path, init)); - }, - onLoad: () => { - document.body.style.cursor = "default"; - }, - apiKey: API_KEY, - }); - }); -}; diff --git a/src/components/Captcha/modal/CaptchaModal.css b/src/components/Captcha/modal/CaptchaModal.css deleted file mode 100644 index 071d6c5e..00000000 --- a/src/components/Captcha/modal/CaptchaModal.css +++ /dev/null @@ -1,24 +0,0 @@ -.captcha-modal.overlay { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(128,128,128,0.5); - display: none; - z-index: 1000; -} - -.captcha-modal .modal { - position: fixed; - top: 50vh; - left: 50vw; - transform: translate(-50%,-50%); - background-color: white; - border-radius: 8px; - padding: 16px; -} - -.captcha-modal .captchaForm { - position: relative; -} diff --git a/src/components/Captcha/modal/CaptchaModal.jsx b/src/components/Captcha/modal/CaptchaModal.jsx deleted file mode 100644 index 2b9e0401..00000000 --- a/src/components/Captcha/modal/CaptchaModal.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import './CaptchaModal.css'; - -const CaptchaModal = () => { - return ( -
- - ) -} - -export default CaptchaModal; \ No newline at end of file diff --git a/src/components/FeedbackFormModal/FeedbackForm.js b/src/components/FeedbackFormModal/FeedbackForm.js index 5eb2d87f..e29bf696 100644 --- a/src/components/FeedbackFormModal/FeedbackForm.js +++ b/src/components/FeedbackFormModal/FeedbackForm.js @@ -38,10 +38,10 @@ const FeedbackForm = ({ closeForm, sendFeedbackAPI }) => { } catch (error) { setAlert({ type: alertTypes.ERROR, message: error?.message }); } finally { + dispatch(loaderActions.stopAppLoader()); await new Promise((resolve) => setTimeout(resolve, 3000)); resetForm(); setIsRequestHandling(false); - dispatch(loaderActions.stopAppLoader()); closeForm(); } }; diff --git a/src/components/FeedbackFormModal/index.js b/src/components/FeedbackFormModal/index.js index fa3faad4..4eba8733 100644 --- a/src/components/FeedbackFormModal/index.js +++ b/src/components/FeedbackFormModal/index.js @@ -1,25 +1,15 @@ -import { Fragment, useEffect, useState } from "react"; +import { Fragment, useState } from "react"; import OpenFormButton from "./OpenFormButton"; import "./styles.css"; import FeedbackFormModal from "./FeedbackFormModal"; import { sendFeedbackSnetAPI } from "../../config/SupportAPI"; -import CaptchaModal from "../Captcha/modal/CaptchaModal"; -import { loadCaptchaScript } from "../Captcha/WAFScriptLoad"; const FeedbackForm = () => { const [isModalVisible, setIsModalVisible] = useState(false); - useEffect(() => { - try { - loadCaptchaScript(); - } catch (err) { - console.error("CAPTCHA script error: ", err); - } - }, []); - return ( - +
{ const [isModalVisible, setIsModalVisible] = useState(false); - useEffect(() => { - try { - loadCaptchaScript(); - } catch (err) { - console.error("CAPTCHA script error: ", err); - } - }, []); - return (
diff --git a/src/config/SupportAPI.js b/src/config/SupportAPI.js index e46361e1..561be9d7 100644 --- a/src/config/SupportAPI.js +++ b/src/config/SupportAPI.js @@ -1,9 +1,11 @@ import axios from "axios"; -import { captchaFetch } from "../components/Captcha/captchaFetchHandler"; +import { getCaptchaFetch } from "../utility/captchaFetch"; const source = "MARKETPLACE"; -export const sendFeedbackSnetAPI = ({ name, email, category, feedback, attachmentUrls }) => { +const captchaFetch = getCaptchaFetch(); + +export const sendFeedbackSnetAPI = async ({ name, email, category, feedback, attachmentUrls }) => { const options = { method: "POST", headers: { @@ -27,7 +29,7 @@ export const sendFeedbackSnetAPI = ({ name, email, category, feedback, attachmen if (!feedbackUrl) { throw new Error("Cannot start the application! process.env.REACT_APP_FEEDBACK_ENDPOINT is undefined"); } - captchaFetch(feedbackUrl + "/user/message", options); + await captchaFetch(feedbackUrl + "/user/message", options); }; const ENTER_CODE = "%0D%0A"; diff --git a/src/utility/captchaFetch.js b/src/utility/captchaFetch.js new file mode 100644 index 00000000..eec15367 --- /dev/null +++ b/src/utility/captchaFetch.js @@ -0,0 +1,20 @@ +import { createCaptchaFetchHandler } from "waf-captcha-frontend"; + +export const getCaptchaFetch = () => { + const keys = { + JSAPI_URL: process.env.REACT_APP_JSAPI_URL, + CAPTCHA_TOKEN: process.env.REACT_APP_CAPTCHA_TOKEN, + }; + + if (!keys.CAPTCHA_TOKEN || !keys.JSAPI_URL) { + throw new Error("Tokens undefined"); + } + + const captchaFetch = createCaptchaFetchHandler({ + API_KEY: keys.CAPTCHA_TOKEN, + JSAPI_URL: keys.JSAPI_URL, + captchaContainerId: "captchaContainer", + }); + + return captchaFetch; +};