handle employe type

onlydustxyz · Nov 14, 2024 · cd35cba · cd35cba
1 parent 1516518
commit cd35cba
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 14 deletions.
diff --git a/core/domain/billing-profile/billing-profile.types.ts b/core/domain/billing-profile/billing-profile.types.ts
@@ -10,3 +10,10 @@ export enum BillingProfileType {
 }
 
 export type BillingProfileTypeUnion = components["schemas"]["BillingProfileResponse"]["type"];
+
+export enum BillingProfileRole {
+  Admin = "ADMIN",
+  Member = "MEMBER",
+}
+
+export type BillingProfileRoleUnion = components["schemas"]["ShortBillingProfileResponse"]["role"];
diff --git a/...ws/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx b/...ws/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx
@@ -1,8 +1,10 @@
-import { ChevronRight } from "lucide-react";
+import { Ban, ChevronRight, Users } from "lucide-react";
+
+import { BillingProfileRole } from "@/core/domain/billing-profile/billing-profile.types";
 
 import { Avatar } from "@/design-system/atoms/avatar";
 import { Badge } from "@/design-system/atoms/badge";
-import { Icon } from "@/design-system/atoms/icon";
+import { Icon, IconPort } from "@/design-system/atoms/icon";
 import { Paper } from "@/design-system/atoms/paper";
 import { Typo } from "@/design-system/atoms/typo";
 
@@ -12,36 +14,54 @@ import { UseBillingProfileIcons } from "@/shared/panels/_flows/request-payment-f
 
 export function BillingProfileCard({
   type,
+  role,
+  enabled,
   name,
   requestableRewardCount,
   isDisabled,
   onClick,
 }: BillingProfileCardProps) {
   const { billingProfilesIcons } = UseBillingProfileIcons();
+
+  function getIconProps(): IconPort {
+    if (!enabled) {
+      return { component: Ban };
+    }
+
+    if (role === BillingProfileRole.Member) {
+      return { component: Users };
+    }
+
+    return billingProfilesIcons[type];
+  }
   return (
     <Paper
       size={"lg"}
-      background={isDisabled ? "disabled" : "primary-alt"}
+      background={"primary-alt"}
       border="primary"
       classNames={{ base: cn("flex gap-md justify-between items-center", { "pointer-events-none": isDisabled }) }}
       onClick={onClick}
     >
       <div className="flex gap-lg">
-        <Avatar shape="squared" size="lg" iconProps={billingProfilesIcons[type]} />
+        <Avatar shape="squared" size="lg" iconProps={getIconProps()} />
         <div className="flex flex-col gap-xs">
           <Typo size={"sm"} weight="medium" color={"primary"}>
             {name}
           </Typo>
-          <Typo size={"xs"} color={"secondary"} translate={{ token: `common:billingProfileType.${type}` }} />
+          <Typo
+            size={"xs"}
+            color={"secondary"}
+            translate={{ token: `common:billingProfileType.${role === BillingProfileRole.Member ? "EMPLOYEE" : type}` }}
+          />
         </div>
       </div>
       <div className="flex items-center gap-lg">
         <Badge
           size="xs"
-          color={"brand"}
+          color={isDisabled ? "grey" : "brand"}
           translate={{ token: "features:billingProfileCard.requestableRewardCount", count: requestableRewardCount }}
         />
-        <Icon component={ChevronRight} />
+        {isDisabled ? <div className="w-4" /> : <Icon component={ChevronRight} />}
       </div>
     </Paper>
   );

diff --git a/...quest-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts b/...quest-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts
@@ -1,7 +1,9 @@
-import { BillingProfileTypeUnion } from "@/core/domain/billing-profile/billing-profile.types";
+import { BillingProfileRoleUnion, BillingProfileTypeUnion } from "@/core/domain/billing-profile/billing-profile.types";
 
 export interface BillingProfileCardProps {
   type: BillingProfileTypeUnion;
+  role: BillingProfileRoleUnion;
+  enabled: boolean;
   name: string;
   requestableRewardCount: number;
   isDisabled?: boolean;

diff --git a/...lows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx b/...lows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx
@@ -20,6 +20,11 @@ function Content() {
 
   const { billingProfiles } = data || {};
 
+  function handleClick(billingProfileId: string) {
+    selectBillingProfile(billingProfileId);
+    // TODO open reward sidePanel
+  }
+
   function handleAddNewBillingProfile() {
     window.open(marketplaceRouting("/settings/profile"), "_blank");
   }
@@ -44,6 +49,8 @@ function Content() {
             name={billingProfile.name}
             requestableRewardCount={billingProfile.requestableRewardCount}
             type={billingProfile.type}
+            role={billingProfile.role}
+            enabled={billingProfile.enabled}
             isDisabled={billingProfile.requestableRewardCount === 0}
             onClick={() => handleClick(billingProfile.id)}
           />
@@ -53,11 +60,6 @@ function Content() {
     );
   }, [billingProfiles, isLoading]);
 
-  function handleClick(billingProfileId: string) {
-    selectBillingProfile(billingProfileId);
-    // TODO open reward sidePanel
-  }
-
   return (
     <>
       <SidePanelHeader

diff --git a/shared/translation/translations/common/common.en.json b/shared/translation/translations/common/common.en.json
@@ -89,6 +89,7 @@
   "billingProfileType": {
     "INDIVIDUAL": "Individual",
     "COMPANY": "Company",
-    "SELF_EMPLOYED": "Self employed"
+    "SELF_EMPLOYED": "Self employed",
+    "EMPLOYEE": "Employee"
   }
 }