[offers][feat] Add toasts

apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx

@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
-import { useState } from 'react';
-import { setTimeout } from 'timers';
-import { CheckIcon, DocumentDuplicateIcon } from '@heroicons/react/20/solid';
-import { BookmarkSquareIcon, EyeIcon } from '@heroicons/react/24/outline';
-import { Button, TextInput } from '@tih/ui';
+// Import { useState } from 'react';
+// import { setTimeout } from 'timers';
+import { DocumentDuplicateIcon } from '@heroicons/react/20/solid';
+import { EyeIcon } from '@heroicons/react/24/outline';
+import { Button, TextInput, useToast } from '@tih/ui';
 
 import {
   copyProfileLink,
@@ -20,18 +20,18 @@ export default function OffersProfileSave({
   profileId,
   token,
 }: OfferProfileSaveProps) {
-  const [linkCopied, setLinkCopied] = useState(false);
-  const [isSaving, setSaving] = useState(false);
-  const [isSaved, setSaved] = useState(false);
+  const { showToast } = useToast();
+  // Const [isSaving, setSaving] = useState(false);
+  // const [isSaved, setSaved] = useState(false);
   const router = useRouter();
 
-  const saveProfile = () => {
-    setSaving(true);
-    setTimeout(() => {
-      setSaving(false);
-      setSaved(true);
-    }, 5);
-  };
+  // Const saveProfile = () => {
+  //   setSaving(true);
+  //   setTimeout(() => {
+  //     setSaving(false);
+  //     setSaved(true);
+  //   }, 5);
+  // };
 
   return (
     <div className="flex w-full justify-center">
@@ -44,7 +44,7 @@ export default function OffersProfileSave({
           To keep you offer profile strictly anonymous, only people who have the
           link below can edit it.
         </p>
-        <div className="mb-5 grid grid-cols-12 gap-4">
+        <div className="mb-20 grid grid-cols-12 gap-4">
           <div className="col-span-11">
             <TextInput
               disabled={true}
@@ -59,17 +59,15 @@ export default function OffersProfileSave({
             label="Copy"
             variant="primary"
             onClick={() => {
-              copyProfileLink(profileId, token), setLinkCopied(true);
+              copyProfileLink(profileId, token);
+              showToast({
+                title: `Profile edit link copied to clipboard!`,
+                variant: 'success',
+              });
             }}
           />
         </div>
-        <div className="mb-20">
-          {linkCopied && (
-            <p className="text-purple-700">Link copied to clipboard!</p>
-          )}
-        </div>
-
-        <p className="mb-5 text-gray-900">
+        {/* <p className="mb-5 text-gray-900">
           If you do not want to keep the edit link, you can opt to save this
           profile under your user account. It will still only be editable by
           you.
@@ -83,7 +81,7 @@ export default function OffersProfileSave({
             variant="primary"
             onClick={saveProfile}
           />
-        </div>
+        </div> */}
         <div>
           <Button
             icon={EyeIcon}

apps/portal/src/pages/offers/profile/[offerProfileId].tsx

@@ -11,6 +11,7 @@ import type {
   OfferDisplayData,
 } from '~/components/offers/types';
 
+import { useToast } from '~/../../../packages/ui/dist';
 import { convertMoneyToString } from '~/utils/offers/currency';
 import { getProfilePath } from '~/utils/offers/link';
 import { formatDate } from '~/utils/offers/time';
@@ -19,6 +20,7 @@ import { trpc } from '~/utils/trpc';
 import type { Profile, ProfileAnalysis, ProfileOffer } from '~/types/offers';
 
 export default function OfferProfile() {
+  const { showToast } = useToast();
   const ErrorPage = (
     <Error statusCode={404} title="Requested profile does not exist." />
   );
@@ -131,11 +133,18 @@ export default function OfferProfile() {
   const trpcContext = trpc.useContext();
   const deleteMutation = trpc.useMutation(['offers.profile.delete'], {
     onError: () => {
-      alert('Error deleting profile'); // TODO: replace with toast
+      showToast({
+        title: `Error deleting offers profile.`,
+        variant: 'failure',
+      });
     },
     onSuccess: () => {
       trpcContext.invalidateQueries(['offers.profile.listOne']);
       router.push('/offers');
+      showToast({
+        title: `Offers profile successfully deleted!`,
+        variant: 'success',
+      });
     },
   });
 

apps/portal/src/utils/offers/link.tsx

@@ -3,7 +3,6 @@ export function getProfileLink(profileId: string, token?: string) {
 }
 
 export function copyProfileLink(profileId: string, token?: string) {
-  // TODO: Add notification
   navigator.clipboard.writeText(getProfileLink(profileId, token));
 }