Merge branch 'main' of https://github.com/near-everything/app

src/components/Feedback/ContactForm.js

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import Select from "react-select";
+import { toast } from "react-toastify";
+import { useAuth } from "../../context/AuthContext";
+import { useCreateFeedback } from "../../features/feedback/feedbackApi";
+import Button from "../Button";
+import TextArea from "../TextArea";
+
+const typeOptions = [
+  {
+    label: "I have a question",
+    value: "QUESTION",
+  },
+  {
+    label: "I have a concern",
+    value: "CONCERN",
+  },
+  {
+    label: "I have an idea",
+    value: "IDEA",
+  },
+  {
+    label: "Offer to help",
+    value: "HELP",
+  },
+  {
+    label: "Other...",
+    value: "OTHER",
+  },
+];
+
+function ContactForm() {
+  const [type, setType] = useState("");
+  const [description, setDescription] = useState("");
+  const { user } = useAuth();
+  const createFeedback = useCreateFeedback();
+
+  const handleSubmit = () => {
+    createFeedback.mutate(
+      {
+        type: type.value,
+        description: description,
+        userId: user.uid,
+      },
+      {
+        onSuccess: () => {
+          toast.success("Feedback successfully submitted. Thank you!");
+          setDescription("");
+          setType({});
+        },
+        onError: () => {
+          toast.error("Error submitting feedback.");
+        },
+      }
+    );
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <span className="font-semibold text-2xl">Contact us</span>
+        <Select
+          id="feedback_select"
+          className="basic-single text-black"
+          classNamePrefix={"select"}
+          defaultValue={type}
+          name="type"
+          options={typeOptions}
+          onChange={setType}
+          placeholder="Reason for contact..."
+        />
+        <TextArea
+          name="feedback_question"
+          className="h-32"
+          placeholder=""
+          onChange={(e) => {
+            setDescription(e.target.value);
+          }}
+          value={description}
+          disabled={type === ""}
+        />
+        <Button
+          className="w-full h-16"
+          onClick={handleSubmit}
+          disabled={description === "" || type === ""}
+        >
+          Submit
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default ContactForm;

src/features/auth/PhoneNumberVerification.js

@@ -1,5 +1,9 @@
 import { logEvent } from "firebase/analytics";
-import { signInWithPhoneNumber } from "firebase/auth";
+import {
+  browserLocalPersistence,
+  setPersistence,
+  signInWithPhoneNumber,
+} from "firebase/auth";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import PhoneInput from "react-phone-input-2";
@@ -21,6 +25,7 @@ function PhoneNumberVerification({ recaptcha, auth }) {
   }, [recaptcha]);
 
   const signIn = async () => {
+    await setPersistence(auth, browserLocalPersistence);
     setConfirmationResult(
       await signInWithPhoneNumber(auth, phoneNumber, recaptcha)
     );