feat(user-profile-overview-panel): add downloads menu item and wire u…

…p download panel navigation (#2113)

* feat(env-and-config): add web app download path environment variable

* feat(user-profile-saga): add and handle downloads stage and actions

* feat(downloads-panel): add downloads panel

* feat(user-profile-overview-panel): add downloads menu item and wire up download panel navigation

* refactor: rename panel header and menu item

src/components/messenger/user-profile/container.tsx

@@ -13,6 +13,7 @@ import {
   openEditProfile,
   openUserProfile,
   openSettings,
+  openDownloads,
   openAccountManagement,
 } from '../../../store/user-profile';
 import { logout } from '../../../store/authentication';
@@ -32,6 +33,7 @@ export interface Properties extends PublicProperties {
   openEditProfile: () => void;
   openRewardsDialog: () => void;
   openSettings: () => void;
+  openDownloads: () => void;
   openAccountManagement: () => void;
 }
 
@@ -59,6 +61,7 @@ export class Container extends React.Component<Properties> {
       openEditProfile,
       openRewardsDialog,
       openSettings,
+      openDownloads,
       openAccountManagement,
     };
   }
@@ -77,6 +80,7 @@ export class Container extends React.Component<Properties> {
         onBackToOverview={this.props.openUserProfile}
         onRewards={this.props.openRewardsDialog}
         onSettings={this.props.openSettings}
+        onDownloads={this.props.openDownloads}
         onManageAccounts={this.props.openAccountManagement}
       />
     );

src/components/messenger/user-profile/downloads-panel/index.tsx

@@ -51,7 +51,7 @@ export class DownloadsPanel extends React.Component<Properties> {
     return (
       <div {...cn()}>
         <div {...cn('header-container')}>
-          <PanelHeader title={'Downloads'} onBack={this.back} />
+          <PanelHeader title={'Download'} onBack={this.back} />
         </div>
 
         <div {...cn('body')}>

src/components/messenger/user-profile/index.test.tsx

@@ -6,6 +6,7 @@ import { OverviewPanel } from './overview-panel';
 import { EditProfileContainer } from '../../edit-profile/container';
 import { SettingsPanelContainer } from './settings-panel/container';
 import { AccountManagementContainer } from './account-management-panel/container';
+import { DownloadsPanel } from './downloads-panel';
 
 describe(UserProfile, () => {
   const subject = (props: Partial<Properties> = {}) => {
@@ -22,6 +23,7 @@ describe(UserProfile, () => {
       onBackToOverview: () => {},
       onRewards: () => {},
       onSettings: () => {},
+      onDownloads: () => {},
       onManageAccounts: () => {},
       ...props,
     };
@@ -47,6 +49,12 @@ describe(UserProfile, () => {
     expect(wrapper).toHaveElement(SettingsPanelContainer);
   });
 
+  it('renders Downloads Panel Container when stage is Downloads', () => {
+    const wrapper = subject({ stage: Stage.Downloads });
+
+    expect(wrapper).toHaveElement(DownloadsPanel);
+  });
+
   it('renders Wallets Panel Container when stage is Wallets', () => {
     const wrapper = subject({ stage: Stage.AccountManagement });
 

src/components/messenger/user-profile/index.tsx

@@ -5,6 +5,7 @@ import { Stage } from '../../../store/user-profile';
 import { EditProfileContainer } from '../../edit-profile/container';
 import { SettingsPanelContainer } from './settings-panel/container';
 import { AccountManagementContainer } from './account-management-panel/container';
+import { DownloadsPanel } from './downloads-panel';
 
 export interface Properties {
   stage: Stage;
@@ -19,6 +20,7 @@ export interface Properties {
   onBackToOverview: () => void;
   onRewards: () => void;
   onSettings: () => void;
+  onDownloads: () => void;
   onManageAccounts: () => void;
 }
 
@@ -37,12 +39,14 @@ export class UserProfile extends React.Component<Properties> {
             onOpenEditProfile={this.props.onEdit}
             onOpenRewards={this.props.onRewards}
             onOpenSettings={this.props.onSettings}
+            onOpenDownloads={this.props.onDownloads}
             onManageAccounts={this.props.onManageAccounts}
           />
         )}
 
         {this.props.stage === Stage.EditProfile && <EditProfileContainer onClose={this.props.onBackToOverview} />}
         {this.props.stage === Stage.Settings && <SettingsPanelContainer onClose={this.props.onBackToOverview} />}
+        {this.props.stage === Stage.Downloads && <DownloadsPanel onClose={this.props.onBackToOverview} />}
         {this.props.stage === Stage.AccountManagement && (
           <AccountManagementContainer onClose={this.props.onBackToOverview} />
         )}

src/components/messenger/user-profile/overview-panel/index.test.tsx

@@ -30,6 +30,7 @@ describe(OverviewPanel, () => {
       onOpenEditProfile: () => {},
       onOpenRewards: () => {},
       onOpenSettings: () => {},
+      onOpenDownloads: () => {},
       onManageAccounts: () => {},
 
       ...props,
@@ -96,6 +97,17 @@ describe(OverviewPanel, () => {
     expect(onOpenSettings).toHaveBeenCalled();
   });
 
+  it('publishes onOpenDownloads event', () => {
+    featureFlags.enableUserSettings = true;
+
+    const onOpenDownloads = jest.fn();
+    const wrapper = subject({ onOpenDownloads });
+
+    wrapper.find(Button).at(5).simulate('press');
+
+    expect(onOpenDownloads).toHaveBeenCalled();
+  });
+
   it('publishes openAccountManagement event', () => {
     const onOpenAccountManagement = jest.fn();
     const wrapper = subject({ onManageAccounts: onOpenAccountManagement });

src/components/messenger/user-profile/overview-panel/index.tsx

@@ -7,6 +7,7 @@ import { Image, Modal } from '@zero-tech/zui/components';
 import { Button, Variant as ButtonVariant, Color as ButtonColor } from '@zero-tech/zui/components/Button';
 import {
   IconCurrencyEthereum,
+  IconDownload2,
   IconLock1,
   IconLogOut3,
   IconPlus,
@@ -33,6 +34,7 @@ export interface Properties {
   onOpenEditProfile: () => void;
   onOpenRewards: () => void;
   onOpenSettings: () => void;
+  onOpenDownloads: () => void;
   onManageAccounts: () => void;
 }
 
@@ -85,6 +87,10 @@ export class OverviewPanel extends React.Component<Properties, State> {
     this.props.onOpenSettings();
   };
 
+  openDownloads = () => {
+    this.props.onOpenDownloads();
+  };
+
   onManageAccounts = () => {
     this.props.onManageAccounts();
   };
@@ -163,6 +169,16 @@ export class OverviewPanel extends React.Component<Properties, State> {
             Settings
           </Button>
         )}
+
+        <Button
+          {...cn('action-button')}
+          variant={ButtonVariant.Secondary}
+          onPress={this.openDownloads}
+          startEnhancer={<IconDownload2 size={20} />}
+          color={ButtonColor.Greyscale}
+        >
+          Download
+        </Button>
       </div>
     );
   }