Change local docker configurations

Add UI fixes

Author: astleyz

.env.example

@@ -5,16 +5,14 @@ NODE_ENV=development # Set to "production" so server serves static assets
 ### Client Variables
 FRONTEND_DEV_HOST=http://localhost:3000
 FRONTEND_PROD_HOST=https://mymaestro.azurewebsites.net
-BACKEND_API=http://localhost:4000 # On production change port to http(80) or https with domain name. On dev - http:4000
-
 
 ### Server Variables
-BACKEND_HOST=http://localhost
-BACKEND_PORT=4000
-REDIRECT_URI=https://developers.docusign.com/platform/auth/consent # Where the user will be redirected after providing consent for JWT.
+BACKEND_DEV_HOST=http://localhost:4000/api
+BACKEND_PROD_HOST=https://mymaestro.azurewebsites.net/api
+JWT_REDIRECT_URI=https://developers.docusign.com/platform/auth/consent # Where the user will be redirected after providing consent for JWT.
 DS_OAUTH_SERVER=https://account-d.docusign.com # The Docusign authentication server, used for JWT.
 USER_ID={YOUR_USER_ID} # A GUID unique to each user's Docusign Account, located on the Apps and Keys page.
-DS_CLIENT_ID={YOUR_DS_JWT_CLIENT_ID} # A GUID unique to each application making Docusign API calls, located on the Apps and Keys page.
+DS_CLIENT_ID={YOUR_DS_CLIENT_ID} # An Integration key of your app. Located on the Apps and Keys page.
 DS_CLIENT_SECRET={YOUR_DS_CLIENT_SECRET}
 TARGET_ACCOUNT_ID=false # If you have your accound id set here, if not it's false by default.
 SESSION_SECRET={YOUR_SESSION_SECRET} # A unique string of your choice that is used to encrypt the session cookie.

README.md

@@ -1,26 +1,31 @@
 # Node.js and React: MyMaestro Sample Application
 
+![React + Vite](./client/src/assets/img/favicon.png) ![React + Vite](./client/src/assets/img/logo.svg)
+
 ## Introduction
 
-Welcome to the MyMaestro sample app! MyMaestro is written using Node.js (server) and React (client), and showcase the new Maestro API and how developers can use the API to create solutions for HR use cases, specifically use cases related to hiring
+Welcome to the MyMaestro sample app! MyMaestro is written using Node.js (server) and React (client), and showcase the new Maestro API. Docusign Maestro is a core platform service powering the Docusign. Easily build and deploy customized workflows that automate and accelerate your agreement processes without writing any code. Maestro connects all the tools and activities in your workflow so agreement processes are more efficient, more uniform, and have better visibility.
+
+With Docusign Maestro, you can combine workflow steps for Docusign apps like ID Verification, Web Forms, and eSignature, and third-party extensions to automate your agreement process end-to-end.
 
 ## Configuring your integration
 
 Before you can run this sample app on your local machine, you must first create a new integration with a Docusign developer account.
 
 ### Create a new integration
 
-1. If you don't already have one, create a [free developer account](https://go.docusign.com/sandbox/productshot/?elqCampaignId=16535).
-2. Log into your developer account, and navigate to [My Apps & Keys](https://admindemo.docusign.com/authenticate?goTo=apiIntegratorKey).
+1. If you don't already have one, create a [free developer account](https://go.docusign.com/sandbox/productshot/).
+2. Log into your developer account, and navigate to [My Apps & Keys](https://admindemo.docusign.com/apps-and-keys).
 3. Select **Add App and Integration Key**.
-4. Create a new integration that is configured to use **JSON Web Token (JWT) Grant**.
+4. Create a new integration that is configured to use **JSON Web Token (JWT) Grant** and **Authorization Code Grant (ACG)**.
    You will need the **integration key** itself and its **RSA key pair**. To use this application, you must add your application's **Redirect URI** to your integration key. See our video, [**Creating an Integration Key for JWT Authentication**](https://www.youtube.com/watch?v=GgDqa7-L0yo) for a demonstration of how to create an integration key (client ID) for a user application like this example.
    - Save the **integration key** and **private RSA key pair** somewhere safe as you will need these later.
-5. Add the following as redirect URIs for your app:
-   - http://localhost:3000
-   - http://localhost:3000/index
+5. Add redirect URIs for your app. There are several variables from the **.env** file that are used in the code and configured for redirect urls. Find variables below in the **.env** file and add the values of these variables in the Docusign account settings in the appropriate **Redirect URIs** section:
+   - FRONTEND_DEV_HOST (http://localhost:3000)
+   - FRONTEND_PROD_HOST (https://mymaestro.azurewebsites.net)
+   - JWT_REDIRECT_URI (https://developers.docusign.com/platform/auth/consent)
 
-## Installation guide
+Please pay attention that if you run the project in docker using the **docker-compose.local.yml** file, the variable FRONTEND_DEV_HOST there changes to the value **http://localhost:80**. Keep in mind that in this case this value will also have to be added to **Redirect URIs** section.
 
 ### Prerequisites
 
@@ -30,16 +35,6 @@ Before you can run this sample app on your local machine, you must first create
 - [VS Code](https://code.visualstudio.com/)
 - [Docker](https://docs.docker.com/get-docker/)
 
-### Docusign account settings
-
-The following must be enabled on your developer account in order to run all of the examples:
-
-- **SMS delivery**: Follow the instructions in the [Docusign eSignature Admin Guide](https://support.docusign.com/guides/ndse-admin-guide-sending-settings) under the **Fields and Properties** section. Make sure "Allow SMS delivery to recipients" is checked.
-- **Conditional routing**: Follow the instructions in the [Introduction to Conditional Routing](https://support.docusign.com/en/guides/ndse-user-guide-intro-to-conditional-routing) under the **Getting started with conditional routing** section. Make sure "Enable conditional routing" is checked.
-- **CertifiedDelivery recipients**: Follow the instructions on this [Docusign eSignature Admin Guide](https://support.docusign.com/guides/ndse-admin-guide-sending-settings) under the **Recipient Roles** section. Make sure "Enable needs to view role" is checked.
-- **Document visibility**: Follow the instructions on this [Docusign eSignature Admin Guide](https://support.docusign.com/guides/ndse-admin-guide-sending-settings) under the **Fields and Properties** section. Set your settings to "Must sign to view, unless sender," and make sure "Allow sender to specify document visibility" is checked.
-- **IDV**: Follow the instructions in the [Docusign Identify - ID Verification Q&A](https://support.docusign.com/en/articles/Tech-Readiness-DocuSign-Identify-ID-Verification#How_to_add_ID_Verification_on_an_account) to enable IDV on your account.
-
 ### Install dependencies locally
 
 1. Download or clone this repository to your workstation in a new folder named **sample-app-mymaestro-node**.
@@ -50,18 +45,23 @@ The following must be enabled on your developer account in order to run all of t
 6. Install dependencies: **`npm install`**
 7. Rename the **.env.example** file in the root directory to **.env**, and update the file with the integration key and other settings.
    > **Note:** Protect your integration key and client secret. You should make sure that the **.env** file will not be stored in your source code repository.
-8. Rename the **example_private.key** file to **private.key**, and paste your complete private RSA key into this file (including the header and footer of the key).
+8. Rename the **example_private.key** file to **private.key**, and paste your complete private RSA key into this file (including the header and footer of the key). Private RSA you should get when created Docusign account.
 
-## Running MyMaestro
+## Running MyMaestro in development mode
 
 1. Navigate to the application folder: **`cd sample-app-mymaestro-node`**
-2. Navigate to the server folder: **`cd server`**
-3. To start the server and client at the same time: **`npm run dev`**
-4. **Or,** to run the server and client separately:
-   - In one terminal, navigate to the server folder (**`cd server`**) and run **`npm run server`**
-   - In a separate terminal, navigate to the client folder (**`cd client`**) and run **`npm start`**
-5. Open a browser to **http://localhost:3000**
+2. To start the server and client at the same time: **`npm run concurrently:dev`**
+3. **Or,** to run the server and client separately:
+   - In one terminal, run **`npm run client:dev`**
+   - In a separate terminal, run **`npm run server:dev`**
+4. Open a browser to **http://localhost:3000**
+
+## Running MyMaestro in docker
 
-## License information
+You can run application in docker locally like in production mode
 
-This repository uses the MIT License. See the [LICENSE](./LICENSE) file for more information.
+1. Navigate to the application folder: **`cd sample-app-mymaestro-node`**
+2. Make sure that you configured **.env** file and saved **private.key** in the root of the folder. Make sure that you have docker installed.
+3. Run **`docker-compose -f docker-compose.local.yaml up -d`**
+4. In order to stop containers run **`docker compose -f docker-compose.local.yaml down`**
+5. Open a browser to **http://localhost:80**

client/Dockerfile

@@ -1,5 +1,9 @@
 FROM node:20.14 AS base
 
+# Declare build arguments from docker-compose.local.yaml
+ARG NODE_ENV
+ARG BACKEND_DEV_HOST
+
 RUN mkdir -p /home/vite/app
 RUN npm config set cache /tmp --global
 WORKDIR /home/vite
@@ -11,6 +15,10 @@ RUN npm ci
 
 COPY client ./
 
+# Set environment variables from build arguments
+ENV NODE_ENV=${NODE_ENV}
+ENV BACKEND_DEV_HOST=${BACKEND_DEV_HOST}
+
 RUN npm run build
 
 # Run stage

client/src/api/index.js

@@ -1,10 +1,11 @@
 import axios from 'axios';
 import { persistor, store } from '../store/store';
 
-const apiUrl = process.env.BACKEND_API;
+const isDev = process.env.NODE_ENV === 'development';
+const apiUrl = isDev ? process.env.BACKEND_DEV_HOST : process.env.BACKEND_PROD_HOST;
 
 const instance = axios.create({
-  baseURL: `${apiUrl}/api`,
+  baseURL: apiUrl,
   withCredentials: true,
 });
 
@@ -45,7 +46,7 @@ export const api = Object.freeze({
     // Login by Authorization Code Grant
     login: () => {
       // Avoid here XHR requests because we encounter problems with CORS for ACG Authorization
-      window.location.href = `${apiUrl}/api/auth/passport/login`;
+      window.location.href = `${apiUrl}/auth/passport/login`;
     },
     logout: async () => {
       await instance.get('/auth/passport/logout');
@@ -82,21 +83,28 @@ export const api = Object.freeze({
       }
     },
     publishWorkflow: async workflowId => {
-      const response = await instance.post('/workflows/publish', { workflowId });
+      try {
+        const response = await instance.post('/workflows/publish', { workflowId });
 
-      if (response.status === 210) {
-        try {
-          window.open(response.data, 'newTab', 'width=800,height=600');
-          await new Promise(r => setTimeout(r, 3000));
+        if (response.status === 210) {
+          try {
+            window.open(response.data, 'newTab', 'width=600,height=400');
+            await new Promise(r => setTimeout(r, 3000));
 
-          const published = await instance.post('/workflows/publish', { workflowId });
-          return published;
-        } catch (error) {
-          console.log(error);
+            const published = await instance.post('/workflows/publish', { workflowId });
+            return published;
+          } catch (error) {
+            console.log(error);
+          }
         }
-      }
 
-      return response;
+        return response;
+      } catch (error) {
+        if (error.response && error.response.status >= 400) {
+          return error.response;
+        }
+        throw error;
+      }
     },
     triggerWorkflow: async (workflowId, body) => {
       try {

client/src/assets/text.json

@@ -44,8 +44,7 @@
     }
   },
   "loader": {
-    "title": "Waiting for log in",
-    "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    "title": "Waiting for log in"
   },
   "behindTheScenes": {
     "titles": {
@@ -127,4 +126,4 @@
     "createsandbox": "https://go.docusign.com/o/sandbox/",
     "learnmore": "https://developers.docusign.com/"
   }
-}
+}

client/src/components/Dropdown/Dropdown.jsx

@@ -23,7 +23,10 @@ const Dropdown = ({ options }) => {
     const { status, data } = await api.workflows.createWorkflowDefinition(type);
 
     if (status === 400) {
-      dispatch({ type: 'SET_ERROR_POPUP', payload: { errorMessage: data.message, templateName: data.templateName } });
+      dispatch({
+        type: 'SET_ERROR_POPUP',
+        payload: { errorMessage: data.message, errorHeader: null, templateName: data.templateName },
+      });
       dispatch({ type: 'LOADED_POPUP' });
       return;
     }

client/src/components/Popups/WorkflowDefinitionCreation/WorkflowDefinitionCreation.jsx

@@ -9,6 +9,7 @@ import textContent from '../../../assets/text.json';
 const WorkflowDefinitionCreation = ({ message }) => {
   const dispatch = useDispatch();
   const errorMessage = useSelector(state => state.popup.errorMessage);
+  const errorHeader = useSelector(state => state.popup.errorHeader);
   const templateName = useSelector(state => state.popup.templateName);
   const lastCreatedWorkflow = useSelector(state => state.workflows.lastCreatedWorkflow);
 
@@ -24,8 +25,18 @@ const WorkflowDefinitionCreation = ({ message }) => {
 
     if (workflow?.status === 200) {
       dispatch({ type: 'PUBLISHED_LAST_WORKFLOW' });
+      dispatch({ type: 'LOADED_POPUP' });
+      return;
     }
 
+    dispatch({
+      type: 'SET_ERROR_POPUP',
+      payload: {
+        errorHeader: 'Publish workflow was unsuccessful',
+        errorMessage: 'The Docusign server returned an error during the workflow publishing. Try again later.',
+        templateName: null,
+      },
+    });
     dispatch({ type: 'LOADED_POPUP' });
   };
 
@@ -41,13 +52,15 @@ const WorkflowDefinitionCreation = ({ message }) => {
     );
   }
 
-  if (errorMessage && templateName) {
+  if (errorMessage) {
     return (
       <div className={styles.popupContainer}>
         <img src={imgError} alt="" />
-        <h2>{textContent.popups.workflowDefinitionCreated.error.title}</h2>
+        <h2>{errorHeader ?? textContent.popups.workflowDefinitionCreated.error.title}</h2>
         <p>{errorMessage}</p>
-        <button onClick={handleDownloadTemplate}>{textContent.popups.workflowDefinitionCreated.error.button}</button>
+        {templateName && (
+          <button onClick={handleDownloadTemplate}>{textContent.popups.workflowDefinitionCreated.error.button}</button>
+        )}
       </div>
     );
   }

client/src/components/Popups/WorkflowDefinitionCreation/WorkflowDefinitionCreation.module.css

@@ -1,33 +1,32 @@
 .popupContainer {
-    padding-top: 5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .popupContainer h2 {
-    height: 54px;
-    width: 450px;
-    line-height: 28px !important;
-    margin: 12px 0 -12px 0;
-    text-align: center;
-    font-size: 24px !important;
-    font-weight: 700 !important;
+  height: 54px;
+  width: 450px;
+  line-height: 28px !important;
+  margin: 12px 0 12px 0;
+  text-align: center;
+  font-size: 24px !important;
+  font-weight: 700 !important;
 }
 
 .popupContainer p {
-    text-align: center;
-    width: 80%;
-    font-size: 16px;
-    font-weight: 400;
+  text-align: center;
+  width: 80%;
+  font-size: 16px;
+  font-weight: 400;
 }
 
 .popupContainer button {
-    height: 40px;
-    width: 250px;
-    max-width: 100%;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 8px 16px;
-    margin: 2rem 0 0 0;
-}
+  height: 40px;
+  width: 250px;
+  max-width: 100%;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 8px 16px;
+  margin: 2rem 0 0 0;
+}

client/src/components/TriggerForm/TriggerForm.jsx

@@ -1,12 +1,15 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import styles from './TriggerForm.module.css';
 import WorkflowTriggerResultPopup from '../Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx';
 import { api } from '../../api';
 import textContent from '../../assets/text.json';
+import { ROUTE } from '../../constants.js';
 
 const TriggerForm = ({ workflowId }) => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const isOpened = useSelector(state => state.popup.isOpened);
   const workflows = useSelector(state => state.workflows.workflows);
   const [instanceName, setInstanceName] = useState('');
@@ -17,6 +20,11 @@ const TriggerForm = ({ workflowId }) => {
   const [isDataSending, setDataSending] = useState(false);
   const [workflowInstanceUrl, setWorkflowInstanceUrl] = useState('');
 
+  const handleCloseTriggerPopup = () => {
+    dispatch({ type: isOpened ? 'CLOSE_POPUP' : 'OPEN_POPUP' });
+    navigate(ROUTE.HOME);
+  };
+
   const handleSubmit = async event => {
     event.preventDefault();
 
@@ -92,7 +100,9 @@ const TriggerForm = ({ workflowId }) => {
           {textContent.buttons.continue}
         </button>
       </form>
-      {isOpened && <WorkflowTriggerResultPopup workflowInstanceUrl={workflowInstanceUrl} />}
+      {isOpened && (
+        <WorkflowTriggerResultPopup workflowInstanceUrl={workflowInstanceUrl} togglePopup={handleCloseTriggerPopup} />
+      )}
     </div>
   );
 };

client/src/components/WorkflowDescription/WorkflowDescription.jsx

@@ -6,7 +6,7 @@ const WorkflowDescription = ({ title, behindTheScenesComponent, backRoute }) =>
   return (
     <div className={styles.descriptionContainer}>
       <Link to={backRoute}>
-        <button className={styles.backButton}>&#129028; Back</button>
+        <button className={styles.backButton}>← Back</button>
       </Link>
       <h2>{title}</h2>
       <div className={`dropdown ${styles.dropDown}`}>