From ad033614f9186e8e44bc471c3bf65c351bc828d1 Mon Sep 17 00:00:00 2001
From: Tania Gutierrez <riobuenodevelops@gmail.com>
Date: Thu, 14 Mar 2024 13:45:21 -0400
Subject: [PATCH] fix: Applied Composition pattern to ManagementCard

---
 app/components/management-card.tsx | 182 +++++++++++------------------
 app/routes/account.tsx             | 173 +++++++++++++++++++--------
 2 files changed, 191 insertions(+), 164 deletions(-)

diff --git a/app/components/management-card.tsx b/app/components/management-card.tsx
index 8cb69b5..2890e44 100644
--- a/app/components/management-card.tsx
+++ b/app/components/management-card.tsx
@@ -1,123 +1,73 @@
 import { cn } from "~/utils";
 import { Avatar } from "./ui/avatar";
 import { Button } from "./ui/button";
-import { AddIcon, EditIcon, FingerPrintIcon } from "./icons";
-import { Dialog, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
-import { DialogContent, Portal } from "@radix-ui/react-dialog";
+import { EditIcon, FingerPrintIcon } from "./icons";
 
-interface ManagementCardProps {
-    title?: string;
-    value?: string;
-    subtitle?: string;
-    isInviteCard?: boolean;
-    isPasswordCard?: boolean;
-    isAvatarCard?: boolean;
-    isDeleteCard?: boolean
-    buttonText?: string;
-    buttonOnClick?: () => void
-    dialogNode?: React.ReactNode
-}
-
-export const ManagementCard = ({
-    title,
-    isAvatarCard,
-    isInviteCard,
-    isPasswordCard,
-    isDeleteCard,
-    subtitle,
-    value,
-    buttonText,
-    buttonOnClick,
-    dialogNode
-}: ManagementCardProps) => {
-    const buttonVariant: string = isInviteCard ? "accent" : isDeleteCard ? "destructive" : "default";
-    return (
-        <div
-            className={cn(
-                "rounded-lg p-8 border w-full",
-                isInviteCard && "border-ring",
-                isAvatarCard && "flex justify-center items-center"
-            )}
-        >
-            {isAvatarCard ? (
-                <div className="relative w-fit h-fit">
-                    <Avatar className="border-2 border-ring h-28 w-28" />
-                    <Button
-                        variant="outline"
-                        className="h-10 w-10 rounded-full hover:bg-secondary-2 border-white absolute bottom-0 right-0 z-50"
-                    >
-                        <EditIcon />
-                    </Button>
-                </div>
-            ) : (
-                <>
-                    <div className="flex gap-x-2 items-center">
-                        <FingerPrintIcon className="text-ring" />
-                        <h4 className="font-bold">{title}</h4>
-                    </div>
-                    {subtitle && (
-                        <span className="text-primary-2 mt-4 mb-8 block text-sm">{subtitle}</span>
-                    )}
-                    {value && (
-                        <span className="text-ring font-bold mt-4 mb-8 block text-sm">{value}</span>
-                    )}
-                    {isPasswordCard && <PasswordDots className="mt-6 mb-8 text-primary-2" />}
-                    {!dialogNode ? (
-                        <Button
-                            onClick={buttonOnClick}
-                            className={`h-12 gap-x-2`}
-                            variant={buttonVariant}
-                        >
-                            <AddIcon />
-                            {buttonText}
-                        </Button>
-                    ): (
-                        <Dialog>
-                            <DialogTrigger>Open</DialogTrigger>
-                            <DialogContent>
-                                <DialogHeader>
-                                <DialogTitle>Are you absolutely sure?</DialogTitle>
-                                <DialogDescription>
-                                    This action cannot be undone. This will permanently delete your account
-                                    and remove your data from our servers.
-                                </DialogDescription>
-                                </DialogHeader>
-                            </DialogContent>
-                        </Dialog>
-
-                    )}
-                </>
-            )}
-        </div>
-    );
+const ManagementCardAvatar = ({ src }: { src?: string }) => {
+  return (
+    <div className="flex justify-center">
+      <div className="relative w-fit h-fit">
+        <Avatar className="border-2 border-ring h-28 w-28" />
+        <Button
+          variant="outline"
+          className="h-10 w-10 rounded-full hover:bg-secondary-2 border-white absolute bottom-0 right-0 z-50">
+          <EditIcon />
+        </Button>
+      </div>
+    </div>
+  );
 };
 
-const PasswordDots = ({ className }: { className?: string }) => {
-    return (
-        <svg
-            width="219"
-            height="7"
-            viewBox="0 0 219 7"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={className}
-        >
-            <circle cx="3.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="31.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="45.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="17.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="59.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="73.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="87.7771" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="101.777" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="131.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="117.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="145.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="159.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="173.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="187.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="201.5" cy="3.5" r="3.5" fill="currentColor" />
-            <circle cx="215.5" cy="3.5" r="3.5" fill="currentColor" />
-        </svg>
-    );
+const ManagementCardTitle = ({
+  children,
+  className,
+}: React.PropsWithChildren<{ className?: string }>) => {
+  return (
+    <div className={cn("flex gap-x-2 items-center font-semibold", className)}>
+      <FingerPrintIcon className="text-ring" />
+      {children}
+    </div>
+  );
 };
+
+const ManagementCardContent = ({
+  children,
+  className,
+}: React.PropsWithChildren<{ className?: string }>) => {
+  return (
+    <div className={cn("text-primary-2 mt-4 mb-8 block text-sm", className)}>
+      {children}
+    </div>
+  );
+};
+
+const ManagementCardFooter = ({
+  children,
+  className,
+}: React.PropsWithChildren<{ className?: string }>) => {
+  return <div className={className}>{children}</div>;
+};
+
+const ManagementCard = ({
+  children,
+  variant,
+}: React.PropsWithChildren<{ variant?: string }>) => {
+  return (
+    <div
+      className={cn(
+        "rounded-lg p-8 border w-full border-[--variant-color]",
+        !variant && "[--variant-color:theme(colors.border)]",
+        variant === "accent" && "[--variant-color:theme(colors.primary-1.DEFAULT)]",
+      )}>
+      {children}
+    </div>
+  );
+};
+
+export {
+  ManagementCard,
+  ManagementCardAvatar,
+  ManagementCardContent,
+  ManagementCardFooter,
+  ManagementCardTitle,
+};
\ No newline at end of file
diff --git a/app/routes/account.tsx b/app/routes/account.tsx
index edf89f8..127ed7e 100644
--- a/app/routes/account.tsx
+++ b/app/routes/account.tsx
@@ -4,8 +4,8 @@ import { useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
 import { GeneralLayout } from "~/components/general-layout";
-import { AddIcon, CloudIcon } from "~/components/icons";
-import { ManagementCard } from "~/components/management-card";
+import { AddIcon, CloudIcon, CrownIcon } from "~/components/icons";
+import { ManagementCard, ManagementCardAvatar, ManagementCardContent, ManagementCardFooter, ManagementCardTitle } from "~/components/management-card";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -47,58 +47,106 @@ export default function MyAccount() {
       />
       <h2 className="font-bold my-8">Account Management</h2>
       <div className="grid grid-cols-3 gap-x-8">
-        <ManagementCard isAvatarCard />
-        <ManagementCard
-          title="Email Address"
-          value="bsimpson@springfield.oh.gov.com"
-          buttonText="Change Email Address"
-          buttonOnClick={() => setModal({ ...openModal, changeEmail: true })}
-        />
-        <ManagementCard
-          title="Account Type"
-          value="Lite Premium Account"
-          buttonText="Upgrade to Premium"
-        />
+        <ManagementCard>
+          <ManagementCardAvatar />
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Email Address</ManagementCardTitle>
+          <ManagementCardContent className="text-ring font-semibold">
+          bsimpson@springfield.oh.gov.com
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changeEmail: true })}>
+              <AddIcon />
+              Change Email Address
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Account Type</ManagementCardTitle>
+          <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
+          Lite Premium Account
+          <CrownIcon />
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2">
+              <AddIcon />
+              Upgrade to Premium
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
       </div>
       <h2 className="font-bold my-8">Security</h2>
       <div className="grid grid-cols-3 gap-x-8">
-        <ManagementCard
-          isPasswordCard
-          title="Password"
-          buttonText="Change Password"
-          buttonOnClick={() => setModal({ ...openModal, changePassword: true })}
-        />
-        <ManagementCard
-          title="Two-Factor Authentication"
-          subtitle="Improve security by enabling 2FA."
-          buttonText="Enable Two-Factor Authorization"
-          buttonOnClick={() => setModal({ ...openModal, setupTwoFactor: true })}
-        />
-        <ManagementCard
-          title="Backup Key"
-          subtitle="Never share this code with anyone."
-          buttonText="Export Backup Key"
-        />
+        <ManagementCard>
+          <ManagementCardTitle>Password</ManagementCardTitle>
+          <ManagementCardContent>
+            <PasswordDots className="mt-6" />
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changePassword: true })}>
+              <AddIcon />
+              Change Password
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
+          <ManagementCardContent>
+          Improve security by enabling 2FA.
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
+              <AddIcon />
+              Enable Two-Factor Authorization
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Backup Key</ManagementCardTitle>
+          <ManagementCardContent>
+          Never share this code with anyone.
+          </ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2">
+              <AddIcon />
+              Export Backup Key
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
       </div>
       <h2 className="font-bold my-8">More</h2>
       <div className="grid grid-cols-3 gap-x-8">
-        <ManagementCard
-          isInviteCard
-          title="Invite a Friend"
-          subtitle="Get 1 GB per friend invited for free (max 5 GB)."
-          buttonText="Send Invitation"
-        />
-        <ManagementCard
-          title="Read our Resources"
-          subtitle="Navigate helpful articles or get assistance."
-          buttonText="Open Support Centre"
-        />
-        <ManagementCard
-          isDeleteCard
-          title="Delete Account"
-          subtitle="Once initiated, this action cannot be undone."
-          buttonText="Delete my Account"
-        />
+        <ManagementCard variant="accent">
+          <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
+          <ManagementCardContent>Get 1 GB per friend invited for free (max 5 GB).</ManagementCardContent>
+          <ManagementCardFooter>
+          <Button variant="accent" className="h-12 gap-x-2">
+              <AddIcon />
+              Send Invitation
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Read our Resources</ManagementCardTitle>
+          <ManagementCardContent>Navigate helpful articles or get assistance.</ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2">
+              <AddIcon />
+              Open Support Centre
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
+        <ManagementCard>
+          <ManagementCardTitle>Delete Account</ManagementCardTitle>
+          <ManagementCardContent>Once initiated, this action cannot be undone.</ManagementCardContent>
+          <ManagementCardFooter>
+            <Button className="h-12 gap-x-2" variant="destructive">
+              <AddIcon />
+              Delete my Account
+            </Button>
+          </ManagementCardFooter>
+        </ManagementCard>
       </div>
       {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
       <ChangeEmailForm
@@ -294,3 +342,32 @@ const SetupTwoFactorDialog = ({
     </Dialog>
   );
 };
+
+const PasswordDots = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      width="219"
+      height="7"
+      viewBox="0 0 219 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
+      <circle cx="3.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="31.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="45.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="17.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="59.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="73.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="87.7771" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="101.777" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="131.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="117.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="145.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="159.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="173.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="187.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="201.5" cy="3.5" r="3.5" fill="currentColor" />
+      <circle cx="215.5" cy="3.5" r="3.5" fill="currentColor" />
+    </svg>
+  );
+};
\ No newline at end of file