fix: added new announcement modal

deriv-com · Nov 16, 2024 · 67c72af · 67c72af
1 parent 4ff0a55
commit 67c72af
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 18 deletions.
diff --git a/packages/bot-web-ui/src/pages/dashboard/announcements/announcement-dialog.scss b/packages/bot-web-ui/src/pages/dashboard/announcements/announcement-dialog.scss
@@ -1,7 +1,7 @@
 .announcement-dialog {
     .dc-dialog {
         &__dialog {
-            max-width: none;
+            max-width: calc(440px - 4.8rem);
             max-height: none;
             padding: 0;
 
@@ -28,7 +28,7 @@
 
         &__content {
             padding: 2.4rem;
-            max-width: 44rem;
+            max-width: unset;
             margin-bottom: 0.5rem;
 
             .open-livechat {
@@ -122,7 +122,14 @@
         }
     }
 
+    &__unordered_list {
+        color: var(--text-prominent);
+        list-style: disc;
+        padding: 0 1.6rem;
+    }
+
     &__title {
+        margin-bottom: 0.8rem;
         &--accumulator_announce {
             text-align: center;
         }

diff --git a/packages/bot-web-ui/src/pages/dashboard/announcements/announcement-dialog.tsx b/packages/bot-web-ui/src/pages/dashboard/announcements/announcement-dialog.tsx
@@ -33,6 +33,8 @@ const AnnouncementDialog = ({
         content,
         numbered_content,
         plain_text,
+        unordered_list,
+        media,
     } = announcement;
     return (
         <Dialog
@@ -59,6 +61,13 @@ const AnnouncementDialog = ({
                     <IconAnnounceModal announce_id={id} />
                 </div>
                 <div className={`${base_classname}__body-main-content`}>
+                    {Array.isArray(media) && (
+                        <>
+                            {media.map((src, index) => (
+                                <img key={index} src={src} alt={src} />
+                            ))}
+                        </>
+                    )}
                     <Text as='p' size='xs' className={`${base_classname}__title--${id.toLowerCase()}`}>
                         {title}
                     </Text>
@@ -75,6 +84,17 @@ const AnnouncementDialog = ({
                                 </div>
                             );
                         })}
+                    {Array.isArray(unordered_list) && (
+                        <ul className={`${base_classname}__unordered_list`} key={0}>
+                            {unordered_list.map((content_item: TContentItem) => (
+                                <li key={content_item?.id}>
+                                    <Text as='p' line_height='l' size='xs'>
+                                        {content_item?.text}
+                                    </Text>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
                     {Array.isArray(numbered_content) && (
                         <ol className={`${base_classname}__body-item--numbered`}>
                             {numbered_content.map((content: TContentItem) => (

diff --git a/packages/bot-web-ui/src/pages/dashboard/announcements/announcements.tsx b/packages/bot-web-ui/src/pages/dashboard/announcements/announcements.tsx
@@ -47,12 +47,18 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
     const updateLocalStorage = (announce_id: string) => {
         let data: Record<string, boolean> | null = null;
         data = JSON.parse(localStorage.getItem('bot-announcements') ?? '{}');
-
         storeDataInLocalStorage({ ...data, [announce_id]: false });
         const temp_notifications = updateNotifications();
         setReadAnnouncementsMap(temp_notifications);
     };
 
+    const handlePrimaryAction = () => {
+        setActiveTab(1);
+        setFormVisibility(true);
+        updateLocalStorage('UPDATED_QUICK_STRATEGY_MODAL_ANNOUNCE');
+        rudderStackSendAnnouncementClickEvent({ announcement_name: localize('Updated: Quick Strategy Modal') });
+    };
+
     const modalButtonAction = (announce_id: string, announcement: TAnnouncement) => () => {
         setSelectedAnnouncement(announcement);
         setIsAnnounceDialogOpen(true);
@@ -61,13 +67,6 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
         updateLocalStorage(announce_id);
     };
 
-    const handlePrimaryAction = () => {
-        setActiveTab(1);
-        setFormVisibility(true);
-        updateLocalStorage('UPDATED_QUICK_STRATEGY_MODAL_ANNOUNCE');
-        rudderStackSendAnnouncementClickEvent({ announcement_name: localize('Updated: Quick Strategy Modal') });
-    };
-
     const handleRedirect = (url: string) => () => {
         if (history) {
             history.push(url);
@@ -84,16 +83,13 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
             if (data && Object.hasOwn(data, item.id)) {
                 is_not_read = data[item.id];
             }
-            const is_quick_strategy_announcement = item.id === 'UPDATED_QUICK_STRATEGY_MODAL_ANNOUNCE';
-            const buttonAction = is_quick_strategy_announcement
-                ? handlePrimaryAction
-                : performButtonAction(item, modalButtonAction, handleRedirect);
+
             tmp_notifications.push({
                 key: item.id,
                 icon: <item.icon announce={is_not_read} />,
                 title: <TitleAnnounce title={item.title} announce={is_not_read} />,
                 message: <MessageAnnounce message={item.message} date={item.date} announce={is_not_read} />,
-                buttonAction,
+                buttonAction: performButtonAction(item, modalButtonAction, handleRedirect),
                 actionText: item.actionText,
             });
             temp_localstorage_data[item.id] = is_not_read;
@@ -148,6 +144,9 @@ const Announcements = observer(({ is_mobile, is_tablet, handleTabChange }: TAnno
         if (selected_announcement?.should_toggle_modal) {
             toggleLoadModal();
         }
+        if (selected_announcement?.should_handle_primary_action) {
+            handlePrimaryAction();
+        }
         selected_announcement?.onConfirm?.();
         setSelectedAnnouncement(null);
     };

diff --git a/packages/bot-web-ui/src/pages/dashboard/announcements/config.tsx b/packages/bot-web-ui/src/pages/dashboard/announcements/config.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { OpenLiveChatLink } from '@deriv/components';
+import { OpenLiveChatLink, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { DBOT_TABS } from 'Constants/bot-contents';
 import { rudderStackSendOpenEvent } from '../../../analytics/rudderstack-common-events';
 import { handleOnConfirmAccumulator } from './utils/accumulator-helper-functions';
 import { IconAnnounce } from './announcement-components';
+import { getUrlBase } from '@deriv/shared';
 
 export type TContentItem = {
     id: number;
@@ -21,6 +22,8 @@ export type TAnnounce = {
     content?: TContentItem[];
     numbered_content?: TContentItem[];
     plain_text?: TContentItem[];
+    media?: Array<string>;
+    unordered_list?: TContentItem[];
 };
 
 export type TAnnouncement = {
@@ -32,9 +35,57 @@ export type TAnnouncement = {
     url_redirect?: string;
     should_not_be_cancel?: boolean;
     should_toggle_modal?: boolean;
+    should_handle_primary_action?: boolean;
 };
 
 export const ANNOUNCEMENTS: Record<string, TAnnouncement> = {
+    UPDATES_QUICK_STRATEGY_MODAL_ANNOUNCE: {
+        announcement: {
+            id: 'UPDATES_QUICK_STRATEGY_MODAL_ANNOUNCE',
+            main_title: localize('Updates: Quick strategy modal'),
+            confirm_button_text: localize('Explore now'),
+            base_classname: 'announcement-dialog',
+            media: [getUrlBase('/public/videos/dbot-new-look-QS-and-accumulators-addition.gif')],
+            title: [
+                <Text key={0} as='div' align='left' size='xs' color='prominent' className='announcement-dialog__title'>
+                    <Localize i18n_default_text="We've improved the Quick strategy (QS) modal for a better trading experience." />
+                </Text>,
+                <Localize key={1} i18n_default_text='<0>What’s new:</0>' components={[<div key={0} />]} />,
+            ],
+            unordered_list: [
+                {
+                    id: 0,
+                    text: (
+                        <Localize
+                            i18n_default_text='<0>A revamped design</0> for improved functionality.'
+                            components={[<strong key={0} />]}
+                        />
+                    ),
+                },
+                {
+                    id: 1,
+                    text: (
+                        <Localize
+                            i18n_default_text='<0>Support for multiple trade types </0> with a filter to find strategies by preference.'
+                            components={[<strong key={0} />]}
+                        />
+                    ),
+                },
+                {
+                    id: 2,
+                    text: (
+                        <Localize
+                            i18n_default_text='<0>Integration of Accumulators Options</0> for direct strategy application within the QS modal.'
+                            components={[<strong key={0} />]}
+                        />
+                    ),
+                },
+            ],
+        },
+        should_not_be_cancel: true,
+        should_handle_primary_action: true,
+    },
+
     MOVING_STRATEGIES_ANNOUNCE: {
         announcement: {
             id: 'MOVING_STRATEGIES_ANNOUNCE',
@@ -184,11 +235,12 @@ export const BUTTON_ACTION_TYPE = {
 
 export const BOT_ANNOUNCEMENTS_LIST: TAnnouncementItem[] = [
     {
-        id: 'UPDATED_QUICK_STRATEGY_MODAL_ANNOUNCE',
+        id: 'UPDATES_QUICK_STRATEGY_MODAL_ANNOUNCE',
         icon: IconAnnounce,
         title: localize('Updated: Quick Strategy Modal'),
-        message: localize("We've improved the Quick Strategy (QS) modal."),
+        message: localize("We've improved the Quick strategy (QS) modal for a better trading experience."),
         date: '18 November 2024 00:00 UTC',
+        buttonAction: BUTTON_ACTION_TYPE.MODAL_BUTTON_ACTION,
         actionText: '',
     },
     {

diff --git a/packages/core/src/public/videos/dbot-new-look-QS-and-accumulators-addition.gif b/packages/core/src/public/videos/dbot-new-look-QS-and-accumulators-addition.gif