From 8705e71f57f81828a09102fe23fd4b01092380f0 Mon Sep 17 00:00:00 2001
From: Mehdi Hamri <143011364+pixelfact@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:03:11 +0100
Subject: [PATCH] Add billing profile selection sidepanel (#632)

---
 .../activity-section/activity-section.tsx     | 17 ++++
 .../_translations/my-dashboard.en.json        |  3 +
 app/my-dashboard/page.tsx                     | 23 ++---
 .../billing-profile/client/index.ts           |  2 +
 .../billing-profile/billing-profile.types.ts  |  9 ++
 .../_translations/features.translate.ts       |  4 +
 .../add-new-billing-profile-card.en.json      |  3 +
 .../add-new-billing-profile-card.tsx          | 29 ++++++
 .../billing-profile-card.en.json              |  4 +
 .../billing-profile-card.tsx                  | 68 ++++++++++++++
 .../billing-profile-card.types.ts             | 11 +++
 .../billing-profile-selection.en.json         |  1 +
 .../billing-profile-selection.hooks.ts        |  5 ++
 .../billing-profile-selection.tsx             | 88 +++++++++++++++++++
 .../billing-profile-selection.types.ts        |  1 +
 .../use-billing-profile-icons.tsx             | 17 ++++
 .../request-payment-flow.context.tsx          |  8 +-
 .../translations/common/common.en.json        |  8 +-
 18 files changed, 289 insertions(+), 12 deletions(-)
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.en.json
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.tsx
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.en.json
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/_translations/billing-profile-selection.en.json
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks.ts
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.types.ts
 create mode 100644 shared/panels/_flows/request-payment-flow/_panels/hooks/use-billing-profile-icons/use-billing-profile-icons.tsx

diff --git a/app/my-dashboard/_sections/activity-section/activity-section.tsx b/app/my-dashboard/_sections/activity-section/activity-section.tsx
index 0f680eb49..ea5302619 100644
--- a/app/my-dashboard/_sections/activity-section/activity-section.tsx
+++ b/app/my-dashboard/_sections/activity-section/activity-section.tsx
@@ -1,12 +1,15 @@
+import { ChevronRight } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { Contributions } from "@/app/my-dashboard/_features/contributions/contributions";
 import { RewardsTable } from "@/app/my-dashboard/_features/rewards-table/rewards-table";
 
+import { Button } from "@/design-system/atoms/button/variants/button-default";
 import { Typo } from "@/design-system/atoms/typo";
 import { Tabs } from "@/design-system/molecules/tabs/tabs";
 
 import { useSidePanelsContext } from "@/shared/features/side-panels/side-panels.context";
+import { useRequestPaymentFlow } from "@/shared/panels/_flows/request-payment-flow/request-payment-flow.context";
 import { Translate } from "@/shared/translation/components/translate/translate";
 
 enum ActivityTabs {
@@ -17,6 +20,7 @@ enum ActivityTabs {
 
 export function ActivitySection() {
   const { close } = useSidePanelsContext();
+  const { open: openRequestPaymentFlow } = useRequestPaymentFlow();
   const [toggleActivityView, setToggleActivityView] = useState<ActivityTabs>(ActivityTabs.CONTRIBUTIONS);
 
   const renderActivityView = useMemo(() => {
@@ -71,6 +75,19 @@ export function ActivitySection() {
             ]}
             selectedId={toggleActivityView}
           />
+          {/*TODO move this button to the right bloc and add rewards count*/}
+          <Button
+            variant={"primary"}
+            endIcon={{ component: ChevronRight }}
+            isTextButton
+            size={"md"}
+            translate={{ token: "myDashboard:detail.requestPayment.trigger" }}
+            onClick={() => openRequestPaymentFlow({})}
+            classNames={{
+              base: "max-w-full overflow-hidden",
+              label: "whitespace-nowrap text-ellipsis overflow-hidden",
+            }}
+          />
         </div>
       </div>
 
diff --git a/app/my-dashboard/_translations/my-dashboard.en.json b/app/my-dashboard/_translations/my-dashboard.en.json
index 1a238515d..28859efe2 100644
--- a/app/my-dashboard/_translations/my-dashboard.en.json
+++ b/app/my-dashboard/_translations/my-dashboard.en.json
@@ -47,5 +47,8 @@
       "cancelReward": "Cancel"
     },
     "rewardsCount": "Rewards"
+  },
+  "requestPayment": {
+    "trigger": "Request payment ({{count}})"
   }
 }
diff --git a/app/my-dashboard/page.tsx b/app/my-dashboard/page.tsx
index babeb688c..a7a5fd60b 100644
--- a/app/my-dashboard/page.tsx
+++ b/app/my-dashboard/page.tsx
@@ -9,6 +9,7 @@ import { withClientOnly } from "@/shared/components/client-only/client-only";
 import { ScrollView } from "@/shared/components/scroll-view/scroll-view";
 import { PageContent } from "@/shared/features/page-content/page-content";
 import { PageWrapper } from "@/shared/features/page-wrapper/page-wrapper";
+import { RequestPaymentFlowProvider } from "@/shared/panels/_flows/request-payment-flow/request-payment-flow.context";
 import { ContributionsSidepanel } from "@/shared/panels/contribution-sidepanel/contributions-sidepanel";
 import { ContributorSidepanel } from "@/shared/panels/contributor-sidepanel/contributor-sidepanel";
 import { PosthogCaptureOnMount } from "@/shared/tracking/posthog/posthog-capture-on-mount/posthog-capture-on-mount";
@@ -26,18 +27,20 @@ function MyDashboardPage() {
         ],
       }}
     >
-      <PosthogCaptureOnMount eventName={"my_dashboard_viewed"} />
+      <RequestPaymentFlowProvider>
+        <PosthogCaptureOnMount eventName={"my_dashboard_viewed"} />
 
-      <AnimatedColumn className="h-full">
-        <ScrollView className="flex flex-col gap-md">
-          <PageContent classNames={{ base: "tablet:overflow-hidden" }}>
-            <ActivitySection />
-          </PageContent>
-        </ScrollView>
-      </AnimatedColumn>
+        <AnimatedColumn className="h-full">
+          <ScrollView className="flex flex-col gap-md">
+            <PageContent classNames={{ base: "tablet:overflow-hidden" }}>
+              <ActivitySection />
+            </PageContent>
+          </ScrollView>
+        </AnimatedColumn>
 
-      <ContributorSidepanel />
-      <ContributionsSidepanel />
+        <ContributorSidepanel />
+        <ContributionsSidepanel />
+      </RequestPaymentFlowProvider>
     </PageWrapper>
   );
 }
diff --git a/core/application/react-query-adapter/billing-profile/client/index.ts b/core/application/react-query-adapter/billing-profile/client/index.ts
index ff6e203c4..7ea2e6ddc 100644
--- a/core/application/react-query-adapter/billing-profile/client/index.ts
+++ b/core/application/react-query-adapter/billing-profile/client/index.ts
@@ -2,3 +2,5 @@ export * from "./use-get-billing-profile-by-id";
 export * from "./use-get-billing-profile-payout-info-by-id";
 export * from "./use-upload-billing-profile-invoice-by-id";
 export * from "./use-accept-or-decline-billing-profile-mandate-by-id";
+export * from "./use-get-billing-profile-invoiceable-rewards";
+export * from "./use-get-my-billing-profiles";
diff --git a/core/domain/billing-profile/billing-profile.types.ts b/core/domain/billing-profile/billing-profile.types.ts
index d7773c712..3915bd4ca 100644
--- a/core/domain/billing-profile/billing-profile.types.ts
+++ b/core/domain/billing-profile/billing-profile.types.ts
@@ -8,3 +8,12 @@ export enum BillingProfileType {
   Individual = "INDIVIDUAL",
   SelfEmployed = "SELF_EMPLOYED",
 }
+
+export type BillingProfileTypeUnion = components["schemas"]["BillingProfileResponse"]["type"];
+
+export enum BillingProfileRole {
+  Admin = "ADMIN",
+  Member = "MEMBER",
+}
+
+export type BillingProfileRoleUnion = components["schemas"]["ShortBillingProfileResponse"]["role"];
diff --git a/shared/features/_translations/features.translate.ts b/shared/features/_translations/features.translate.ts
index 5b694e2d5..c10d0e9ef 100644
--- a/shared/features/_translations/features.translate.ts
+++ b/shared/features/_translations/features.translate.ts
@@ -13,11 +13,15 @@ import enPayoutStatus from "@/shared/features/payout-status/_translations/payout
 import { enPopoversTranslations } from "@/shared/features/popovers/_translations/popovers.translate";
 import enSocialLinkTranslate from "@/shared/features/social-link/social-translate/social-translate.en.json";
 import { enCellTranslation } from "@/shared/features/table/cell/_translations/cell.translate";
+import enAddNewBBillingProfileCard from "@/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.en.json";
+import enBillingProfileCard from "@/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.en.json";
 
 export const enFeaturesTranslations = {
   features: {
     amountSelector: enAmountSelector,
     invoices: enInvoices,
+    billingProfileCard: enBillingProfileCard,
+    addNewBillingProfileCard: enAddNewBBillingProfileCard,
     contributionPopover: enContributionPopover,
     notifications: enNotifications,
     githubMissingPermissionsAlert: enGithubMissingPermissionsAlert,
diff --git a/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.en.json b/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.en.json
new file mode 100644
index 000000000..02cfb1595
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.en.json
@@ -0,0 +1,3 @@
+{
+  "addNewBillingProfile": "Add a new billing profile"
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.tsx b/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.tsx
new file mode 100644
index 000000000..51772c56d
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/_components/add-new-billing-profile-card/add-new-billing-profile-card.tsx
@@ -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>
+  );
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.en.json b/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.en.json
new file mode 100644
index 000000000..e974dfd6a
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.en.json
@@ -0,0 +1,4 @@
+{
+  "requestableRewardCount_one": "{{count}} reward",
+  "requestableRewardCount_other": "{{count}} rewards"
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx b/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx
new file mode 100644
index 000000000..884be9c08
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.tsx
@@ -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>
+  );
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts b/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts
new file mode 100644
index 000000000..b4ea6c24d
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/_components/billing-profile-card/billing-profile-card.types.ts
@@ -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;
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/_translations/billing-profile-selection.en.json b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/_translations/billing-profile-selection.en.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/_translations/billing-profile-selection.en.json
@@ -0,0 +1 @@
+{}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks.ts b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks.ts
new file mode 100644
index 000000000..adcc7d93f
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks.ts
@@ -0,0 +1,5 @@
+import { useSinglePanelContext } from "@/shared/features/side-panels/side-panel/side-panel";
+
+export function useBillingProfileSelection() {
+  return useSinglePanelContext("billing-profile-selection");
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx
new file mode 100644
index 000000000..1a028e094
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.tsx
@@ -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>
+  );
+}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.types.ts b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.types.ts
new file mode 100644
index 000000000..f3ece6d3f
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.types.ts
@@ -0,0 +1 @@
+export interface BillingProfileSelectionProps {}
diff --git a/shared/panels/_flows/request-payment-flow/_panels/hooks/use-billing-profile-icons/use-billing-profile-icons.tsx b/shared/panels/_flows/request-payment-flow/_panels/hooks/use-billing-profile-icons/use-billing-profile-icons.tsx
new file mode 100644
index 000000000..a51b1b3e7
--- /dev/null
+++ b/shared/panels/_flows/request-payment-flow/_panels/hooks/use-billing-profile-icons/use-billing-profile-icons.tsx
@@ -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 };
+}
diff --git a/shared/panels/_flows/request-payment-flow/request-payment-flow.context.tsx b/shared/panels/_flows/request-payment-flow/request-payment-flow.context.tsx
index d0c3e8273..b46e753fe 100644
--- a/shared/panels/_flows/request-payment-flow/request-payment-flow.context.tsx
+++ b/shared/panels/_flows/request-payment-flow/request-payment-flow.context.tsx
@@ -2,6 +2,9 @@
 
 import { PropsWithChildren, createContext, useContext, useState } from "react";
 
+import { BillingProfileSelection } from "@/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection";
+import { useBillingProfileSelection } from "@/shared/panels/_flows/request-payment-flow/_panels/billing-profile-selection/billing-profile-selection.hooks";
+
 import { OpenProps, RequestPaymentFlowContextInterface, SelectedState } from "./request-payment-flow.types";
 
 export const RequestPaymentFlowContext = createContext<RequestPaymentFlowContextInterface>({
@@ -18,6 +21,8 @@ export function RequestPaymentFlowProvider({ children }: PropsWithChildren) {
     rewardIds: [],
   });
 
+  const { open: openBillingProfileSelection } = useBillingProfileSelection();
+
   function open(props?: OpenProps) {
     if (props?.initialState) {
       // open the right panel -> open the selected rewards panels
@@ -26,7 +31,7 @@ export function RequestPaymentFlowProvider({ children }: PropsWithChildren) {
         billingProfileId: props.initialState.selectedBillingProfileId,
       });
     } else {
-      // open the right panel -> open the billing profile selection
+      openBillingProfileSelection();
     }
   }
 
@@ -55,6 +60,7 @@ export function RequestPaymentFlowProvider({ children }: PropsWithChildren) {
       }}
     >
       {children}
+      <BillingProfileSelection />
     </RequestPaymentFlowContext.Provider>
   );
 }
diff --git a/shared/translation/translations/common/common.en.json b/shared/translation/translations/common/common.en.json
index 7282454be..dfd2c5139 100644
--- a/shared/translation/translations/common/common.en.json
+++ b/shared/translation/translations/common/common.en.json
@@ -86,5 +86,11 @@
     "reset": "Reset",
     "save": "Save"
   },
-  "description": "Description"
+  "description": "Description",
+  "billingProfileType": {
+    "INDIVIDUAL": "Individual",
+    "COMPANY": "Company",
+    "SELF_EMPLOYED": "Self employed",
+    "EMPLOYEE": "Employee"
+  }
 }