Styling changes from client

manifest.json

@@ -1,8 +1,8 @@
 {
-	"id": "com.transformd.ext-approval-example",
+	"id": "com.transformd.gvgsleaveos02",
 	"manifest_version": 1,
-	"version": "0.7.1",
-	"name": "Example",
+	"version": "0.9.27",
+	"name": "Leave Request Approval Task",
 	"icon": "icon.svg",
 	"environment": [
 		{
@@ -20,13 +20,6 @@
 			"type": "string",
 			"is_required": true
 		},
-		{
-			"key": "BRANCH",
-			"label": "Branch",
-			"description": "Form Branch",
-			"type": "string",
-			"is_required": true
-		},
 		{
 			"key": "CHANNEL",
 			"label": "Channel",
@@ -75,6 +68,13 @@
 			"description":"Any files uploaded to the fields listed here will appear in the uploads section. Use a comma-seperated list - fieldId1, fieldId2",
 			"type": "string",
 			"is_required": false
+		},
+		{
+			"key": "TASK_ACTION_BUTTONS",
+			"label": "Task action buttons:",
+			"description": "JSON array of objects containing data for the task action buttons. Keys; 'buttonFieldId', 'outcome', 'redirectPage'. Please note that redirectPage accepts both page ID's (to navigate to a from page) and full external URLs ",
+			"type": "string",
+			"is_required": false
 		}
 	],
 	"routes": {

package.json

@@ -1,24 +1,26 @@
 {
   "name": "@transformd-ltd/ext-form-apps",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.9.27",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "npx eslint ./src --ext .js,jsx",
-    "package": "./scripts/build-package.sh"
+    "package": "./scripts/build-package.sh",
+    "sass": "sass src/layout/gvgs/index.scss src/layout/gvgs/index.css"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.5.1",
     "@heroicons/react": "^1.0.6",
     "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.2",
-    "@transformd-ltd/sandbox-bridge": "^0.0.2",
     "@transformd-ltd/abn-lookup": "^0.2.4",
     "@transformd-ltd/electronic-verification": "^0.1.5",
     "@transformd-ltd/profile-lookup": "^0.1.13",
-    "@transformd-ltd/sdk": "1.5.3",
+    "@transformd-ltd/sandbox-bridge": "^0.0.2",
+    "@transformd-ltd/sdk": "1.8.2",
     "@transformd-ltd/theme-fermi": "^1.0.69",
     "@transformd-ltd/theme-transformd": "^0.1.16",
     "@transformd-ltd/user-lookup": "^0.1.3",
@@ -28,7 +30,8 @@
     "prop-types": "^15.8.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "sass": "^1.59.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -45,6 +48,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.14",
+    "postcss-nesting": "^11.2.1",
     "tailwindcss": "^3.1.3",
     "vite": "^2.9.9"
   }

src/API.js

@@ -34,7 +34,7 @@ const API = {
     retrieve: (id) => client.get(`submissions/${id}`),
   },
   downloadFile: {
-    retrieve: (submissionId, uploadId) => client.get(`submissions/${submissionId}/files/uploads/${uploadId}`, {responseType: 'blob'}),
+    retrieve: (submissionId, uploadId) => client.get(`submissions/${submissionId}/files/uploads/${uploadId}`, {responseType: "blob"}),
   }
 };
 

src/App.css

@@ -1,4 +1,5 @@
 @import "../node_modules/@transformd-ltd/theme-fermi/dist/formatic.css";
+@import "layout/gvgs/index.css";
 
 @tailwind base;
 @tailwind components;
@@ -67,4 +68,17 @@ button.btn {
   color: blue !important;
   justify-content: start !important;
   display: block;
+}
+.api-v3-outcome-message {
+  position: sticky;
+  bottom: 0;
+  padding: 10px;
+  border-radius: 5px 5px 0 0;
+  text-align: center;
+}
+.api-v3-outcome-message.error {
+  background-color: #ffcdcd;
+}
+.api-v3-outcome-message.success {
+  background-color: #c2f7b9;
 }

src/App.jsx

@@ -6,7 +6,7 @@ import {
   Route, useParams,
 } from "react-router-dom";
 import { view } from "@transformd-ltd/sandbox-bridge";
-import PropTypes from "prop-types"
+import PropTypes from "prop-types";
 import NotFound from "./components/NotFound";
 import "./App.css";
 import HomePage from "./pages/Homepage";
@@ -18,14 +18,14 @@ function TestPage() {
     <div>
       <pre>{JSON.stringify(params, null, 2)}</pre>
     </div>
-  )
+  );
 }
 
 function App(props) {
   const { history } = props;
 
   function handleComplete() {
-    view.callBridge('reload');
+    view.callBridge("reload");
   }
 
   return (

src/components/NotFound.jsx

@@ -1,6 +1,6 @@
 function NotFound() {
   return (
-    <div>404</div>
+    <div>Task is loading, please refresh this page.</div>
   );
 }
 

src/layout/gvgs/_custom.scss

@@ -0,0 +1,80 @@
+.formatic {
+  .formatic-rich-text-area__content {
+    .claim-container {
+      display: flex;
+      padding: 2rem;
+    }
+
+    .claim-section-container {
+      flex-grow: 1;
+      flex-basis: 0;
+      display: flex;
+      flex-direction: column;
+
+      &:not(:first-child):not(:last-child) {
+        padding: 0 3rem;
+      }
+    }
+
+    .claim-section__header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .claim-section__body {
+      margin-top: 32px;
+      padding: 0 16px;
+    }
+
+    .claim-arrow {
+      width: 100%;
+      height: 50px;
+      background: #282b48;
+      text-align: center;
+      color: #fff;
+      font-weight: bold;
+      font-size: 16px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+      }
+
+      &:after {
+        border-left: 25px solid #282b48;
+        border-right: 25px solid transparent;
+        border-top: 25px solid transparent;
+        border-bottom: 25px solid transparent;
+        right: -50px;
+        top: 0px;
+        width: 0;
+        height: 0;
+        display: block;
+      }
+
+      &:before {
+        border-left: 26px solid white;
+        border-right: 26px solid transparent;
+        border-top: 26px solid transparent;
+        border-bottom: 26px solid transparent;
+        left: 0px;
+        top: -1px;
+        width: 0;
+        height: 0;
+        display: block;
+      }
+    }
+  }
+}
+
+// hide the repeatable from the complete page
+.formatic .formatic-hidden {
+  display: none !important;
+}
+

src/layout/gvgs/fields/_abn-lookup.scss

@@ -0,0 +1,20 @@
+.formatic-abn-lookup__container {
+  .formatic-text__input {
+    @include formatic-text();
+  }
+
+  .formatic-search__button {
+    @include formatic-button();
+    min-width: 150px;
+    margin-right: 0;
+  }
+
+  .formatic-search-input {
+    position: relative;
+  }
+
+  .formatic-error-message {
+    position: absolute;
+    bottom: -25px;
+  }
+}

src/layout/gvgs/fields/_action-bar.scss

@@ -0,0 +1,77 @@
+.formatic-action-bar-root {
+  .formatic__float-right {
+    margin-left: auto;
+  }
+
+  .formatic-button {
+    &.formatic-action-bar-root__back {
+      font-size: 18px;
+      line-height: 24px;
+      height: 50px;
+      border-color: $primary-color;
+      color: $primary-color;
+
+      &::before {
+        content: none;
+      }
+
+      &:hover {
+        background-color: $primary-color;
+        border: none;
+        color: white;
+      }
+    }
+
+    &.formatic-action-bar-root__next,
+    &.formatic-action-bar-root__submit {
+      border: none;
+      box-shadow: none;
+      font-size: 18px;
+      line-height: 24px;
+      height: 50px;
+      color: white;
+      background-color: $secondary-color;
+
+      &::after {
+        content: none;
+      }
+
+      &:hover {
+        background-color: $primary-color;
+        border: 2px solid $primary-color;
+      }
+    }
+  }
+}
+
+.formatic-button-root-container {
+  .formatic-button-root-message {
+    background-color: white;
+    border: $border;
+    border-radius: 0px;
+    padding: 5px 10px;
+  }
+
+  .formatic-button {
+    &.formatic-button-root {
+      background-color: transparent;
+      font-size: 18px;
+      line-height: 24px;
+      height: 50px;
+      right: 150px;
+      border-color: $primary-color;
+      color: $primary-color;
+
+      &::before {
+        content: none;
+      }
+
+      &:hover {
+        background-color: $primary-color;
+        border: 2px solid $primary-color !important;
+        border: none;
+        color: white;
+      }
+    }
+  }
+}

src/layout/gvgs/fields/_action-button.scss

@@ -0,0 +1,27 @@
+.formatic-action-button {
+  .formatic-button {
+    @include formatic-button();
+  }
+}
+
+&.formatic-action-back {
+  .formatic-action-button {
+    .formatic-button {
+      font-size: 18px;
+      line-height: 24px;
+      height: 50px;
+      border-color: $primary-color;
+      color: $primary-color;
+
+      &::before {
+        content: none;
+      }
+
+      &:hover {
+        background-color: $primary-color;
+        border: none;
+        color: white;
+      }
+    }
+  }
+}

src/layout/gvgs/fields/_address-lookup.scss

@@ -0,0 +1,8 @@
+.formatic-address-lookup {
+  @import "./label";
+  @import "./autocomplete";
+
+  .formatic-address-lookup__back {
+    @include formatic-button();
+  }
+}

src/layout/gvgs/fields/_autocomplete.scss

@@ -0,0 +1,5 @@
+.formatic-auto-complete {
+  .formatic-address-lookup__auto-complete-input {
+    @include formatic-text();
+  }
+}

src/layout/gvgs/fields/_bsb.scss

@@ -0,0 +1,7 @@
+.formatic-bsb {
+  .formatic-bsb__auto-complete-input,
+  .formatic-bsb__bank,
+  .formatic-bsb__branch {
+    @include formatic-text();
+  }
+}