glific
diff --git a/‎package.json‎
Lines changed: 1 addition & 0 deletions b/‎package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/assets/images/icons/DownloadIcon.svg‎
Lines changed: 5 additions & 0 deletions b/‎src/assets/images/icons/DownloadIcon.svg‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎src/common/constants.ts‎
Lines changed: 2 additions & 0 deletions b/‎src/common/constants.ts‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎src/common/utils.ts‎
Lines changed: 9 additions & 0 deletions b/‎src/common/utils.ts‎
Lines changed: 9 additions & 0 deletions
diff --git a/‎src/components/UI/Form/Calendar/Calendar.test.tsx‎
Lines changed: 12 additions & 0 deletions b/‎src/components/UI/Form/Calendar/Calendar.test.tsx‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎src/components/UI/Form/Calendar/Calendar.tsx‎
Lines changed: 3 additions & 0 deletions b/‎src/components/UI/Form/Calendar/Calendar.tsx‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/components/UI/Form/TimePicker/TimePicker.test.tsx‎
Lines changed: 31 additions & 0 deletions b/‎src/components/UI/Form/TimePicker/TimePicker.test.tsx‎
Lines changed: 31 additions & 0 deletions
diff --git a/‎src/components/UI/Form/TimePicker/TimePicker.tsx‎
Lines changed: 3 additions & 0 deletions b/‎src/components/UI/Form/TimePicker/TimePicker.tsx‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx‎
Lines changed: 2 additions & 1 deletion b/‎src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.tsx‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎src/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css‎
Lines changed: 9 additions & 4 deletions b/‎src/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css‎
Lines changed: 9 additions & 4 deletions
@@ -58,6 +58,7 @@
     "react-media-recorder": "^1.7.1",
     "react-phone-input-2": "^2.15.1",
     "react-player": "^3.1.0",
+    "react-qr-code": "^2.0.18",
     "react-resize-detector": "^12.1.0",
     "react-router": "^7.6.3",
     "react-tiny-link": "^3.6.1",
 
@@ -251,3 +251,5 @@ export const getVariables = (contactOptions: any, messageOptions: any, variables
     ...variables,
   };
 };
+
+export const SHARE_FLOW_LINK = 'wa.me/';
@@ -303,3 +303,12 @@ export const handleSubscriptionError = (error: any, subscriptionType: string, re
     refetch(true);
   }
 };
+
+export const downloadCanvasAsPNG = (canvas: HTMLCanvasElement, fileName: string, notification: string) => {
+  const pngFile = canvas.toDataURL('image/png', 1.0);
+  const downloadLink = document.createElement('a');
+  downloadLink.download = fileName;
+  downloadLink.href = pngFile;
+  downloadLink.click();
+  setNotification(notification);
+};
@@ -109,4 +109,16 @@ describe('<Calendar />', () => {
       expect(screen.queryByTestId('sentinelStart')).not.toBeInTheDocument();
     });
   });
+
+  it('should open calendar when picker button is clicked and not disabled', async () => {
+    render(wrapper);
+    const input = screen.getByRole('button', { name: /Choose date/i });
+    if (input) {
+      fireEvent.click(input);
+      expect(screen.getByTestId('sentinelStart')).toBeInTheDocument();
+    }
+    await waitFor(() => {
+      expect(screen.queryByTestId('sentinelStart')).toBeInTheDocument();
+    });
+  });
 });
@@ -75,6 +75,9 @@ export const Calendar = ({
               error: hasError,
               onClick: () => !disabled && setOpen(true),
             },
+            openPickerButton: {
+              onClick: () => !disabled && setOpen(true),
+            },
           }}
           onClose={() => setOpen(false)}
           sx={CalendarStyles}
 
@@ -84,3 +84,34 @@ describe('Disable <TimePicker />', () => {
     expect(input).toHaveValue('');
   });
 });
+
+describe('OpenPickerButton functionality', () => {
+  it('should open picker when openPickerButton is clicked and not disabled', async () => {
+    const props = timePickerProps(false);
+    render(<TimePicker {...props} />);
+
+    const openPickerButton = screen.getByRole('button', { name: /choose time/i });
+    expect(openPickerButton).toBeInTheDocument();
+
+    fireEvent.click(openPickerButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+  });
+
+  it('should not open picker when openPickerButton is clicked and disabled', async () => {
+    const props = timePickerProps(true);
+    render(<TimePicker {...props} />);
+
+    const openPickerButton = screen.getByRole('button', { name: /choose time/i });
+    expect(openPickerButton).toBeInTheDocument();
+    expect(openPickerButton).toBeDisabled();
+
+    fireEvent.click(openPickerButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});
@@ -69,6 +69,9 @@ export const TimePicker = ({
               error: hasError,
               onClick: () => !disabled && setOpen(true),
             },
+            openPickerButton: {
+              onClick: () => !disabled && setOpen(true),
+            },
           }}
           sx={TimePickerStyles}
         />
 
@@ -1,6 +1,7 @@
 import { useContext, useState } from 'react';
 import { Drawer, Toolbar, Typography, IconButton } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import { SideDrawerContext, ProviderContext } from 'context/session';
 import { GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants';
 import GlificLogo from 'assets/images/logo/Logo.svg';
@@ -27,7 +28,7 @@ export const SideDrawer = () => {
             </Typography>
 
             <IconButton onClick={() => setDrawerOpen(false)} data-testid="drawer-button">
-              <MenuIcon />
+              <ArrowBackIosNewIcon fontSize="small" />
             </IconButton>
           </div>
         ) : (
 
@@ -23,13 +23,14 @@
 }
 
 .OpenItem {
-  margin: 0px 8px;
-  padding: 6px 16px;
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
 }
 
 .ClosedItem {
   width: unset !important;
-  margin: 0px 10px !important;
 }
 
 .SelectedText {
@@ -114,6 +115,10 @@
   animation: animation 1s ease-in-out;
 }
 
+.ListItemContent {
+  display: flex;
+}
+
 @keyframes animation {
   from {
     -webkit-transform: scale3d(1, 1, 1);
@@ -145,4 +150,4 @@
     -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
   }
-}
+}
Original file line number	Diff line number	Diff line change
`@@ -23,13 +23,14 @@`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.OpenItem {`
`26`		`- margin: 0px 8px;`
`27`		`- padding: 6px 16px;`
	`26`	`+ padding: 0.5rem 0.75rem;`
	`27`	`+ display: flex;`
	`28`	`+ width: 100%;`
	`29`	`+ justify-content: space-between;`
`28`	`30`	`}`
`29`	`31`
`30`	`32`	`.ClosedItem {`
`31`	`33`	`width: unset !important;`
`32`		`- margin: 0px 10px !important;`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`.SelectedText {`
`@@ -114,6 +115,10 @@`
`114`	`115`	`animation: animation 1s ease-in-out;`
`115`	`116`	`}`
`116`	`117`
	`118`	`+.ListItemContent {`
	`119`	`+ display: flex;`
	`120`	`+}`
	`121`	`+`
`117`	`122`	`@keyframes animation {`
`118`	`123`	`from {`
`119`	`124`	`-webkit-transform: scale3d(1, 1, 1);`
`@@ -145,4 +150,4 @@`
`145`	`150`	`-webkit-transform: scale3d(1, 1, 1);`
`146`	`151`	`transform: scale3d(1, 1, 1);`
`147`	`152`	`}`
`148`		`-}`
	`153`	`+}`