Merge branch 'hngprojects:dev' into feat/HNG-create-edit-product-deta…

…il-page-team-KIMIKO
hngprojects · Jul 30, 2024 · af33977 · af33977
2 parents 862e9f2 + 5f771a0
commit af33977
Show file tree

Hide file tree

Showing 25 changed files with 500 additions and 215 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx b/src/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard.tsx
@@ -1,6 +1,10 @@
+"use client";
+
 import { BellRing } from "lucide-react";
 import { FC } from "react";
 
+import { useNotificationStore } from "~/app/dashboard/(user-dashboard)/settings/notification/action/notification-store";
+import { notificationSettingsProperties } from "~/app/dashboard/(user-dashboard)/settings/notification/types/notification-settings.types";
 import CustomButton from "~/components/common/common-button/common-button";
 import {
   Card,
@@ -29,6 +33,12 @@ const UnreadNotificationCard: FC<CardProperties> = ({
   unreadCount = 0,
   ...properties
 }) => {
+  const { settings, updateSettings } = useNotificationStore();
+
+  const handleToggleSwitch = (name: keyof notificationSettingsProperties) => {
+    updateSettings({ [name]: !settings[name] });
+  };
+
   return (
     <Card
       data-testid="cardContainer"
@@ -44,7 +54,7 @@ const UnreadNotificationCard: FC<CardProperties> = ({
       </CardHeader>
       <CardContent className="grid gap-4 p-4 pt-0 sm:p-6 sm:pt-0">
         <div className="flex items-center space-x-4 rounded-md border p-2 sm:p-4">
-          <BellRing />
+          <BellRing size={16} />
           <div className="flex-1 space-y-1">
             <p className="text-sm font-medium leading-none">
               Push Notifications
@@ -53,7 +63,13 @@ const UnreadNotificationCard: FC<CardProperties> = ({
               Send notifications to device.
             </p>
           </div>
-          <Switch />
+          <Switch
+            checked={settings.mobile_push_notifications}
+            onCheckedChange={() =>
+              handleToggleSwitch("mobile_push_notifications")
+            }
+            name="mobile_push_notifications"
+          />
         </div>
         <div data-testid="previewBody">
           {notificationsPreview.map((preview, index) => (
@@ -86,6 +102,9 @@ const UnreadNotificationCard: FC<CardProperties> = ({
             variant="primary"
             isDisabled={unreadCount === 0}
             className="w-full bg-primary"
+            onClick={() => {
+              // MARK ALL NOTIFICATION LOGIC
+            }}
           >
             Mark all as read
           </CustomButton>

diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/[templateId]/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { EllipsisVertical, Eye, Redo, Undo } from "lucide-react";
 
 import { Button } from "~/components/common/common-button";

diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -45,6 +45,7 @@ const navlinks = [
 const UserNavbar = () => {
   const pathname = usePathname();
   const currentPath = pathname?.split("/")[2];
+
   return (
     <nav
       className="bg-white px-5 py-2.5 md:left-[220px] lg:left-[252px]"
@@ -68,7 +69,7 @@ const UserNavbar = () => {
             ))}
           </div>
         </div>
-        <div className="flex items-center justify-between gap-2 bg-[#FDFDFD]">
+        <div className="flex items-center justify-between gap-[2rem] bg-[#FDFDFD]">
           <div className="flex h-10 items-center justify-between gap-2 rounded-[6px] border border-border bg-white px-3 text-sm font-normal placeholder:text-sm">
             <SearchIcon
               data-testid="search"

diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -8,7 +8,7 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="grid grid-rows-[auto_1fr]">
+    <div className="grid w-full grid-rows-[auto_1fr]">
       <UserNavbar />
       <div className="relative mx-auto w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>

diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
@@ -17,7 +17,7 @@ const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 const ProjectLogo = ({ form, name }: Properties) => {
   const [isDragging, setIsDragging] = useState(false);
 
-  const projectLogo = form.getValues("media");
+  const productImage = form.getValues("media");
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -55,18 +55,19 @@ const ProjectLogo = ({ form, name }: Properties) => {
 
       {isDragging && (
         <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl">
-          <p className="text-xl text-white">Drop to upload</p>
+          <p className="text-xl">Drop to upload</p>
         </div>
       )}
 
-      {projectLogo.url && typeof projectLogo.url === "string" ? (
-        <div className="absolute inset-0 h-full w-full rounded-xl">
+      {productImage.url && typeof productImage.url === "string" ? (
+        <div className="inset-0 h-full w-full rounded-xl md:absolute">
           <div className="h-full w-full overflow-hidden rounded-xl">
             <BlurImage
-              src={projectLogo.url}
+              src={productImage.url}
               width={500}
               height={500}
-              alt="nft"
+              alt="product image"
+              quality={100}
               className={cn(
                 "size-full object-cover transition-all duration-300",
               )}

diff --git a/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx b/src/app/dashboard/(user-dashboard)/products/[productId]/product-details-component.tsx
@@ -132,14 +132,14 @@ const ProductDetailsComponent = ({
               href={"/dashboard/products"}
               className="rounded-sm border p-0.5 hover:bg-gray-200"
             >
-              <ArrowLeft />
+              <ArrowLeft className="size-4 min-[500px]:size-5" />
             </Link>
-            <span className="font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
+            <span className="text-sm font-medium text-neutral-dark-2 sm:text-[20px] md:font-semibold">
               {product.name}
             </span>
             <span
               className={cn(
-                "flex items-center gap-x-1 whitespace-nowrap rounded-full pl-2 text-sm leading-5 text-neutral-dark-1 md:gap-x-2",
+                "flex items-center gap-x-1 whitespace-nowrap rounded-full text-xs leading-5 text-neutral-dark-1 min-[500px]:pl-2 min-[500px]:text-sm md:gap-x-2",
               )}
             >
               <span
@@ -149,28 +149,31 @@ const ProductDetailsComponent = ({
                   "bg-[#EAB308]": product.status === "low_on_stock",
                 })}
               />
-              {product.status === "in_stock" && "In Stock"}
-              {product.status === "low_on_stock" && "Low on Stock"}
-              {product.status === "out_of_stock" && "Out of Stock"}
+              <span className="hidden min-[500px]:inline">
+                {" "}
+                {product.status === "in_stock" && "In Stock"}
+                {product.status === "low_on_stock" && "Low on Stock"}
+                {product.status === "out_of_stock" && "Out of Stock"}
+              </span>
             </span>
           </div>
-          <div className="flex items-center justify-end gap-x-4">
+          <div className="flex items-center justify-end gap-x-2 min-[500px]:gap-x-4">
             <Button
               disabled={isLoading}
               onClick={() => router.push("/dashboard/products")}
               type="button"
-              variant="outline"
+              variant="ghost"
               size="default"
-              className="rounded-md bg-transparent px-4 py-3 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+              className="h-7 rounded-sm border bg-transparent px-1.5 py-1 text-[10px] hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 min-[400px]:!h-8 min-[400px]:rounded-md min-[400px]:px-2 min-[400px]:py-2 min-[400px]:text-xs sm:h-10 sm:px-4 sm:py-3 sm:text-sm"
             >
               Discard
             </Button>
             <Button
               disabled={isLoading}
               type="submit"
-              variant="default"
+              variant="ghost"
               size="default"
-              className="rounded-md bg-primary px-4 py-3 font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
+              className="h-7 rounded-sm border bg-primary px-1.5 py-1 text-[10px] font-normal text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 min-[400px]:!h-8 min-[400px]:rounded-md min-[400px]:px-2 min-[400px]:py-2 min-[400px]:text-xs sm:h-10 sm:px-4 sm:py-3 sm:text-sm"
             >
               {isLoading ? (
                 <span className="flex items-center gap-x-2">
@@ -238,7 +241,7 @@ const ProductDetailsComponent = ({
                           {...field}
                         />
                         <div className="flex w-full items-center justify-between">
-                          <span className="whitespace-nowrap text-sm text-slate-500">
+                          <span className="whitespace-nowrap text-xs text-slate-500 sm:text-sm">
                             Maximum of {MAX_CHAR} characters
                           </span>
                           <WordCounter length={MAX_CHAR} word={field.value} />
@@ -250,8 +253,8 @@ const ProductDetailsComponent = ({
                 )}
               />
             </div>
-            <div className="flex flex-col gap-y-2 rounded-[6px] p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)] sm:gap-y-4 md:gap-y-6 xl:p-6">
-              <div className="flex flex-col border-b border-gray-200 pb-3">
+            <div className="flex flex-col gap-y-2 rounded-[6px] shadow-[0_0_10px_rgba(0,0,0,0.1)] max-sm:pb-4 sm:gap-y-4 sm:p-4 md:gap-y-6 xl:p-6">
+              <div className="flex flex-col border-b border-gray-200 pb-3 max-sm:p-4">
                 <h2 className="text-xl font-medium text-neutral-dark-2 md:text-2xl md:font-semibold">
                   Stock
                 </h2>
@@ -367,7 +370,7 @@ const ProductDetailsComponent = ({
                 type="button"
                 disabled={isLoading || disableAddStockButton}
                 onClick={handleAddNewStock}
-                className="w-fit bg-transparent"
+                className="w-fit bg-transparent max-sm:ml-4"
                 variant="outline"
               >
                 Add a variant
@@ -384,7 +387,7 @@ const ProductDetailsComponent = ({
                   Upload media for your product
                 </p>
               </div>
-              <div className="relative mt-2 flex h-fit min-h-[125px] w-full flex-col gap-y-2 rounded-xl md:min-h-[292px] md:rounded-2xl">
+              <div className="relative mt-2 flex h-fit w-full flex-col gap-y-2 rounded-xl md:min-h-[292px] md:rounded-2xl">
                 <div className="flex size-full items-center justify-center gap-x-1">
                   {" "}
                   <ProjectLogo form={new_product_form} name="media" />