Subscription dialog flow (#10)

* create initial subscription flow

* remove subscription pages

* full screen dialog on mobile

* add exit symbols to subscription dialogs

* items hyperlink is base url

* complete subscription dialog flow

---------

Co-authored-by: Gabriel Hall <[email protected]>

Author: Adrastopoulos

src/components/AuthWidget.tsx

@@ -6,14 +6,18 @@ import Link from 'next/link';
 import {
   FaCircleNotch,
   FaList,
+  FaMailBulk,
+  FaNotesMedical,
   FaSignInAlt,
   FaSignOutAlt,
   FaUser,
   FaUserGraduate
 } from 'react-icons/fa';
+import useDialogStore from '../stores/DialogStore';
 
 function AuthWidget() {
   const { data: session, status } = useSession();
+  const { subscribeDialog, manageSubscriptionsDialog } = useDialogStore();
 
   if (status === 'loading') {
     return (
@@ -54,14 +58,36 @@ function AuthWidget() {
               </Link>
             </li>
             <li>
-              <Link className="font-bold text-base-content" href="/items">
+              <Link className="font-bold text-base-content" href="/">
                 <FaList />
                 <span>Items</span>
               </Link>
             </li>
             <li />
           </>
         )}
+
+        <li>
+          <button
+            type="button"
+            onClick={subscribeDialog}
+            className="font-bold text-base-content"
+          >
+            <FaMailBulk />
+            <span>Subscriptions</span>
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            onClick={manageSubscriptionsDialog}
+            className="font-bold text-base-content"
+          >
+            <FaNotesMedical />
+            <span>Manage</span>
+          </button>
+        </li>
+        <li />
         <li>
           <button
             type="button"

src/components/Dialog.tsx

@@ -26,7 +26,7 @@ export function Dialog({ children, isOpen, onClose }: DialogProps) {
         </Transition.Child>
 
         <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
+          <div className="flex h-screen items-center justify-center text-center md:min-h-full md:p-4">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -36,7 +36,7 @@ export function Dialog({ children, isOpen, onClose }: DialogProps) {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <HeadlessDialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-base-100 p-6 text-left align-middle shadow-xl transition-all">
+              <HeadlessDialog.Panel className="h-full w-full transform overflow-hidden bg-base-100 p-6 text-left align-middle shadow-xl transition-all md:h-auto md:max-w-md md:rounded-2xl">
                 {children}
               </HeadlessDialog.Panel>
             </Transition.Child>

src/components/ItemCreateModal.tsx renamed to src/components/ItemCreateDialog.tsx

@@ -7,11 +7,11 @@ import useZodForm from 'lib/form';
 import { ItemCreateSchema } from 'lib/schemas';
 import { toast } from 'react-toastify';
 import { trpc } from 'utils/trpc';
-import useModalStore from '../stores/ModalStore';
+import useDialogStore from '../stores/DialogStore';
 import { Dialog } from './Dialog';
 
-function ItemCreateModal() {
-  const { modal, clearModal } = useModalStore();
+function ItemCreateDialog() {
+  const { dialog, clearDialog } = useDialogStore();
 
   const context = trpc.useContext();
   const auditCreateMutation = trpc.audit.create.useMutation();
@@ -24,15 +24,15 @@ function ItemCreateModal() {
         change: { create: item }
       });
       await context.item.invalidate();
-      clearModal();
+      clearDialog();
       toast('Item Created');
     }
   });
 
   const methods = useZodForm({ schema: ItemCreateSchema });
 
   return (
-    <Dialog isOpen={modal === 'createItem'} onClose={clearModal}>
+    <Dialog isOpen={dialog === 'createItem'} onClose={clearDialog}>
       <h3 className="text-center text-lg font-bold">Add Item</h3>
       <hr />
       <form
@@ -216,7 +216,7 @@ function ItemCreateModal() {
             className="btn-error btn-sm btn"
             onClick={() => {
               methods.reset();
-              clearModal();
+              clearDialog();
             }}
           >
             Cancel
@@ -230,4 +230,4 @@ function ItemCreateModal() {
   );
 }
 
-export default ItemCreateModal;
+export default ItemCreateDialog;

src/components/ItemEditModal.tsx renamed to src/components/ItemEditDialog.tsx

@@ -7,15 +7,15 @@ import useZodForm from 'lib/form';
 import { ItemEditSchema } from 'lib/schemas';
 import { toast } from 'react-toastify';
 import { trpc } from 'utils/trpc';
-import useModalStore from '../stores/ModalStore';
+import useDialogStore from '../stores/DialogStore';
 import { Dialog } from './Dialog';
 
 type Props = {
   itemId: string;
 };
 
-function ItemEditModal({ itemId }: Props) {
-  const { modal, clearModal } = useModalStore();
+function ItemEditDialog({ itemId }: Props) {
+  const { dialog, clearDialog } = useDialogStore();
 
   const { data: item, status } = trpc.item.byId.useQuery({ id: itemId });
 
@@ -46,7 +46,7 @@ function ItemEditModal({ itemId }: Props) {
   methods.reset(item);
 
   return (
-    <Dialog isOpen={modal === 'editItem'} onClose={clearModal}>
+    <Dialog isOpen={dialog === 'editItem'} onClose={clearDialog}>
       <h3 className="text-center text-lg font-bold">Add Item</h3>
       <hr />
       <form
@@ -224,7 +224,7 @@ function ItemEditModal({ itemId }: Props) {
             className="btn-error btn-sm btn"
             onClick={() => {
               methods.reset();
-              clearModal();
+              clearDialog();
             }}
           >
             Cancel
@@ -238,4 +238,4 @@ function ItemEditModal({ itemId }: Props) {
   );
 }
 
-export default ItemEditModal;
+export default ItemEditDialog;

src/components/ItemRow.tsx

@@ -15,7 +15,7 @@ import {
   FaNewspaper
 } from 'react-icons/fa';
 import { trpc } from 'utils/trpc';
-import useModalStore from '../stores/ModalStore';
+import useDialogStore from '../stores/DialogStore';
 
 type ItemHistoryProps = {
   item: Item;
@@ -148,7 +148,7 @@ type ItemRowProps = {
 };
 
 export default function ItemRow({ item, selected, setSelected }: ItemRowProps) {
-  const { editItemModal } = useModalStore();
+  const { editItemDialog } = useDialogStore();
 
   return (
     <tr>
@@ -215,7 +215,11 @@ export default function ItemRow({ item, selected, setSelected }: ItemRowProps) {
       </td>
       <td>{StatusIcons[item.status]}</td>
       <td>
-        <button type="button" onClick={editItemModal} className="btn-ghost btn">
+        <button
+          type="button"
+          onClick={editItemDialog}
+          className="btn-ghost btn"
+        >
           <FaEdit size={20} />
         </button>
       </td>

src/pages/subscribe.tsx renamed to src/components/SubscriptionDialog.tsx

@@ -1,25 +1,29 @@
 /* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
 import { Category } from '@prisma/client';
-import MainLayout from 'components/layout/MainLayout';
 import useZodForm from 'lib/form';
 import { useSession } from 'next-auth/react';
 import Image from 'next/image';
-import Link from 'next/link';
+import { FaTimes } from 'react-icons/fa';
 import { toast } from 'react-toastify';
 import { Categories } from 'types';
 import { trpc } from 'utils/trpc';
 import { z } from 'zod';
+import useDialogStore from '../stores/DialogStore';
+import { Dialog } from './Dialog';
+
+export default function SubscriptionDialog() {
+  const { dialog, clearDialog, manageSubscriptionsDialog } = useDialogStore();
+
+  const context = trpc.useContext();
 
-export default function SubscribePage() {
   const { data: subscriptions, status } = trpc.subscription.list.useQuery();
   const { data: session, status: sessionStatus } = useSession({
     required: true
   });
 
-  const context = trpc.useContext();
-
   const subscriptionCreate = trpc.subscription.create.useMutation({
     onSuccess: () => {
       toast('Subscription created!');
@@ -54,9 +58,21 @@ export default function SubscribePage() {
   if (status === 'loading') return <div>Loading...</div>;
 
   return (
-    <MainLayout>
-      <div className="flex flex-col gap-2">
-        <div className="text-2xl font-bold md:text-4xl">Item Subscription</div>
+    <Dialog isOpen={dialog === 'subscribe'} onClose={clearDialog}>
+      <div className="flex h-full flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <span className="text-2xl font-bold md:text-3xl">
+            Email Notification Sign-Up
+          </span>
+          <button
+            type="button"
+            onClick={clearDialog}
+            className="btn-ghost btn-circle btn"
+          >
+            <FaTimes className="h-6 w-6" />
+          </button>
+        </div>
+        <div className="divider my-0" />
         <div>
           <div className="flex items-center gap-2">
             <div className="relative h-20 w-20">
@@ -67,26 +83,25 @@ export default function SubscribePage() {
             </span>
           </div>
         </div>
-        <div className="prose-sm prose">
+        <div className="prose-neutral prose">
           <strong>
             <ol>
-              <li>Add your information below.</li>
+              <li>Select up to two product categories below</li>
               <li>
-                You&apos;ll receive an email at the end of each day filtered to
-                your selected category.
+                You&apos;ll receive a daily email listing newly lost items for
+                each category. Email notifications will run for seven
+                consecutive days.
               </li>
               <li>
-                You&apos;ll receive emails for seven days, and you can
-                unsubscribe at any time.
+                If you wish to renew notifications after this period, please
+                revisit this page.
               </li>
             </ol>
           </strong>
         </div>
-        <div>
-          <span className="text-lg font-bold">Add Item Information</span>
-        </div>
+        <div className="divider my-0" />
         <form
-          className="flex w-full flex-col gap-2 font-bold"
+          className="flex w-full flex-1 flex-col gap-2 font-bold"
           onSubmit={methods.handleSubmit(async (data) => {
             data.categories.forEach(async (category) => {
               await subscriptionCreate.mutateAsync({ category });
@@ -95,7 +110,7 @@ export default function SubscribePage() {
         >
           <div className="form-control gap-1">
             <label className="label">
-              <span className="label-text">Email Address</span>
+              <span className="label-text text-lg">Contact Information</span>
             </label>
             <input
               type="email"
@@ -106,7 +121,7 @@ export default function SubscribePage() {
           </div>
           <div className="form-control gap-1">
             <label className="label">
-              <span className="label-text">Item Category</span>
+              <span className="label-text text-lg">Select Item Category</span>
             </label>
             <div className="flex flex-wrap gap-2">
               {Object.values(Category).map((category) => (
@@ -130,26 +145,24 @@ export default function SubscribePage() {
               {methods.formState.errors.categories?.message}
             </span>
           </div>
-          <div className="form-control">
+          <div className="form-control mt-4 flex-1 justify-end gap-2">
             <button
               type="submit"
               className="btn-accent btn-sm btn"
               disabled={!methods.formState.isDirty}
             >
               Subscribe
             </button>
-          </div>
-          <div className="divider" />
-          <div className="form-control">
-            <Link
-              href="/subscriptions"
-              className="btn-outline btn-accent btn-ghost btn-sm btn"
+            <button
+              type="button"
+              onClick={manageSubscriptionsDialog}
+              className="btn-accent btn-ghost btn-outline btn-sm btn"
             >
               Manage Subscriptions
-            </Link>
+            </button>
           </div>
         </form>
       </div>
-    </MainLayout>
+    </Dialog>
   );
 }