fix(APP-3664): Update ProposalVotingStage component to support undefi…

…ned startDate / endDate props

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+-   Update `ProposalVotingStage` module component to support undefined `startDate` and `endDate` properties
 -   Update minor and patch Github dependencies
 -   Update minor and patch NPM dependencies
 -   Bump `elliptic` from 6.5.7 to 6.6.0

src/modules/components/proposal/proposalVoting/proposalVotingDetails/proposalVotingDetails.stories.tsx

@@ -45,4 +45,26 @@ export const Default: Story = {
     },
 };
 
+/**
+ * Default usage example of the ProposalVoting.Details component.
+ */
+export const WithoutStartOrEndTime: Story = {
+    args: {
+        settings: [
+            { term: 'Strategy', definition: '1 Address → 1 Vote' },
+            { term: 'Voting options', definition: 'Approve' },
+            { term: 'Minimum approval', definition: '3 of 5' },
+        ],
+    },
+    render: (args) => {
+        return (
+            <ProposalVotingStageContextProvider value={{ startDate: undefined, endDate: undefined }}>
+                <Tabs.Root defaultValue={ProposalVotingTab.DETAILS} className="w-full">
+                    <ProposalVoting.Details {...args} />
+                </Tabs.Root>
+            </ProposalVotingStageContextProvider>
+        );
+    },
+};
+
 export default meta;

src/modules/components/proposal/proposalVoting/proposalVotingDetails/proposalVotingDetails.test.tsx

@@ -51,6 +51,13 @@ describe('<ProposalVotingDetails /> component', () => {
         expect(screen.getByText('August 3, 2024 at 13:08')).toBeInTheDocument();
     });
 
+    it('renders fallback when start and end dates are not set', () => {
+        const startDate = undefined;
+        const endDate = undefined;
+        render(createTestComponent(undefined, { startDate, endDate }));
+        expect(screen.getAllByText('-')).toHaveLength(2);
+    });
+
     it('renders the governance settings passed as props', () => {
         const settings = [
             { term: 'Voting options', definition: 'Approve' },

src/modules/components/proposal/proposalVoting/proposalVotingDetails/proposalVotingDetails.tsx

@@ -28,8 +28,8 @@ export const ProposalVotingDetails: React.FC<IProposalVotingDetailsProps> = (pro
     const { copy } = useGukModulesContext();
     const { startDate, endDate } = useProposalVotingStageContext();
 
-    const formattedStartDate = formatterUtils.formatDate(startDate, { format: DateFormat.YEAR_MONTH_DAY_TIME });
-    const formattedEndDate = formatterUtils.formatDate(endDate, { format: DateFormat.YEAR_MONTH_DAY_TIME });
+    const formattedStartDate = formatterUtils.formatDate(startDate, { format: DateFormat.YEAR_MONTH_DAY_TIME }) ?? '-';
+    const formattedEndDate = formatterUtils.formatDate(endDate, { format: DateFormat.YEAR_MONTH_DAY_TIME }) ?? '-';
 
     const hasSettings = settings != null && settings.length > 0;
 

src/modules/components/proposal/proposalVoting/proposalVotingStage/proposalVotingStage.tsx

@@ -16,11 +16,11 @@ export interface IProposalVotingStageProps extends ComponentProps<'div'> {
     /**
      * Start date of the stage in timestamp or ISO format.
      */
-    startDate: number | string;
+    startDate?: number | string;
     /**
      * Start date of the stage in timestamp or ISO format.
      */
-    endDate: number | string;
+    endDate?: number | string;
     /**
      * Default tab displayed for the current stage. Defaults to details tab for pending and unreached states and to
      * breakdown tab for active, accepted and rejected states.

src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.test.tsx

@@ -40,6 +40,15 @@ describe('<ProposalVotingStageStatus /> component', () => {
         expect(screen.getByTestId('statePingAnimation')).toBeInTheDocument();
     });
 
+    it('handles undefiend end date when state is active', () => {
+        const status = ProposalVotingStatus.ACTIVE;
+        const endDate = undefined;
+        render(createTestComponent({ status, endDate }));
+        expect(screen.getByText('-')).toBeInTheDocument();
+        expect(screen.getByText('left to vote')).toBeInTheDocument();
+        expect(screen.getByTestId('statePingAnimation')).toBeInTheDocument();
+    });
+
     it('correctly renders the accepted state', () => {
         const status = ProposalVotingStatus.ACCEPTED;
         render(createTestComponent({ status }));

src/modules/components/proposal/proposalVoting/proposalVotingStageStatus/proposalVotingStageStatus.tsx

@@ -23,7 +23,7 @@ export interface IProposalVotingStageStatusProps extends ComponentProps<'div'> {
     /**
      * End date of the proposal in timestamp or ISO format.
      */
-    endDate: string | number;
+    endDate?: string | number;
     /**
      * Defines if the proposal is a multi-stage proposal.
      */
@@ -73,7 +73,9 @@ export const ProposalVotingStageStatus: React.FC<IProposalVotingStageStatusProps
             <div className="flex flex-row gap-0.5">
                 {status === ProposalVotingStatus.ACTIVE && (
                     <span className="text-primary-400">
-                        <Rerender>{() => formatterUtils.formatDate(endDate, { format: DateFormat.DURATION })}</Rerender>
+                        <Rerender>
+                            {() => formatterUtils.formatDate(endDate, { format: DateFormat.DURATION }) ?? '-'}
+                        </Rerender>
                     </span>
                 )}
                 {status !== ProposalVotingStatus.ACTIVE && <span className="text-neutral-800">{mainText}</span>}