feat: new updates modal content

weni-ai · Sep 22, 2023 · afb5223 · afb5223
1 parent 3c4425c
commit afb5223
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 28 deletions.
diff --git a/src/components/flow/Flow.module.scss b/src/components/flow/Flow.module.scss
@@ -32,8 +32,18 @@
 
     .news_list {
       display: flex;
+      gap: $unnnic-spacing-xs;
       flex-direction: column;
       align-items: center;
+      text-align: center;
+      color: $unnnic-color-neutral-cloudy;
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-lg;
+      font-weight: $unnnic-font-weight-regular;
+      line-height: $unnnic-line-height-md + $unnnic-font-size-body-lg;
+    }
+
+    .footer {
       color: $unnnic-color-neutral-black;
       font-family: $unnnic-font-family-secondary;
       font-size: $unnnic-font-size-body-lg;

diff --git a/src/components/flow/Flow.tsx b/src/components/flow/Flow.tsx
@@ -57,11 +57,11 @@ import { PopTabType } from 'config/interfaces';
 import styles from './Flow.module.scss';
 import { applyVueInReact } from 'vuereact-combined';
 // @ts-ignore
-import { unnnicModalNext, unnnicButton } from '@weni/unnnic-system';
+import { unnnicModalNext, unnnicButtonNext } from '@weni/unnnic-system';
 import { WeniLoveIcon } from './WeniLoveIcon';
 import i18n from '../../config/i18n';
 
-const UnnnicButton = applyVueInReact(unnnicButton, {
+const UnnnicButton = applyVueInReact(unnnicButtonNext, {
   vue: {
     componentWrap: 'div',
     slotWrap: 'div',
@@ -429,44 +429,55 @@ export class Flow extends React.PureComponent<FlowStoreProps, {}> {
       <UnnnicModalNext className={styles.new_updates}>
         <div className={styles.content}>
           <WeniLoveIcon />
-          <span className={styles.title}>
-            {i18n.t('new_updates.title', 'Flow Editor has a new look!')}
-          </span>
-          <span className={styles.description}>
+          <span className={styles.title}>{i18n.t('new_updates.title', 'News in the area!')}</span>
+          {/* <span className={styles.description}>
             {i18n.t('new_updates.description', 'Whats new?')}
-          </span>
+          </span> */}
 
           <div className={styles.news_list}>
-            <span>•&nbsp; {i18n.t('new_updates.news.first', 'A beautiful new interface')}</span>
+            <span>•&nbsp; {i18n.t('new_updates.news.first', 'The editor is faster')}</span>
             <span>
-              •&nbsp; {i18n.t('new_updates.news.second', 'Nodes copy and paste functionality')}
+              •&nbsp;{' '}
+              {i18n.t(
+                'new_updates.news.second',
+                'Two new cards for processing responses in a 100% intelligent way'
+              )}
             </span>
-            <span>•&nbsp; {i18n.t('new_updates.news.third', 'Sidebar with tools (evolving)')}</span>
             <span>
               •&nbsp;{' '}
-              {i18n.t('new_updates.news.fourth', 'Possibility to create a new block anywhere')}
+              {i18n.t('new_updates.news.third', 'Copy and paste any type of card without worrying')}
+            </span>
+            <span>
+              •&nbsp;{' '}
+              {i18n.t('new_updates.news.fourth', 'Bugs fixed in the selection component on cards')}
             </span>
             <span>•&nbsp; {i18n.t('new_updates.news.fifth', 'WhatsApp simulator skin')}</span>
           </div>
+
+          <div className={styles.footer}>
+            <span>
+              {i18n.t('new_updates.footer', 'Feel free to send feedback on your experience')}
+            </span>
+          </div>
         </div>
 
         <div className={styles.buttons}>
           <UnnnicButton
             type="ghost"
-            text={i18n.t('new_updates.buttons.first', 'Ignore')}
+            text={i18n.t('new_updates.buttons.first', 'Close')}
             onClick={() => {
               ReactDOM.unmountComponentAtNode(newUpdatesModalEl);
             }}
           />
-          <UnnnicButton
+          {/* <UnnnicButton
             className={styles.primary}
             type="primary"
             text={i18n.t('new_updates.buttons.second', 'Show me everything')}
             onClick={() => {
               this.startGuiding();
               ReactDOM.unmountComponentAtNode(newUpdatesModalEl);
             }}
-          />
+          /> */}
         </div>
       </UnnnicModalNext>,
       newUpdatesModalEl

diff --git a/src/config/i18n/es/resource.json b/src/config/i18n/es/resource.json
@@ -594,19 +594,20 @@
     "single": "Bloque copiados con éxito"
   },
   "new_updates": {
-    "title": "¡El Editor de flujo tiene una nueva apariencia!",
+    "title": "¡Novedades en la zona!",
     "description": "¿Qué hay de nuevo?",
     "news": {
-      "first": "Una nueva y hermosa interfaz",
-      "second": "Funcionalidad de copiar y pegar bloques",
-      "third": "Barra lateral con herramientas (en evolución)",
-      "fourth": "Posibilidad de crear un nuevo bloque en cualquier lugar.",
+      "first": "El editor es más rápido",
+      "second": "Dos nuevas tarjetas para procesar respuestas de forma 100% inteligente",
+      "third": "Copia y pega cualquier tipo de tarjeta sin preocuparte",
+      "fourth": "Errores solucionados en el componente de selección de tarjetas.",
       "fifth": "Máscara de WhatsApp en el simulador."
     },
     "buttons": {
-      "first": "Ignorar",
+      "first": "Fechar",
       "second": "Muestrame todo"
-    }
+    },
+    "footer": "No dude en enviarnos sus comentarios sobre su experiencia"
   },
   "guiding": {
     "close_tour": "Cerrar guía",

diff --git a/src/config/i18n/pt-br/resource.json b/src/config/i18n/pt-br/resource.json
@@ -595,19 +595,20 @@
     "single": "Bloco copiado com sucesso"
   },
   "new_updates": {
-    "title": "O Editor de Fluxos tá de cara nova!",
+    "title": "Novidade na área!",
     "description": "O que tem de novo?",
     "news": {
-      "first": "Uma linda interface nova",
-      "second": "Funcionalidade de copiar e colar blocos",
-      "third": "Sidebar com ferramentas (evoluindo)",
-      "fourth": "Possiblidade de criar um novo bloco em qualquer lugar",
+      "first": "O editor está mais rápido",
+      "second": "Dois novos cards para tratamento das respostas de forma 100% inteligente",
+      "third": "Copie e cole qualquer tipo de card sem se preocupar",
+      "fourth": "Bugs corrigidos no componente de seleção nos cards",
       "fifth": "Skin do WhatsApp no simulador"
     },
     "buttons": {
-      "first": "Ignorar",
+      "first": "Fechar",
       "second": "Me mostra tudo"
-    }
+    },
+    "footer": "Fique à vontade para enviar feedbacks sobre sua experiência"
   },
   "guiding": {
     "close_tour": "Fechar tour",