Request a New Article from update:

- separate Request Article Form and Feedbakc form - update Request a New Article form fields
rsksmart · Nov 25, 2024 · 875c3f1 · 875c3f1
1 parent b322d37
commit 875c3f1
Show file tree

Hide file tree

Showing 7 changed files with 318 additions and 141 deletions.
diff --git a/src/components/FeedbackForm/index.js b/src/components/FeedbackForm/index.js
@@ -50,7 +50,7 @@ export const FeedbackForm = () => {
       <ModalFormSpark
         show={modalShow}
         rating={rating}
-        form={{id: 'vg6LeINWT', title: 'Thank you for your feedback!', description: 'We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!'}}
+        form={{id: 'vg6LeINWT', title: 'Thank you for your feedback!', description: 'We would love to hear your thoughts and feedback so that we can improve these Docs for you and others!', type: 'feedback'}}
         onHide={() => setModalShow(false)}
       />
     </div>

diff --git a/src/components/ModalFormSpark/Forms/FormFeedback/index.js b/src/components/ModalFormSpark/Forms/FormFeedback/index.js
@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormFeedback = (props) => {
+  const [url, setUrl] = useState('#');
+
+  const { form } = props;
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  });
+
+
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+
+  const [sending, setSending] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const totalStars = 5;
+  const [rating, setRating] = useState(props.rating || 0);
+  const [hover, setHover] = useState(null);
+
+  useEffect(() => {
+    if (props.rating) {
+      setRating(props.rating);
+    }
+
+    if (window) {
+      setUrl(window.location.origin + window.location.pathname);
+    }
+  }, [props.rating]);
+
+  const onSubmit = async (e) => {
+    if (submitting) return;
+
+    e.preventDefault();
+    setSending(true);
+    let query = {message, email, name, url}
+
+    query = props?.rating ? {...query, rating} : query;
+
+    await submit(query);
+    setSubmitted(true);
+    setSending(false);
+    setMessage("");
+    setEmail("");
+    setName("");
+    setRating(0);
+    setTimeout(() => {
+      setSubmitted(false);
+    }, 4000)
+  };
+
+  return form?.id && (
+    <>
+      {props?.rating && (
+        <div className="my-32 d-flex gap-12 justify-content-between align-items-center">
+          <span>Current rating</span>
+          <div className={'d-flex gap-8'}>
+            {[...Array(totalStars)].map((star, index) => {
+              const currentRating = index + 1;
+
+              return (
+                <label key={index}
+                       onMouseEnter={() => setHover(currentRating)}
+                       onMouseLeave={() => setHover(null)}
+                >
+                  <input
+                    disabled={submitting}
+                    className={`d-none`}
+                    key={star}
+                    type="radio"
+                    name="rating"
+                    value={currentRating}
+                    onChange={() => setRating(currentRating)}
+                  />
+                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none">
+                    <path
+                      d="M11.5 5.18625L13.4837 9.19688L13.8144 9.91563L14.5331 10.0234L18.9606 10.6631L15.8125 13.7538L15.2734 14.2784L15.4028 14.9972L16.1575 19.4031L12.1972 17.3259L11.5 17.0312L10.8315 17.3834L6.87123 19.4319L7.58998 15.0259L7.71936 14.3072L7.18748 13.7538L4.01061 10.6272L8.43811 9.9875L9.15686 9.87969L9.48748 9.16094L11.5 5.18625ZM11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z"
+                      fill="currentColor"/>
+                    <path d="M11.5 1.9375L8.22967 8.56438L0.919983 9.62094L6.20998 14.7816L4.95936 22.0625L11.5 18.6269L18.0406 22.0625L16.79 14.7816L22.08 9.62812L14.7703 8.56438L11.5 1.9375Z" fill={currentRating <= (hover || rating) ? "currentColor" : "none"}/>
+                  </svg>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <form onSubmit={onSubmit}>
+        <div className="d-flex flex-column gap-12 mb-24">
+          {props?.rating && (
+            <input type="hidden" name="rating" value={rating}/>
+          )}
+          <input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`}
+                 value={name} onChange={(e) => setName(e.target.value)}
+          />
+          <input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`}
+                 value={email} onChange={(e) => setEmail(e.target.value)}
+          />
+
+          <textarea required={true} value={message} placeholder={`Message`} className="form-control" rows={4}
+                    onChange={(e) => setMessage(e.target.value)}/>
+        </div>
+
+        <div className={`d-flex justify-content-between align-items-center`}>
+          <button type={`button`} className={`btn-blank`} onClick={props.onDismiss}>
+            {!submitted ? (`Not now`) : (`Close`)}
+          </button>
+
+          <button
+            className="btn position-relative py-10"
+            type="submit" disabled={submitting}
+          >
+              <span>
+                {sending && (
+                  <>
+                    Submitting
+                    <div className="spinner-border" role="status">
+                      <span className="visually-hidden">Loading...</span>
+                    </div>
+                  </>
+                )}
+                {!sending && !submitted && (
+                  <>
+                    Submit
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-arrow-right"/>
+                    </svg>
+                  </>
+                )}
+                {!sending && submitted && (
+                  <>
+                    Submitted
+                    <svg width="16" height="17">
+                      <use xlinkHref="#icon-check-circle"/>
+                    </svg>
+                  </>
+                )}
+              </span>
+          </button>
+
+        </div>
+      </form>
+    </>
+  );
+}
diff --git a/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js b/src/components/ModalFormSpark/Forms/FormRequestArticle/index.js
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react'
+import { useFormspark } from '@formspark/use-formspark'
+
+export const FormRequestArticle = (props) => {
+  // const [url, setUrl] = useState('#')
+
+  const { form } = props
+
+  const [submit, submitting] = useFormspark({
+    formId: form?.id || ``,
+  })
+
+  // const [email, setEmail] = useState('')
+  // const [name, setName] = useState('')
+  //
+  // const [requestType, setRequestType] = useState('tutorial')
+  // const [title, setTitle] = useState('')
+  // const [why, setWhy] = useState('')
+  // const [otherInformation, setOtherInformation] = useState('')
+  // const [submitIssue, setSubmitIssue] = useState('')
+
+  const requestTypes = ['Tutorial', 'Guide', 'Video', 'Image']
+
+  const initFormData = {
+    // name: '',
+    // email: '',
+    requestType: requestTypes[0],
+    title: '',
+    publicationLocation: '',
+    why: '',
+    otherInformation: '',
+    submitIssue: '',
+  }
+
+  const [formData, setFormData] = useState(initFormData)
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }))
+  }
+
+  const [sending, setSending] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+
+  useEffect(() => {
+    if (window) {
+      const url = window.location.origin + window.location.pathname;
+
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        url: url,
+      }))
+    }
+  }, [])
+
+  const onSubmit = async (e) => {
+    if (submitting) return
+
+    e.preventDefault()
+    setSending(true)
+    // let query = { message, email, name, url }
+
+
+    await submit(formData)
+    setSubmitted(true);
+    setSending(false);
+    setFormData(initFormData);
+
+    setTimeout(() => {
+      setSubmitted(false)
+    }, 4000)
+  }
+
+  return form?.id && (
+    <form onSubmit={onSubmit}>
+      <div className="d-flex flex-column gap-12 mb-24">
+      {requestTypes.length > 0 && (
+        <div>
+          {requestTypes.map((value, index) => (
+            <label className="form-check form-check-inline" key={index}>
+              <input className="form-check-input" type="radio" name="requestType" checked={formData.requestType === value} value={value} onChange={handleInputChange}/>
+              <span className="form-check-label">{value}</span>
+            </label>
+          ))}
+        </div>
+      )}
+        {/*<input type="text" className="form-control" name={`name`} required={true} placeholder={`Name`} maxLength={50}*/}
+        {/*       value={formData.name} onChange={handleInputChange}*/}
+        {/*/>*/}
+        {/*<input type="email" className="form-control" name={`email`} required={true} placeholder={`Email`} maxLength={100}*/}
+        {/*       value={formData.email} onChange={handleInputChange}*/}
+        {/*/>*/}
+        <input type="text" className="form-control" name={`title`} required={true} placeholder={`Title`} maxLength={100}
+               value={formData.title} onChange={handleInputChange}
+        />
+        <textarea className="form-control" name="why" placeholder={`Why / Reason for Request`} required={true} rows={3} maxLength={500}
+                  value={formData.why} onChange={handleInputChange}
+        />
+        <input type="text" className="form-control" name={`publicationLocation`} required={false} placeholder={`Publication location`} maxLength={100}
+               value={formData.publicationLocation} onChange={handleInputChange}
+        />
+        <textarea className="form-control" name="otherInformation" placeholder={`Any other information`} required={false} rows={3} maxLength={500}
+                  value={formData.otherInformation} onChange={handleInputChange}
+        />
+        <input type="text" className="form-control" name={`submitIssue`} required={false} placeholder={`Submit an Issue / Pull Request`} maxLength={100}
+               value={formData.submitIssue} onChange={handleInputChange}
+        />
+      </div>
+
+      <div className={`d-flex justify-content-between align-items-center`}>
+        <button type={`button`} className={`btn-blank`} onClick={props.onDismiss}>
+          {!submitted ? (`Not now`) : (`Close`)}
+        </button>
+
+        <button
+          className="btn position-relative py-10"
+          type="submit" disabled={submitting}
+        >
+          <span>
+            {sending && (
+              <>
+                Submitting
+                <div className="spinner-border" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              </>
+            )}
+            {!sending && !submitted && (
+              <>
+                Submit
+                <svg width="16" height="17">
+                  <use xlinkHref="#icon-arrow-right"/>
+                </svg>
+              </>
+            )}
+            {!sending && submitted && (
+              <>
+                Submitted
+                <svg width="16" height="17">
+                  <use xlinkHref="#icon-check-circle"/>
+                </svg>
+              </>
+            )}
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}