@arquimedes.co/eureka-forms 1.9.2 → 1.9.3-test

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -57,7 +57,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
 import SectionComponent from '../../Section/Section';
 import { useForm } from 'react-hook-form';
 import styles from './ColumnForm.module.css';
@@ -65,9 +66,11 @@ import Types from '../../../constants/FormStepTypes';
 import { convertToRaw } from 'draft-js';
 import TermComponent from '../../Term/Term';
 import ConfirmationDialog from '../ConfirmationDialog/ConfirmationDialog';
+import EntradasConfirmationDialog from '../EntradasAmarillasDialog/ConfirmationDialog';
 import Loader from '../../../shared/Loader/Loader';
 import axiosInstance from '../../../AxiosAPI';
 import widgetInstance from '../../../AxiosWidget';
+import React from 'react';
 function ColumnForm(_a) {
     var _this = this;
     var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, sendLabel = _a.sendLabel, widthStats = _a.widthStats, customSteps = _a.customSteps, customSend = _a.customSend, handleLoaded = _a.handleLoaded, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "sendLabel", "widthStats", "customSteps", "customSend", "handleLoaded", "originalValues"]);
@@ -78,9 +81,11 @@ function ColumnForm(_a) {
         mode: 'onTouched',
         shouldFocusError: true,
     }), getValues = _d.getValues, setValue = _d.setValue, clearErrors = _d.clearErrors, control = _d.control, errors = _d.formState.errors, trigger = _d.trigger;
+    var recaptchaRef = useRef();
     var _e = useState(undefined), sections = _e[0], setSections = _e[1];
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
     var _g = useState(), showConfirmation = _g[0], setShowConfirmation = _g[1];
+    var _h = useState(), showEntradasConfirmation = _h[0], setShowEntradasConfirmation = _h[1];
     useEffect(function () {
         var tempSections = [];
         calcNextSection(form, form.firstSection, tempSections);
@@ -90,7 +95,7 @@ function ColumnForm(_a) {
     if (sections === undefined) {
         return _jsx("div", {}, void 0);
     }
-    var onSubmit = function () { return __awaiter(_this, void 0, void 0, function () {
+    var onSubmit = function (token) { return __awaiter(_this, void 0, void 0, function () {
         var valid, values, _i, _a, idStep, payload, url, resp, _b, error_1;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -123,6 +128,9 @@ function ColumnForm(_a) {
                     payload = {
                         formValues: { steps: values },
                     };
+                    if (token) {
+                        payload.token = token;
+                    }
                     url = "/ticket/" + (internal ? form.apiKey : apiKey);
                     if (!(domain || internal)) return [3 /*break*/, 6];
                     return [4 /*yield*/, widgetInstance.post(url + "?idOrganization=" + domain, payload)];
@@ -135,7 +143,14 @@ function ColumnForm(_a) {
                     _c.label = 8;
                 case 8:
                     resp = _b;
-                    setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    if (others.organization.idOrganization ===
+                        'entradasamarillas' &&
+                        form.apiKey === 'precarga') {
+                        setShowEntradasConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    }
+                    else {
+                        setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    }
                     _c.label = 9;
                 case 9:
                     setLoading(false);
@@ -152,19 +167,49 @@ function ColumnForm(_a) {
     return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }, void 0), showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
                     reload();
                     setShowConfirmation(undefined);
+                } }, void 0)), showEntradasConfirmation !== undefined && (_jsx(EntradasConfirmationDialog, { formStyle: formStyle, widthStats: widthStats, confirmation: showEntradasConfirmation, onClose: function () {
+                    reload();
+                    setShowEntradasConfirmation(undefined);
                 } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps, setDependencyStore: setDependencyStore, dependencyStore: dependencyStore, trigger: trigger }, others), index)); }), form.terms &&
                 (!internal || (internal && postview)) &&
                 (originalValues === null || originalValues === void 0 ? void 0 : originalValues['INTERNAL_CREATING_AGENT']) === undefined && (_jsx("div", __assign({ className: styles.termsContainer, style: {
                     width: (form.size.blockSize + form.size.spacingSize) *
                         form.size.blockNum,
-                } }, { children: form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }) }), void 0)), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () {
-                        onSubmit();
-                    }, style: {
-                        background: formStyle.primaryColor,
-                        color: formStyle.primaryContrastColor,
-                    }, disabled: loading }, { children: [_jsx("div", __assign({ style: {
-                                visibility: loading ? 'hidden' : 'visible',
-                            } }, { children: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' }), void 0), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }, void 0) }), void 0))] }), void 0) }), void 0))] }), void 0));
+                } }, { children: form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }) }), void 0)), !postview && (_jsxs(React.Fragment, { children: [form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' }, void 0)), _jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                var valid, captcha;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            if (!(form.hasCaptcha && !internal)) return [3 /*break*/, 5];
+                                            return [4 /*yield*/, trigger(undefined, {
+                                                    shouldFocus: true,
+                                                })];
+                                        case 1:
+                                            valid = _a.sent();
+                                            if (!valid) return [3 /*break*/, 4];
+                                            captcha = recaptchaRef.current.getValue();
+                                            if (!!captcha) return [3 /*break*/, 3];
+                                            return [4 /*yield*/, (recaptchaRef === null || recaptchaRef === void 0 ? void 0 : recaptchaRef.current.executeAsync())];
+                                        case 2:
+                                            captcha =
+                                                _a.sent();
+                                            _a.label = 3;
+                                        case 3:
+                                            onSubmit(captcha);
+                                            _a.label = 4;
+                                        case 4: return [3 /*break*/, 6];
+                                        case 5:
+                                            onSubmit();
+                                            _a.label = 6;
+                                        case 6: return [2 /*return*/];
+                                    }
+                                });
+                            }); }, style: {
+                                background: formStyle.primaryColor,
+                                color: formStyle.primaryContrastColor,
+                            }, disabled: loading }, { children: [_jsx("div", __assign({ style: {
+                                        visibility: loading ? 'hidden' : 'visible',
+                                    } }, { children: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' }), void 0), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }, void 0) }), void 0))] }), void 0) }), void 0)] }, void 0))] }), void 0));
 }
 export default ColumnForm;
 function calcNextSection(form, idSection, sections) {

package/dist/FormComponents/Form/ColumnForm/ColumnForm.module.css

@@ -45,3 +45,7 @@
     left: 0px;
     position: absolute;
 }
+
+.termsContainer {
+    max-width: 100%;
+}

package/dist/FormComponents/Form/EntradasAmarillasDialog/ConfirmationDialog.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { FormStyle } from '../../../@Types/Form';
+import { WidthStats } from '../Form';
+interface ConfirmationDialogProps {
+    confirmation: {
+        code: string;
+    };
+    onClose: Function;
+    formStyle: FormStyle;
+    widthStats: WidthStats;
+}
+declare function ConfirmationDialog({ confirmation, widthStats, formStyle, onClose, }: ConfirmationDialogProps): JSX.Element;
+export default ConfirmationDialog;

package/dist/FormComponents/Form/EntradasAmarillasDialog/ConfirmationDialog.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CheckCircleOutlineRoundedIcon from '@material-ui/icons/CheckCircleOutlineRounded';
+import styles from './ConfirmationDialog.module.css';
+import Dialog from '@material-ui/core/Dialog';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import { useRef } from 'react';
+import RoundedButton from '../../../shared/RoundedButton/RoundedButton';
+import { Link } from '@material-ui/core';
+function ConfirmationDialog(_a) {
+    var confirmation = _a.confirmation, widthStats = _a.widthStats, formStyle = _a.formStyle, onClose = _a.onClose;
+    var urlRef = useRef(null);
+    var copyRef = useRef(null);
+    return (_jsx(Dialog, __assign({ PaperProps: {
+            style: {
+                borderRadius: '20px',
+                maxWidth: '100vw',
+                boxSizing: 'content-box',
+            },
+        }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
+                        onClose();
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.secondaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer, style: widthStats.isMobile
+                                ? {
+                                    margin: '0px 20px',
+                                }
+                                : {} }, { children: ["Tu c\u00F3digo de precarga es:", _jsxs("div", __assign({ className: styles.codeContainer, style: {
+                                        flexDirection: widthStats.isMobile
+                                            ? 'column'
+                                            : 'row',
+                                    } }, { children: [_jsx("input", { value: confirmation.code, className: styles.codeInput, ref: urlRef, readOnly: true, style: widthStats.isMobile
+                                                ? {
+                                                    color: formStyle.textColor,
+                                                    fontWeight: 'bold',
+                                                    maxWidth: '100%',
+                                                    width: '100%',
+                                                    marginLeft: '0px',
+                                                    marginBottom: '15px',
+                                                }
+                                                : {
+                                                    color: formStyle.textColor,
+                                                    fontWeight: 'bold',
+                                                } }, void 0), _jsx("div", __assign({ className: styles.copyLink }, { children: _jsx(RoundedButton, { text: 'Copiar', color: formStyle.primaryContrastColor, backgroundColor: '#afafaf', fontSize: '1rem', padding: '2px 5px 2px 5px', onClick: function () {
+                                                    var _a, _b, _c;
+                                                    (_a = urlRef.current) === null || _a === void 0 ? void 0 : _a.select();
+                                                    /* For mobile devices */
+                                                    (_b = urlRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(0, 99999);
+                                                    document.execCommand('copy');
+                                                    (_c = copyRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                                                } }, void 0) }), void 0)] }), void 0)] }), void 0), _jsx("div", __assign({ className: styles.btnContainer }, { children: _jsx(Link, __assign({ href: "https://www.entradasamarillas.com/", target: "_blank", rel: "noopener" }, { children: _jsx(RoundedButton, { text: 'Precargar', color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1.2rem', padding: '5px 15px 5px 15px', onClick: function () { } }, void 0) }), void 0) }), void 0)] }), void 0)] }), void 0) }), void 0));
+}
+export default ConfirmationDialog;

package/dist/FormComponents/Form/EntradasAmarillasDialog/ConfirmationDialog.module.css

@@ -0,0 +1,80 @@
+.confirmationContainer {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    max-height: 80vh;
+    max-width: 80vw;
+    position: relative;
+}
+
+.container {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
+}
+.confirmationContainer,
+.confirmationContainer *,
+.confirmationContainer *::after,
+.confirmationContainer *::before {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.checkContainer {
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 30px;
+    height: fit-content;
+    margin-bottom: 10px;
+}
+
+.messageContainer {
+    margin-left: 40px;
+    margin-right: 40px;
+    font-size: 1.6rem;
+    text-align: center;
+}
+.closeIcon {
+    right: 15px;
+    top: 10px;
+    font-size: 26px;
+    position: absolute;
+    cursor: pointer;
+}
+
+.copyLink {
+    padding-left: 5px;
+    padding-right: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.codeContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.codeInput {
+    margin-left: 69px;
+    width: 240px;
+    max-width: calc(100% - 120px);
+    outline: none;
+    border: none;
+    font-size: 2rem;
+    text-align: center;
+}
+
+.btnContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+}

package/dist/FormComponents/Section/MaterialSection/MaterialSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SectionComponentProps } from '../Section';
-declare function MaterialSection({ section, form, ...others }: SectionComponentProps): JSX.Element;
+declare function MaterialSection({ form, section, widthStats, ...others }: SectionComponentProps): JSX.Element;
 export default MaterialSection;

package/dist/FormComponents/Section/MaterialSection/MaterialSection.js

@@ -25,11 +25,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../Step/Step';
 import styles from './MaterialSection.module.css';
 function MaterialSection(_a) {
-    var section = _a.section, form = _a.form, others = __rest(_a, ["section", "form"]);
+    var form = _a.form, section = _a.section, widthStats = _a.widthStats, others = __rest(_a, ["form", "section", "widthStats"]);
     var postview = others.postview, partial = others.partial, originalValues = others.originalValues;
     return (_jsx("div", __assign({ className: styles.container, style: {
             width: (form.size.blockSize + form.size.spacingSize) *
                 form.size.blockNum,
+            justifyContent: widthStats.currentBreakPoint < form.size.blockNum
+                ? 'center'
+                : 'normal',
         } }, { children: section.steps.map(function (idStep, index) {
             var step = form.steps[idStep];
             //If partial is active only display steps with originalValues
@@ -39,7 +42,7 @@ function MaterialSection(_a) {
                 return _jsx("div", {}, index);
             }
             else if (step) {
-                return (_createElement(StepComponent, __assign({}, others, { form: form, step: step, handleSizeChange: function () { }, key: index, level: 0 })));
+                return (_createElement(StepComponent, __assign({}, others, { widthStats: widthStats, form: form, step: step, handleSizeChange: function () { }, key: index, level: 0 })));
             }
             else {
                 console.error('Step not found:', idStep);

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.d.ts

@@ -3,7 +3,7 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './DraftEditor.css';
 import { RawDraftContentState } from 'draft-js';
 import { TextAreaStepProps } from '../TextAreaStep';
-declare function TextAreaStep({ step, errors, control, editable, postview, formStyle, maxLength, originalValues, backgroundColor, }: TextAreaStepProps): JSX.Element;
+declare function TextAreaStep({ step, errors, partial, control, editable, postview, formStyle, maxLength, originalValues, backgroundColor, }: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;
 export declare function stringToDraft(text: string): RawDraftContentState;
 export declare const getRawText: (draft?: RawDraftContentState | undefined, text?: string | undefined) => RawDraftContentState;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,7 +20,7 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import React, { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var step = _a.step, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, maxLength = _a.maxLength, originalValues = _a.originalValues, backgroundColor = _a.backgroundColor;
+    var step = _a.step, errors = _a.errors, partial = _a.partial, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, maxLength = _a.maxLength, originalValues = _a.originalValues, backgroundColor = _a.backgroundColor;
     var _b = useState(false), hovering = _b[0], setHovering = _b[1];
     var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
@@ -158,7 +158,7 @@ function TextAreaStep(_a) {
                 }, shouldUnregister: true, render: function (_a) {
                     var _b;
                     var field = _a.field;
-                    return (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
+                    return (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                                         ? errors[step.id].message
                                         : (_b = step.description) !== null && _b !== void 0 ? _b : (step.required ? ' ' : null), error: !!errors[step.id] }), void 0) }), void 0), postview && (_jsxs("div", __assign({ className: styles.print }, { children: [_jsxs("div", { children: [step.label, ":"] }, void 0), _jsx("p", __assign({ className: styles.printContainer, style: {
                                             backgroundColor: formStyle.stepBackgroundColor,

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TitleStepProps } from '../TitleStep';
-declare function TitleStep({ step, formStyle }: TitleStepProps): JSX.Element;
+declare function TitleStep({ step, formStyle, widthStats, }: TitleStepProps): JSX.Element;
 export default TitleStep;

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialTitleStep.module.css';
 function TitleStep(_a) {
-    var step = _a.step, formStyle = _a.formStyle;
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.titleLbl }, { children: step.title }), void 0), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+    var step = _a.step, formStyle = _a.formStyle, widthStats = _a.widthStats;
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.titleLbl, style: { textAlign: widthStats.isMobile ? 'center' : 'start' } }, { children: step.title }), void 0), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
                     margin: step.title ? '10px 0px' : '0px 0px 5px 0px',
                 } }, { children: step.description }), void 0))] }), void 0));
 }

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css

@@ -9,9 +9,6 @@
 .titleLbl {
     font-size: 24px;
     font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     cursor: default;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "1.9.2",
+    "version":"1.9.3-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -18,11 +18,13 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
+        "@types/react-google-recaptcha": "^2.1.5",
         "axios": "^0.21.x",
         "date-fns": "^2.23.x",
         "draft-js": "^0.11.x",
         "nanoid": "^3.3.3",
         "react-draft-wysiwyg": "^1.14.x",
+        "react-google-recaptcha": "^2.1.0",
         "react-hook-form": "^7.6.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.0-next.37",