Merge pull request #1 from docusign/fixes-for-dates

Updates for Navigator sample app

client/package.json

@@ -14,6 +14,7 @@
     "@types/react-dom": "^18.3.1",
     "antd": "^5.21.4",
     "axios": "^1.7.7",
+    "bootstrap": "^5.3.3",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "i18next": "^23.16.2",

client/src/App.tsx

@@ -12,6 +12,7 @@ import { PersistGate } from "redux-persist/integration/react";
 import { persistor, store } from "./store";
 import Loader from "./components/loader/loader";
 import { providerTheme } from "./constants/antTheme";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 function App() {
   return (

client/src/components/footer/styles.css

@@ -4,6 +4,8 @@
   width: 100%;
   display: flex;
   align-items: center;
+  background-color: white;
+  border-top: 1px solid black;
 }
 
 .footer-container {
@@ -23,8 +25,8 @@
   justify-content: center;
   text-align: center;
   margin-top: auto;
-  color: var(--grey-main);
-  font-size: 12px;
-  font-weight: 400;
+  color: black;
+  font-size: 14px;
+  font-weight: 500;
   line-height: 16px;
 }

client/src/components/header/index.tsx

@@ -83,7 +83,7 @@ const Header = ({ showLogoutBtn, className }: HeaderProps) => {
   return (
     <header className={`header ${className}`} role="banner">
       <nav className={"navBar"}>
-        <Link className={"logo"} to={ROUTE.AGREEMENTS}>
+        <Link className={"logo"} to={ROUTE.ROOT} onClick={handleLogoutAction}>
           <div className="logo-container">
             <img src={logo} alt="logo" />
             <p>{t(translationKeys.LOGO_TITLE)}</p>

client/src/components/header/styles.css

@@ -1,5 +1,12 @@
+a {
+  text-decoration: none !important;
+}
+
+.dropdown-toggle::after {
+  content: none !important;
+}
+
 .header {
-  background: linear-gradient(78deg, #141020, #3f225f, #3f225f, #141020);
   display: flex;
   width: 100%;
   justify-content: space-between;
@@ -10,6 +17,10 @@
   width: 100vw;
 }
 
+.header-image {
+  background: url("../../assets/img/background.png");
+}
+
 .logo-container {
   display: flex;
   align-items: center;

client/src/components/sideDescription/index.tsx

@@ -56,6 +56,15 @@ const SideDescription = () => {
             {t(translationKeys.SIDE_LINK_AGREEMENTS_RESPONSE)}
           </a>{" "}
           {t(translationKeys.SIDE_PARAGRAPH2_AFTER_LINK)}{" "}
+          <a
+            className="description-link"
+            href={LINKS.GET_AGREEMENT}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t(translationKeys.SIDE_LINK_GET_AGREEMENT)}
+          </a>{" "}
+          {t(translationKeys.SIDE_PARAGRAPH2_PART2)}{" "}
         </p>
         <p>
           {t(translationKeys.SIDE_PARAGRAPH3_BEFORE_LINK)}{" "}

client/src/constants/routes.ts

@@ -19,5 +19,6 @@ export const LINKS = {
   GITHUB: process.env.REACT_APP_LINKS_GITHUB ?? "GITHUB",
   ACC_BRANDS_CREATE: process.env.REACT_APP_LINKS_ACC_BRANDS_CREATE ?? "ACC_BRANDS_CREATE",
   ACC_BRANDS_LIST: process.env.REACT_APP_LINKS_ACC_BRANDS_LIST ?? "ACC_BRANDS_LIST",
+  GET_AGREEMENT: process.env.REACT_APP_LINKS_GET_AGREEMENT ?? "GET_AGREEMENT",
   USE_CASES: process.env.REACT_APP_LINKS_USE_CASES ?? "USE_CASES",
 };

client/src/lang/en.json

@@ -15,18 +15,25 @@
     "DOCUMENT_TYPE": "Document Type",
     "EXPIRATION_DATE": "Expiration Date",
     "ACTIONS": "",
+    "REFRESH_AGREEMENTS": "Refresh",
 
-    "LOGO_TITLE": "Navigator API Sample App",
-    "HEADER_HOME_NAV_TITLE": "Learn more about the Navigator API",
+    "LOGO_TITLE": "Navigator",
+    "HEADER_HOME_NAV_TITLE": "Navigator API home page",
     "HEADER_HOME_GITHUB_TITLE": "GitHub Source",
 
-    "HOME_HEADER_TITLE": "Welcome to the Navigator API Sample App",
-    "HOME_HEADER_DESCRIPTION": "Discover how the Navigator API (beta) can be used to access AI-extracted data from the Navigator smart agreement repository.",
-    "HOME_HEADER_BTN_TITLE": "Log in with your developer account",
+    "HOME_HEADER_TITLE": "Welcome to the <span class='title-main-word'>Navigator API</span> Sample App",
+    "HOME_HEADER_DESCRIPTION": "Self-service Business Operations Portal",
+    "HOME_HEADER_STEP_ONE": "If you are not a participant of the Navigator API closed beta, please select the option to log in with a test account",
+    "HOME_HEADER_NOTE": "<strong>Note</strong><br> This sample<br> app is written<br>in <strong>Node.JS</strong>",
+    "HOME_HEADER_BTN_TITLE": "Log in with your Docusign Account",
     "HOME_HEADER_CARD_TITLE": "Docusign: Build the future of agreements",
     "HOME_HEADER_CARD_SUBTITLE": "Powering the world's agreements with Docusign APIs",
     "HOME_HEADER_CARD_BTN_TITLE1": "Log in with a test account",
     "HOME_HEADER_CARD_BTN_TITLE2": "Log in with a test account",
+    "HOME_DOCUSIGN_HEADER": "Docusign: It’s time to agree better",
+    "HOME_DOCUSIGN_DESCRIPTION": "Docusign helps organizations connect and automate how they prepare, sign, act on and manage agreements.",
+    "HOME_DOCUSIGN_CREATE_ACCOUNT": "Create developer account",
+    "HOME_DOCUSIGN_LEARN_MORE": "Learn more",
 
     "SIDE_HEADER": "Behind the scenes",
     "SIDE_HEADER2": "Overview",
@@ -37,7 +44,9 @@
     "SIDE_PARAGRAPH1_AFTER_LINK": "endpoint is called to get a list of agreements available in the account.",
     "SIDE_LINK_AGREEMENTS_RESPONSE": "AgreementsResponse",
     "SIDE_PARAGRAPH2_BEFORE_LINK": "Users can filter the agreements by expiration date or agreement type. This is done by filtering the results based on values in the",
-    "SIDE_PARAGRAPH2_AFTER_LINK": "object in the response body from the Agreements: getAgreementsList endpoint.",
+    "SIDE_PARAGRAPH2_AFTER_LINK": "object in the response body from the Agreements: getAgreementsList endpoint. When a user selects an agreement, the",
+    "SIDE_LINK_GET_AGREEMENT": "Agreements: getAgreement",
+    "SIDE_PARAGRAPH2_PART2": " endpoint is called to display details about a specific agreement.",
     "SIDE_LINK_GET_AGREEMENTS_LIST": "Agreements: getAgreementsList",
     "SIDE_PARAGRAPH3_BEFORE_LINK": "Once agreement data has been obtained through the API, it can be displayed in a dashboard, as demonstrated in this example. Agreement data can also be consumed and acted on by other apps or services. See ",
     "SIDE_LINK_USE_CASES": "Navigator API use cases",
@@ -53,6 +62,7 @@
     "AGREEMENT_DETAILS_AGREEMENT_CONTRACT_VALUE":  "Contract value",
     "AGREEMENT_DETAILS_AGREEMENT_EFFECTIVE_DATE":  "Effective date",
     "AGREEMENT_DETAILS_AGREEMENT_EXPIRATION_DATE":  "Expiration date",
+    "AGREEMENT_DETAILS_AGREEMENT_REFRESH": "Refresh",
     "AGREEMENT_DETAILS_RENEWAL":  "Renewal",
     "AGREEMENT_DETAILS_RENEWAL_TYPE":  "Renewal type",
     "AGREEMENT_DETAILS_RENEWAL_NOTICE_PERIOD":  "Renewal notice period",

client/src/lang/translationKeys.ts

@@ -1,55 +1,65 @@
 export const translationKeys = {
-    BACK: 'BACK',
-    VIEW: 'VIEW',
-    LOGOUT: "LOGOUT",
-    SHOWING: "SHOWING",
-    ROWS_PER_PAGE: "ROWS_PER_PAGE",
-    OF: "OF",
-    LOAD_MORE: "LOAD_MORE",
-    CLEAR: 'CLEAR',
-    TODAY: 'TODAY',
+  BACK: "BACK",
+  VIEW: "VIEW",
+  LOGOUT: "LOGOUT",
+  SHOWING: "SHOWING",
+  ROWS_PER_PAGE: "ROWS_PER_PAGE",
+  OF: "OF",
+  LOAD_MORE: "LOAD_MORE",
+  CLEAR: "CLEAR",
+  TODAY: "TODAY",
 
     NAME: "NAME",
     PARTIES: "PARTIES",
     DOCUMENT_TYPE: "DOCUMENT_TYPE",
     EXPIRATION_DATE: "EXPIRATION_DATE",
     ACTIONS: "ACTIONS",
+    REFRESH_AGREEMENTS: "REFRESH_AGREEMENTS",
 
-    LOGO_TITLE: 'LOGO_TITLE',
-    HEADER_HOME_NAV_TITLE: 'HEADER_HOME_NAV_TITLE',
-    HEADER_HOME_GITHUB_TITLE: 'HEADER_HOME_GITHUB_TITLE',
 
-    HOME_HEADER_TITLE: 'HOME_HEADER_TITLE',
-    HOME_HEADER_DESCRIPTION: 'HOME_HEADER_DESCRIPTION',
-    HOME_HEADER_BTN_TITLE: 'HOME_HEADER_BTN_TITLE',
-    HOME_HEADER_CARD_TITLE: 'HOME_HEADER_CARD_TITLE',
-    HOME_HEADER_CARD_SUBTITLE: 'HOME_HEADER_CARD_SUBTITLE',
-    HOME_HEADER_CARD_BTN_TITLE1: 'HOME_HEADER_CARD_BTN_TITLE1',
-    HOME_HEADER_CARD_BTN_TITLE2: 'HOME_HEADER_CARD_BTN_TITLE2',
+  LOGO_TITLE: "LOGO_TITLE",
+  HEADER_HOME_NAV_TITLE: "HEADER_HOME_NAV_TITLE",
+  HEADER_HOME_GITHUB_TITLE: "HEADER_HOME_GITHUB_TITLE",
 
-    SIDE_HEADER: 'SIDE_HEADER',
-    SIDE_HEADER2: 'SIDE_HEADER2',
-    SIDE_HEADER2_LI1: 'SIDE_HEADER2_LI1',
-    SIDE_HEADER2_LI2: 'SIDE_HEADER2_LI2',
-    SIDE_HEADER2_LI3: 'SIDE_HEADER2_LI3',
-    SIDE_HEADER2_LI4: 'SIDE_HEADER2_LI4',
-    SIDE_HEADER3: 'SIDE_HEADER3',
-    SIDE_HEADER4: 'SIDE_HEADER4',
-    SIDE_PARAGRAPH1_BEFORE_LINK: 'SIDE_PARAGRAPH1_BEFORE_LINK',
-    SIDE_LINK_AGREEMENTS_RESPONSE: 'SIDE_LINK_AGREEMENTS_RESPONSE',
-    SIDE_PARAGRAPH1_AFTER_LINK: 'SIDE_PARAGRAPH1_AFTER_LINK',
-    SIDE_PARAGRAPH1: 'SIDE_PARAGRAPH1',
-    SIDE_PARAGRAPH2: 'SIDE_PARAGRAPH2',
-    SIDE_PARAGRAPH3_BEFORE_LINK: 'SIDE_PARAGRAPH3_BEFORE_LINK',
-    SIDE_PARAGRAPH3_AFTER_LINK: 'SIDE_PARAGRAPH3_AFTER_LINK',
-    SIDE_PARAGRAPH2_BEFORE_LINK: 'SIDE_PARAGRAPH2_BEFORE_LINK',
-    SIDE_LINK_GET_AGREEMENTS_LIST: 'SIDE_LINK_GET_AGREEMENTS_LIST',
-    SIDE_PARAGRAPH2_AFTER_LINK: 'SIDE_PARAGRAPH2_AFTER_LINK',
-    SIDE_LINK_USE_CASES: 'SIDE_LINK_USE_CASES',
+  HOME_HEADER_TITLE: "HOME_HEADER_TITLE",
+  HOME_HEADER_DESCRIPTION: "HOME_HEADER_DESCRIPTION",
+  HOME_HEADER_STEP_ONE: "HOME_HEADER_STEP_ONE",
+  HOME_HEADER_NOTE: "HOME_HEADER_NOTE",
+  HOME_HEADER_BTN_TITLE: "HOME_HEADER_BTN_TITLE",
+  HOME_HEADER_CARD_TITLE: "HOME_HEADER_CARD_TITLE",
+  HOME_HEADER_CARD_SUBTITLE: "HOME_HEADER_CARD_SUBTITLE",
+  HOME_HEADER_CARD_BTN_TITLE1: "HOME_HEADER_CARD_BTN_TITLE1",
+  HOME_HEADER_CARD_BTN_TITLE2: "HOME_HEADER_CARD_BTN_TITLE2",
+  HOME_DOCUSIGN_HEADER: "HOME_DOCUSIGN_HEADER",
+  HOME_DOCUSIGN_DESCRIPTION: "HOME_DOCUSIGN_DESCRIPTION",
+  HOME_DOCUSIGN_CREATE_ACCOUNT: "HOME_DOCUSIGN_CREATE_ACCOUNT",
+  HOME_DOCUSIGN_LEARN_MORE: "HOME_DOCUSIGN_LEARN_MORE",
 
-    AGREEMENT_HEADER: 'AGREEMENT_HEADER',
-    AGREEMENT_TEXT: 'AGREEMENT_TEXT',
+  SIDE_HEADER: "SIDE_HEADER",
+  SIDE_HEADER2: "SIDE_HEADER2",
+  SIDE_HEADER2_LI1: "SIDE_HEADER2_LI1",
+  SIDE_HEADER2_LI2: "SIDE_HEADER2_LI2",
+  SIDE_HEADER2_LI3: "SIDE_HEADER2_LI3",
+  SIDE_HEADER2_LI4: "SIDE_HEADER2_LI4",
+  SIDE_HEADER3: "SIDE_HEADER3",
+  SIDE_HEADER4: "SIDE_HEADER4",
+  SIDE_PARAGRAPH1_BEFORE_LINK: "SIDE_PARAGRAPH1_BEFORE_LINK",
+  SIDE_LINK_AGREEMENTS_RESPONSE: "SIDE_LINK_AGREEMENTS_RESPONSE",
+  SIDE_PARAGRAPH1_AFTER_LINK: "SIDE_PARAGRAPH1_AFTER_LINK",
+  SIDE_PARAGRAPH1: "SIDE_PARAGRAPH1",
+  SIDE_PARAGRAPH2: "SIDE_PARAGRAPH2",
+  SIDE_LINK_GET_AGREEMENT: "SIDE_LINK_GET_AGREEMENT",
+  SIDE_PARAGRAPH2_PART2: "SIDE_PARAGRAPH2_PART2",
+  SIDE_PARAGRAPH3_BEFORE_LINK: "SIDE_PARAGRAPH3_BEFORE_LINK",
+  SIDE_PARAGRAPH3_AFTER_LINK: "SIDE_PARAGRAPH3_AFTER_LINK",
+  SIDE_PARAGRAPH2_BEFORE_LINK: "SIDE_PARAGRAPH2_BEFORE_LINK",
+  SIDE_LINK_GET_AGREEMENTS_LIST: "SIDE_LINK_GET_AGREEMENTS_LIST",
+  SIDE_PARAGRAPH2_AFTER_LINK: "SIDE_PARAGRAPH2_AFTER_LINK",
+  SIDE_LINK_USE_CASES: "SIDE_LINK_USE_CASES",
 
+  AGREEMENT_HEADER: "AGREEMENT_HEADER",
+  AGREEMENT_TEXT: "AGREEMENT_TEXT",
+
     AGREEMENT_DETAILS_HEADER: 'AGREEMENT_DETAILS_HEADER',
     AGREEMENT_DETAILS_TEXT: 'AGREEMENT_DETAILS_TEXT',
     AGREEMENT_DETAILS_AGREEMENT: 'AGREEMENT_DETAILS_AGREEMENT',
@@ -58,6 +68,7 @@ export const translationKeys = {
     AGREEMENT_DETAILS_AGREEMENT_CONTRACT_VALUE: 'AGREEMENT_DETAILS_AGREEMENT_CONTRACT_VALUE',
     AGREEMENT_DETAILS_AGREEMENT_EFFECTIVE_DATE: 'AGREEMENT_DETAILS_AGREEMENT_EFFECTIVE_DATE',
     AGREEMENT_DETAILS_AGREEMENT_EXPIRATION_DATE: 'AGREEMENT_DETAILS_AGREEMENT_EXPIRATION_DATE',
+    AGREEMENT_DETAILS_AGREEMENT_REFRESH: 'AGREEMENT_DETAILS_AGREEMENT_REFRESH',
     AGREEMENT_DETAILS_RENEWAL: 'AGREEMENT_DETAILS_RENEWAL',
     AGREEMENT_DETAILS_RENEWAL_TYPE: 'AGREEMENT_DETAILS_RENEWAL_TYPE',
     AGREEMENT_DETAILS_RENEWAL_NOTICE_PERIOD: 'AGREEMENT_DETAILS_RENEWAL_NOTICE_PERIOD',
@@ -66,11 +77,12 @@ export const translationKeys = {
     AGREEMENT_DETAILS_RENEWAL_OWNER: 'AGREEMENT_DETAILS_RENEWAL_OWNER',
     AGREEMENT_DETAILS_RENEWAL_ADDITIONAL_INFO: 'AGREEMENT_DETAILS_RENEWAL_ADDITIONAL_INFO',
 
-    SEARCH_NO_DATA_TITLE: "SEARCH_NO_DATA_TITLE",
-    SEARCH_NO_DATA: "SEARCH_NO_DATA",
-    NO_DATA_TO_SHOWN_TITLE: "NO_DATA_TO_SHOWN_TITLE",
-    NO_DATA_TO_SHOWN: "NO_DATA_TO_SHOWN",
-    SEARCH_PLACEHOLDER: "SEARCH_PLACEHOLDER",
 
-    FOOTER_TITLE: 'FOOTER_TITLE'
-}
+  SEARCH_NO_DATA_TITLE: "SEARCH_NO_DATA_TITLE",
+  SEARCH_NO_DATA: "SEARCH_NO_DATA",
+  NO_DATA_TO_SHOWN_TITLE: "NO_DATA_TO_SHOWN_TITLE",
+  NO_DATA_TO_SHOWN: "NO_DATA_TO_SHOWN",
+  SEARCH_PLACEHOLDER: "SEARCH_PLACEHOLDER",
+
+  FOOTER_TITLE: "FOOTER_TITLE",
+};

client/src/pages/agreementDetails/agreementCard/index.tsx

@@ -5,37 +5,57 @@ import { useTranslation } from "react-i18next";
 import { translationKeys } from "../../../lang/translationKeys";
 import { mapDocumentType } from "../../agreements/helper";
 import "./styles.css";
+import { useAppDispatch } from "../../../store";
+import { fetchAgreementById } from "../../../store/state/agreements";
+import moment from "moment";
 
 type AgreementCardProps = {
   agreement: AgreementDocument;
 };
 
 const AgreementCard: React.FC<AgreementCardProps> = ({ agreement }) => {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
 
   const agreementType = mapDocumentType(agreement.type);
   const parties = agreement.parties
     ? agreement.parties.map((party) => party.name_in_agreement).join(", ")
     : "-";
   const effectiveDate = agreement.provisions?.effective_date
-    ? format(new Date(agreement.provisions.effective_date), "yyyy/MM/dd")
+    ? format(moment(agreement.provisions.effective_date).toDate(), "yyyy/MM/dd")
     : "-";
   const expirationDate = agreement.provisions?.expiration_date
-    ? format(new Date(agreement.provisions.expiration_date), "yyyy/MM/dd")
+    ? format(
+        moment(agreement.provisions.expiration_date).toDate(),
+        "yyyy/MM/dd"
+      )
     : "-";
 
   const renewalType = agreement?.provisions?.assignment_type ?? "-";
   const renewalNoticePeriod = agreement?.provisions?.execution_date ?? "-";
-  const renewalNoticeDate = agreement?.provisions?.execution_date ?? '-';
+  const renewalNoticeDate = agreement?.provisions?.execution_date ?? "-";
   const renewalTerm = agreement?.provisions?.execution_date ?? "1 year";
-  const renewalOwner = agreement?.parties?.[0]?.name_in_agreement ?? '-';
+  const renewalOwner = agreement?.parties?.[0]?.name_in_agreement ?? "-";
   const additionalInfo =
     "After the user completes signing the envelope in the embedded signing session, the envelope is redirected to the second signer based on the conditions described in Step 2.";
 
+  const handleRefresh = () => {
+    dispatch(fetchAgreementById(agreement.id) as any)
+  }
+
   return (
     <div className="agreement-details-card-container">
       <div className="agreement-details-card-main-section">
-        <h2>{t(translationKeys.AGREEMENT_DETAILS_AGREEMENT)}</h2>
+        <div className="agreement-details-card-main-section-header">
+          <div className="agreement-details-card-main-section-header-item">
+            <h2>{t(translationKeys.AGREEMENT_DETAILS_AGREEMENT)}</h2>
+          </div>
+          <div className="agreement-details-card-main-section-header-item">
+            <button className="tableButton" onClick={handleRefresh}>
+              {t(translationKeys.AGREEMENT_DETAILS_AGREEMENT_REFRESH)}
+            </button>
+          </div>
+        </div>
         <div className="agreement-details-card-type-section">
           <div className="agreement-details-item">
             <div className="agreement-details-label">