Note to subscriber & Extras

amittras-pal · amittras-pal · Dec 21, 2022 · Dec 21, 2022 · Dec 21, 2022 · Dec 21, 2022
commit 55e96f7c464779fbb66fd8e67abf8d2c651506e5
diff --git a/context/Subscription.jsx b/context/Subscription.jsx
@@ -178,11 +178,7 @@ export function SubscriptionProvider({ children }) {
  onSubmit={handleSubmit(subscribe)}
  >
  <div className="modal-header d-flex jsutify-content-between align-items-center">
- <h5
- className="modal-title d-flex align-items-center gap-2"
- id="subscribeFormLabel"
- >
- <IconUserPlus />
+ <h5 className="modal-title" id="subscribeFormLabel">
  <span>Subscribe to {APP_TITLE}</span>
  </h5>
  <button
@@ -193,7 +189,7 @@ export function SubscriptionProvider({ children }) {
  </button>
  </div>
  <div className="modal-body pt-0">
- <p className="text-muted">
+ <p className="text-primary">
  Subscribe to {APP_TITLE} newsletter, and receive a monthly
  digest of all new posts & stories, straight to your inbox...
  </p>
@@ -221,6 +217,17 @@ export function SubscriptionProvider({ children }) {
  <div className="invalid-feedback">{errors.email.message}</div>
  )}
  </div>
+ <p className="small">
+ <span className="fw-bold text-success text-decoration-underline">
+ Note:
+ </span>
+ <span className="text-muted">
+ {" "}
+ If you are a subscriber and are seeing this, kindly re-enter
+ your information. This helps me provide a better experience as
+ you browse the content.
+ </span>
+ </p>
  </div>
  <div className="modal-footer d-flex">
  <button

diff --git a/pages/admin/index.jsx b/pages/admin/index.jsx
@@ -1,5 +1,6 @@
 import { auth } from "@fb/client";
 import { signOut } from "firebase/auth";
+import { NextSeo } from "next-seo";
 import React, { Suspense, useState } from "react";
 import { lazy } from "react";
 import AuthProvider from "../../context/Auth";
@@ -20,107 +21,110 @@ export default function Admin() {
  };
 
  return (
- <AuthProvider>
- <div className={styles.wrapper}>
- <div className={`w-25 ${styles.sidebar}`}>
- <button
- className={`${styles.nav} ${
- active === "add-post" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("add-post")}
- >
- Add New Post
- </button>
- <button
- className={`${styles.nav} ${
- active === "add-story" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("add-story")}
- >
- Add New Story
- </button>
- <button
- className={`${styles.nav} ${
- active === "add-chapter" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("add-chapter")}
- >
- Add Chapter to an Ongoing Story
- </button>
- <button
- className={`${styles.nav} ${
- active === "comments" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("comments")}
- >
- Approve Comments
- </button>
- <button
- className={`${styles.nav} ${
- active === "submissions" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("submissions")}
- disabled
- >
- Review Submissions
- </button>
- <button
- className={`${styles.nav} ${
- active === "messages" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("messages")}
- disabled
- >
- View Messages
- </button>
- <button
- className={`${styles.nav} ${
- active === "preview" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("preview")}
- >
- File Preview
- </button>
- <button
- className={`${styles.nav} ${
- active === "site-content" ? styles.nav__active : ""
- }`}
- onClick={() => setActive("site-content")}
- disabled
- >
- Manage Site Content
- </button>
- <button
- className={`mt-auto ${styles.nav} bg-danger`}
- onClick={logout}
- >
- Sign Out
- </button>
- </div>
- <div className={`w-75 ${styles.content}`} id="prContent">
- {!active && (
- <div className="d-flex w-100 h-100 justify-content-center align-items-center">
- <h1 className="display-4 text-center">
- Select a Task from the left to get started.
- </h1>
- </div>
- )}
- <Suspense fallback="Loading Module">
- {active === "comments" && <Comments />}
- {active === "submissions" && <Submissions />}
- {active === "preview" && <FilePreview />}
- {active === "add-chapter" && (
- <AddChapter onCompleted={() => setActive("")} />
- )}
- {active === "add-story" && (
- <AddStory onCompleted={() => setActive("")} />
- )}
- {active === "add-post" && (
- <AddPost onCompleted={() => setActive("")} />
+ <>
+ <AuthProvider>
+ <NextSeo title="Admin" />
+ <div className={styles.wrapper}>
+ <div className={`w-25 ${styles.sidebar}`}>
+ <button
+ className={`${styles.nav} ${
+ active === "add-post" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("add-post")}
+ >
+ Add New Post
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "add-story" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("add-story")}
+ >
+ Add New Story
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "add-chapter" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("add-chapter")}
+ >
+ Add Chapter to an Ongoing Story
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "comments" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("comments")}
+ >
+ Approve Comments
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "submissions" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("submissions")}
+ disabled
+ >
+ Review Submissions
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "messages" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("messages")}
+ disabled
+ >
+ View Messages
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "preview" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("preview")}
+ >
+ File Preview
+ </button>
+ <button
+ className={`${styles.nav} ${
+ active === "site-content" ? styles.nav__active : ""
+ }`}
+ onClick={() => setActive("site-content")}
+ disabled
+ >
+ Manage Site Content
+ </button>
+ <button
+ className={`mt-auto ${styles.nav} bg-danger`}
+ onClick={logout}
+ >
+ Sign Out
+ </button>
+ </div>
+ <div className={`w-75 ${styles.content}`} id="prContent">
+ {!active && (
+ <div className="d-flex w-100 h-100 justify-content-center align-items-center">
+ <h1 className="display-4 text-center">
+ Select a Task from the left to get started.
+ </h1>
+ </div>
  )}
- </Suspense>
+ <Suspense fallback="Loading Module">
+ {active === "comments" && <Comments />}
+ {active === "submissions" && <Submissions />}
+ {active === "preview" && <FilePreview />}
+ {active === "add-chapter" && (
+ <AddChapter onCompleted={() => setActive("")} />
+ )}
+ {active === "add-story" && (
+ <AddStory onCompleted={() => setActive("")} />
+ )}
+ {active === "add-post" && (
+ <AddPost onCompleted={() => setActive("")} />
+ )}
+ </Suspense>
+ </div>
  </div>
- </div>
- </AuthProvider>
+ </AuthProvider>
+ </>
  );
 }
diff --git a/pages/submissions.jsx b/pages/submissions.jsx
@@ -1,4 +1,5 @@
 import { APP_TITLE } from "@constants/app";
+import { useSubscription } from "@context/Subscription";
 import { store } from "@fb/client";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useMediaQuery } from "@hooks/media-query";
@@ -17,10 +18,10 @@ import { NextSeo } from "next-seo";
 import Image from "next/image";
 import React, { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import * as yup from "yup";
 import styles from "../styles/modules/Submissions.module.scss";
 
 export default function Submissions() {
+ const { subscribed } = useSubscription();
  const { showNotification } = useNotifications();
  const isLargeScreen = useMediaQuery("md");
  const modalRef = useRef();
@@ -34,20 +35,12 @@ export default function Submissions() {
  modalRef.current.addEventListener("shown.bs.modal", focusFirstInput);
  }, []);
 
- const showSubmissionForm = () => {
- const { Modal } = require("bootstrap");
- const formModal = new Modal(modalRef.current, {
- backdrop: "static",
- focus: true,
- });
- formModal.show();
- };
-
  const {
  handleSubmit,
  reset,
  register,
  watch,
+ setValue,
  formState: { errors },
  } = useForm({
  mode: "onBlur",
@@ -56,6 +49,21 @@ export default function Submissions() {
  resolver: yupResolver(submissionValidator),
  });
 
+ const showForm = () => {
+ const { Modal } = require("bootstrap");
+ const formModal = new Modal(modalRef.current, {
+ backdrop: "static",
+ focus: true,
+ });
+ formModal.show();
+ if (subscribed)
+ setValue("emailId", subscribed, {
+ shouldTouch: true,
+ shouldDirty: true,
+ shouldValidate: true,
+ });
+ };
+
  const closeForm = () => {
  const { Modal } = require("bootstrap");
  const formModal = Modal.getInstance(modalRef.current);
@@ -113,7 +121,7 @@ export default function Submissions() {
  </h4>
  <button
  className="btn btn-lg btn-primary shadow icon-right"
- onClick={showSubmissionForm}
+ onClick={showForm}
  >
  Share it with us
  <IconMailFast size={32} />