Flow builder UI

.github/workflows/cypress-testing.yml

@@ -65,6 +65,7 @@ jobs:
           git clone https://github.com/glific/glific.git
           echo done. go to dir.
           cd glific
+          git checkout whatsapp-forms-phase-2
           echo done. start dev.secret.exs config
           cd priv
           mkdir cert
@@ -96,6 +97,7 @@ jobs:
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
           cd cypress-testing
+          git checkout refactor/wa_form
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add [email protected]

package.json

@@ -17,6 +17,9 @@
     "@appsignal/plugin-window-events": "^1.0.26",
     "@appsignal/react": "^1.0.31",
     "@date-io/dayjs": "^3.2.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.14.0",

src/containers/TemplateOptions/TemplateOptions.tsx

@@ -27,7 +27,7 @@ import {
 import styles from './TemplateOptions.module.css';
 import { Fragment, useState } from 'react';
 import { useQuery } from '@apollo/client';
-import { LIST_WHATSAPP_FORMS } from 'graphql/queries/WhatsAppForm';
+import { GET_WHATSAPP_FORM_DEFINITIONS } from 'graphql/queries/WhatsAppForm';
 import { getOrganizationServices } from 'services/AuthService';
 
 export interface TemplateOptionsProps {
@@ -84,16 +84,16 @@ export const TemplateOptions = ({
     buttonOptions = BUTTON_OPTIONS.filter((option: any) => option.id !== WHATSAPP_FORM);
   }
 
-  useQuery(LIST_WHATSAPP_FORMS, {
+  useQuery(GET_WHATSAPP_FORM_DEFINITIONS, {
     variables: {
       filter: { status: 'PUBLISHED' },
     },
     onCompleted: (data) => {
       setForms(
         data.listWhatsappForms.map((form: any) => ({
-          label: form.name,
-          id: form.metaFlowId,
-          definition: form.revision?.definition,
+          label: form?.name,
+          id: form?.metaFlowId,
+          definition: form?.revision?.definition,
         }))
       );
     },
@@ -324,7 +324,6 @@ export const TemplateOptions = ({
               renderInput={(params) => <TextField {...params} label="Select Form " />}
               onChange={(event: any, newValue: any) => {
                 onInputChange(newValue.id, row, index, 'form_id');
-
                 try {
                   const definition = JSON.parse(newValue.definition);
                   const screenNames = definition.screens.map((screen: any) => screen.id);

src/containers/WhatsAppForms/Configure/Configure.module.css

@@ -0,0 +1,88 @@
+.Header {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  justify-content: space-between;
+  background: #f8faf5;
+}
+
+.Name {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.BackIcon {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.Header p {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.ConfigureContainer {
+  display: flex;
+  height: calc(100vh - 80px);
+  gap: 20px;
+  padding: 20px;
+  background-color: #fff;
+  position: relative;
+}
+
+.FlowBuilder {
+  flex: 1;
+  background-color: white;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+}
+
+.Preview {
+  width: 400px;
+  overflow: hidden;
+}
+
+.Toggle {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+
+
+.PublishedBadge {
+  background-color: #d1fae5;
+  color: #065f46;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-left: 1rem;
+}
+
+.SavingIndicator {
+  color: #119656;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  position: absolute;
+  right: 0;
+}
+
+@media (max-width: 1024px) {
+  .ConfigureContainer {
+    flex-direction: column;
+  }
+
+  .Preview {
+    width: 100%;
+    height: 600px;
+  }
+}