-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add billing profile selection sidepanel (#632)
- Loading branch information
Showing
18 changed files
with
289 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...low/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.en.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "addNewBillingProfile": "Add a new billing profile" | ||
| } |
29 changes: 29 additions & 0 deletions
29
...nt-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { ChevronRight, CirclePlus } from "lucide-react"; | ||
|
|
||
| import { Avatar } from "@/design-system/atoms/avatar"; | ||
| import { Icon } from "@/design-system/atoms/icon"; | ||
| import { Paper } from "@/design-system/atoms/paper"; | ||
| import { Typo } from "@/design-system/atoms/typo"; | ||
|
|
||
| export function AddNewBillingProfileCard({ onClick }: { onClick: () => void }) { | ||
| return ( | ||
| <Paper | ||
| size={"lg"} | ||
| background={"primary-alt"} | ||
| border="primary" | ||
| classNames={{ base: "flex gap-md justify-between items-center" }} | ||
| onClick={onClick} | ||
| > | ||
| <div className="flex items-center gap-lg"> | ||
| <Avatar shape="squared" size="lg" iconProps={{ component: CirclePlus }} /> | ||
| <Typo | ||
| size={"sm"} | ||
| weight="medium" | ||
| color={"primary"} | ||
| translate={{ token: "features:addNewBillingProfileCard.addNewBillingProfile" }} | ||
| /> | ||
| </div> | ||
| <Icon component={ChevronRight} /> | ||
| </Paper> | ||
| ); | ||
| } |
4 changes: 4 additions & 0 deletions
4
...equest-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.en.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "requestableRewardCount_one": "{{count}} reward", | ||
| "requestableRewardCount_other": "{{count}} rewards" | ||
| } |
68 changes: 68 additions & 0 deletions
68
...ws/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| 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, IconPort } from "@/design-system/atoms/icon"; | ||
| import { Paper } from "@/design-system/atoms/paper"; | ||
| import { Typo } from "@/design-system/atoms/typo"; | ||
|
|
||
| import { cn } from "@/shared/helpers/cn"; | ||
| import { BillingProfileCardProps } from "@/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types"; | ||
| import { UseBillingProfileIcons } from "@/shared/panels/_flows/request-payment-flow/_panels/hooks/use-billing-profile-icons/use-billing-profile-icons"; | ||
|
|
||
| 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={"primary-alt"} | ||
| border="primary" | ||
| classNames={{ base: cn("flex gap-md justify-between items-center", { "pointer-events-none": isDisabled }) }} | ||
| onClick={isDisabled ? undefined : onClick} | ||
| > | ||
| <div className="flex gap-lg"> | ||
| <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.${role === BillingProfileRole.Member ? "EMPLOYEE" : type}` }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center gap-lg"> | ||
| <Badge | ||
| size="xs" | ||
| color={isDisabled ? "grey" : "brand"} | ||
| translate={{ token: "features:billingProfileCard.requestableRewardCount", count: requestableRewardCount }} | ||
| /> | ||
| {isDisabled ? <div className="w-4" /> : <Icon component={ChevronRight} />} | ||
| </div> | ||
| </Paper> | ||
| ); | ||
| } |
11 changes: 11 additions & 0 deletions
11
...quest-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| 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; | ||
| onClick?: () => void; | ||
| } |
1 change: 1 addition & 0 deletions
1
...nt-flow/_panels/billing-profile-selection/_translations/billing-profile-selection.en.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {} |
5 changes: 5 additions & 0 deletions
5
...request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { useSinglePanelContext } from "@/shared/features/side-panels/side-panel/side-panel"; | ||
|
|
||
| export function useBillingProfileSelection() { | ||
| return useSinglePanelContext("billing-profile-selection"); | ||
| } |
88 changes: 88 additions & 0 deletions
88
...lows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { useMemo } from "react"; | ||
|
|
||
| import { BillingProfileReactQueryAdapter } from "@/core/application/react-query-adapter/billing-profile"; | ||
|
|
||
| import { Skeleton } from "@/design-system/atoms/skeleton"; | ||
|
|
||
| import { SidePanelBody } from "@/shared/features/side-panels/side-panel-body/side-panel-body"; | ||
| import { SidePanelHeader } from "@/shared/features/side-panels/side-panel-header/side-panel-header"; | ||
| import { useSidePanel } from "@/shared/features/side-panels/side-panel/side-panel"; | ||
| import { marketplaceRouting } from "@/shared/helpers/marketplace-routing"; | ||
| import { AddNewBillingProfileCard } from "@/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card"; | ||
| import { BillingProfileCard } from "@/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card"; | ||
| import { useBillingProfileSelection } from "@/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks"; | ||
| import { useRequestPaymentFlow } from "@/shared/panels/_flows/request-payment-flow/request-payment-flow.context"; | ||
|
|
||
| function Content() { | ||
| const { selectBillingProfile } = useRequestPaymentFlow(); | ||
|
|
||
| const { data, isLoading } = BillingProfileReactQueryAdapter.client.useGetMyBillingProfiles({}); | ||
|
|
||
| const { billingProfiles } = data || {}; | ||
|
|
||
| function handleClick(billingProfileId: string) { | ||
| selectBillingProfile(billingProfileId); | ||
| // TODO open reward sidePanel | ||
| } | ||
|
|
||
| function handleAddNewBillingProfile() { | ||
| window.open(marketplaceRouting("/settings/profile"), "_blank"); | ||
| } | ||
|
|
||
| const renderBody = useMemo(() => { | ||
| if (isLoading) { | ||
| return ( | ||
| <div className={"grid gap-md"}> | ||
| <Skeleton classNames={{ base: "h-16" }} /> | ||
| <Skeleton classNames={{ base: "h-16" }} /> | ||
| <Skeleton classNames={{ base: "h-16" }} /> | ||
| <Skeleton classNames={{ base: "h-16" }} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {billingProfiles?.map(billingProfile => ( | ||
| <BillingProfileCard | ||
| key={billingProfile.id} | ||
| name={billingProfile.name} | ||
| requestableRewardCount={billingProfile.requestableRewardCount} | ||
| type={billingProfile.type} | ||
| role={billingProfile.role} | ||
| enabled={billingProfile.enabled} | ||
| isDisabled={billingProfile.requestableRewardCount === 0} | ||
| onClick={() => handleClick(billingProfile.id)} | ||
| /> | ||
| ))} | ||
| <AddNewBillingProfileCard onClick={handleAddNewBillingProfile} /> | ||
| </> | ||
| ); | ||
| }, [billingProfiles, isLoading]); | ||
|
|
||
| return ( | ||
| <> | ||
| <SidePanelHeader | ||
| title={{ | ||
| translate: { | ||
| token: "panels:singleContributionSelection.title", | ||
| }, | ||
| }} | ||
| canClose | ||
| /> | ||
|
|
||
| <SidePanelBody>{renderBody}</SidePanelBody> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export function BillingProfileSelection() { | ||
| const { name } = useBillingProfileSelection(); | ||
| const { Panel } = useSidePanel({ name }); | ||
|
|
||
| return ( | ||
| <Panel> | ||
| <Content /> | ||
| </Panel> | ||
| ); | ||
| } |
1 change: 1 addition & 0 deletions
1
...request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export interface BillingProfileSelectionProps {} |
17 changes: 17 additions & 0 deletions
17
...equest-payment-flow/_panels/hooks/use-billing-profile-icons/use-billing-profile-icons.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { BriefcaseBusiness, Crown, User } from "lucide-react"; | ||
| import { useMemo } from "react"; | ||
|
|
||
| import { BillingProfileType, BillingProfileTypeUnion } from "@/core/domain/billing-profile/billing-profile.types"; | ||
|
|
||
| import { IconPort } from "@/design-system/atoms/icon"; | ||
|
|
||
| export function UseBillingProfileIcons() { | ||
| const billingProfilesIcons: Record<BillingProfileTypeUnion, IconPort> = useMemo(() => { | ||
| return { | ||
| [BillingProfileType.Individual]: { component: User }, | ||
| [BillingProfileType.SelfEmployed]: { component: BriefcaseBusiness }, | ||
| [BillingProfileType.Company]: { component: Crown }, | ||
| }; | ||
| }, []); | ||
| return { billingProfilesIcons }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.