Merge pull request #284 from AOT-Technologies/Feature/3643-Import-Form

FWF-3643:[Feature] - UI refurbish and Import initial changes.
AOT-Technologies · Sep 27, 2024 · 85db1dc · 85db1dc
2 parents 263952c + 7d1b584
commit 85db1dc
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 42 deletions.
diff --git a/forms-flow-components/src/components/SvgIcons/index.tsx b/forms-flow-components/src/components/SvgIcons/index.tsx
@@ -240,6 +240,51 @@ export const CloseIcon = ({
   </svg>
 );
 
+export const SuccessIcon = ({ color = baseColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill={color}
+  >
+    <path
+      d="M2.50001 7.99987C2.49986 7.03434 2.75388 6.08579 3.23655 5.24957C3.71921 4.41334 4.41351 3.71891 5.24964 3.23608C6.08577 2.75325 7.03427 2.49905 7.99979 2.49901C8.96532 2.49897 9.91384 2.75311 10.75 3.23587C10.8648 3.30113 11.0007 3.31834 11.1281 3.28374C11.2556 3.24915 11.3641 3.16556 11.4301 3.05121C11.4962 2.93687 11.5143 2.80106 11.4805 2.67341C11.4468 2.54576 11.3639 2.43664 11.25 2.36987C10.0109 1.65445 8.57029 1.36789 7.15169 1.55463C5.73309 1.74137 4.41575 2.39097 3.40396 3.40269C2.39218 4.41441 1.74249 5.73172 1.55566 7.1503C1.36883 8.56889 1.6553 10.0095 2.37064 11.2487C3.08597 12.4879 4.19021 13.4564 5.51208 14.0041C6.83396 14.5517 8.29961 14.6479 9.68173 14.2777C11.0638 13.9075 12.2852 13.0916 13.1564 11.9566C14.0275 10.8215 14.4998 9.4307 14.5 7.99987C14.5 7.86726 14.4473 7.74008 14.3536 7.64631C14.2598 7.55255 14.1326 7.49987 14 7.49987C13.8674 7.49987 13.7402 7.55255 13.6465 7.64631C13.5527 7.74008 13.5 7.86726 13.5 7.99987C13.5 9.45856 12.9205 10.8575 11.8891 11.889C10.8576 12.9204 9.4587 13.4999 8.00001 13.4999C6.54132 13.4999 5.14237 12.9204 4.11092 11.889C3.07947 10.8575 2.50001 9.45856 2.50001 7.99987Z"
+      fill="#253DF4"
+    />
+    <path
+      d="M15.354 3.35387C15.4005 3.30738 15.4374 3.25219 15.4625 3.19145C15.4877 3.13071 15.5006 3.06561 15.5006 2.99987C15.5006 2.93412 15.4877 2.86902 15.4625 2.80828C15.4374 2.74754 15.4005 2.69236 15.354 2.64587C15.3075 2.59938 15.2523 2.5625 15.1916 2.53734C15.1309 2.51219 15.0658 2.49924 15 2.49924C14.9343 2.49924 14.8692 2.51219 14.8084 2.53734C14.7477 2.5625 14.6925 2.59938 14.646 2.64587L8.00001 9.29287L5.35401 6.64587C5.30752 6.59938 5.25233 6.5625 5.19159 6.53734C5.13085 6.51219 5.06575 6.49924 5.00001 6.49924C4.93427 6.49924 4.86916 6.51219 4.80843 6.53734C4.74769 6.5625 4.6925 6.59938 4.64601 6.64587C4.59952 6.69236 4.56264 6.74754 4.53749 6.80828C4.51233 6.86902 4.49938 6.93412 4.49938 6.99987C4.49938 7.06561 4.51233 7.13071 4.53749 7.19145C4.56264 7.25219 4.59952 7.30738 4.64601 7.35387L7.64601 10.3539C7.69245 10.4004 7.74763 10.4374 7.80838 10.4626C7.86912 10.4878 7.93424 10.5008 8.00001 10.5008C8.06578 10.5008 8.1309 10.4878 8.19164 10.4626C8.25239 10.4374 8.30756 10.4004 8.35401 10.3539L15.354 3.35387Z"
+      fill="#253DF4"
+    />
+  </svg>
+);
+
+export const FailedIcon = ({ color = baseColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill={color}
+  >
+    <g clipPath="url(#clip0_4491_5670)">
+      <path
+        d="M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z"
+        fill="#FF4242"
+      />
+      <path
+        d="M4.646 4.646C4.69245 4.59944 4.74762 4.56249 4.80837 4.53729C4.86911 4.51208 4.93423 4.49911 5 4.49911C5.06577 4.49911 5.13089 4.51208 5.19163 4.53729C5.25238 4.56249 5.30755 4.59944 5.354 4.646L8 7.293L10.646 4.646C10.6925 4.59951 10.7477 4.56264 10.8084 4.53748C10.8692 4.51232 10.9343 4.49937 11 4.49937C11.0657 4.49937 11.1308 4.51232 11.1916 4.53748C11.2523 4.56264 11.3075 4.59951 11.354 4.646C11.4005 4.69249 11.4374 4.74768 11.4625 4.80842C11.4877 4.86916 11.5006 4.93426 11.5006 5C11.5006 5.06574 11.4877 5.13084 11.4625 5.19158C11.4374 5.25232 11.4005 5.30751 11.354 5.354L8.707 8L11.354 10.646C11.4005 10.6925 11.4374 10.7477 11.4625 10.8084C11.4877 10.8692 11.5006 10.9343 11.5006 11C11.5006 11.0657 11.4877 11.1308 11.4625 11.1916C11.4374 11.2523 11.4005 11.3075 11.354 11.354C11.3075 11.4005 11.2523 11.4374 11.1916 11.4625C11.1308 11.4877 11.0657 11.5006 11 11.5006C10.9343 11.5006 10.8692 11.4877 10.8084 11.4625C10.7477 11.4374 10.6925 11.4005 10.646 11.354L8 8.707L5.354 11.354C5.30751 11.4005 5.25232 11.4374 5.19158 11.4625C5.13084 11.4877 5.06574 11.5006 5 11.5006C4.93426 11.5006 4.86916 11.4877 4.80842 11.4625C4.74768 11.4374 4.69249 11.4005 4.646 11.354C4.59951 11.3075 4.56264 11.2523 4.53748 11.1916C4.51232 11.1308 4.49937 11.0657 4.49937 11C4.49937 10.9343 4.51232 10.8692 4.53748 10.8084C4.56264 10.7477 4.59951 10.6925 4.646 10.646L7.293 8L4.646 5.354C4.59944 5.30755 4.56249 5.25238 4.53729 5.19163C4.51208 5.13089 4.49911 5.06577 4.49911 5C4.49911 4.93423 4.51208 4.86911 4.53729 4.80837C4.56249 4.74762 4.59944 4.69245 4.646 4.646Z"
+        fill="#FF4242"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4491_5670">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
 export const ExportIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -276,6 +321,56 @@ export const ImportIcon = ({ color = baseColor, ...props }) => (
   </svg>
 );
 
+export const IButton = ({ color = grayColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+    fill={color}
+  >
+    <g clip-path="url(#clip0_4691_5740)">
+      <path
+        d="M6 11.75C4.60761 11.75 3.27226 11.1969 2.28769 10.2123C1.30312 9.22774 0.75 7.89239 0.75 6.5C0.75 5.10761 1.30312 3.77226 2.28769 2.78769C3.27226 1.80312 4.60761 1.25 6 1.25C7.39239 1.25 8.72774 1.80312 9.71231 2.78769C10.6969 3.77226 11.25 5.10761 11.25 6.5C11.25 7.89239 10.6969 9.22774 9.71231 10.2123C8.72774 11.1969 7.39239 11.75 6 11.75ZM6 12.5C7.5913 12.5 9.11742 11.8679 10.2426 10.7426C11.3679 9.61742 12 8.0913 12 6.5C12 4.9087 11.3679 3.38258 10.2426 2.25736C9.11742 1.13214 7.5913 0.5 6 0.5C4.4087 0.5 2.88258 1.13214 1.75736 2.25736C0.632141 3.38258 0 4.9087 0 6.5C0 8.0913 0.632141 9.61742 1.75736 10.7426C2.88258 11.8679 4.4087 12.5 6 12.5Z"
+        fill="#303436"
+      />
+      <path
+        d="M6.6975 5.441L4.98 5.65625L4.9185 5.94125L5.256 6.0035C5.4765 6.056 5.52 6.1355 5.472 6.35525L4.9185 8.95625C4.773 9.629 4.99725 9.9455 5.5245 9.9455C5.93325 9.9455 6.408 9.7565 6.62325 9.497L6.68925 9.185C6.53925 9.317 6.32025 9.3695 6.17475 9.3695C5.9685 9.3695 5.8935 9.22475 5.94675 8.96975L6.6975 5.441ZM6.75 3.875C6.75 4.07391 6.67098 4.26468 6.53033 4.40533C6.38968 4.54598 6.19891 4.625 6 4.625C5.80109 4.625 5.61032 4.54598 5.46967 4.40533C5.32902 4.26468 5.25 4.07391 5.25 3.875C5.25 3.67609 5.32902 3.48532 5.46967 3.34467C5.61032 3.20402 5.80109 3.125 6 3.125C6.19891 3.125 6.38968 3.20402 6.53033 3.34467C6.67098 3.48532 6.75 3.67609 6.75 3.875Z"
+        fill="#303436"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4691_5740">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const DownArrowIcon = ({ color = grayColor, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 16 16"
+    fill={ color}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.64599 4.64604C1.69244 4.59948 1.74761 4.56253 1.80836 4.53733C1.86911 4.51212 1.93423 4.49915 1.99999 4.49915C2.06576 4.49915 2.13088 4.51212 2.19163 4.53733C2.25237 4.56253 2.30755 4.59948 2.35399 4.64604L7.99999 10.293L13.646 4.64604C13.6925 4.59955 13.7477 4.56267 13.8084 4.53752C13.8691 4.51236 13.9342 4.49941 14 4.49941C14.0657 4.49941 14.1308 4.51236 14.1916 4.53752C14.2523 4.56267 14.3075 4.59955 14.354 4.64604C14.4005 4.69253 14.4374 4.74772 14.4625 4.80846C14.4877 4.86919 14.5006 4.9343 14.5006 5.00004C14.5006 5.06578 14.4877 5.13088 14.4625 5.19162C14.4374 5.25236 14.4005 5.30755 14.354 5.35404L8.35399 11.354C8.30755 11.4006 8.25237 11.4375 8.19163 11.4628C8.13088 11.488 8.06576 11.5009 7.99999 11.5009C7.93423 11.5009 7.86911 11.488 7.80836 11.4628C7.74761 11.4375 7.69244 11.4006 7.64599 11.354L1.64599 5.35404C1.59943 5.30759 1.56249 5.25242 1.53728 5.19167C1.51207 5.13093 1.4991 5.06581 1.4991 5.00004C1.4991 4.93427 1.51207 4.86915 1.53728 4.80841C1.56249 4.74766 1.59943 4.69248 1.64599 4.64604Z"
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="2"
+    />
+  </svg>
+);
+
 export const PencilIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

diff --git a/forms-flow-service/src/request/requestService.ts b/forms-flow-service/src/request/requestService.ts
@@ -68,7 +68,30 @@ class RequestService {
         : headers,
     });
   }
-  public static httpPOSTBlobRequest(
+
+  public static httpMultipartPOSTRequest(
+    url: string,
+    importData: File,
+    supportData: string, 
+    token: string | null,
+    isBearer: boolean = true,
+    headers: object | null = null
+  ): any {
+    const formData = new FormData();
+    formData.append("file", importData);
+    formData.append("data", supportData);
+      return axios.post(url, formData, {
+      headers: {
+        ...headers,
+        Authorization: isBearer
+          ? `Bearer ${token || StorageService.get(StorageService.User.AUTH_TOKEN)}`
+          : token,
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  }  
+
+    public static httpPOSTBlobRequest(
     url: string,
     params: object | null,
     data: object,

diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss
@@ -24,11 +24,11 @@
   }
 
   .flow-builder {
-    min-height: 27.25rem;
+    height: calc(100vh - 18rem) !important;
   }
 
   .form-builder {
-    height: 28.75rem;
+    height: calc(100vh - 16.5rem) !important;
     overflow-x: hidden;
     scrollbar-width: none !important;
 
@@ -53,7 +53,7 @@
     width: 100% !important;
     height: auto !important;
     border-radius: var(--radius-0100) !important;
-    margin: var(--spacer-150) 0;
+    margin-bottom: var(--spacer-150);
 
     .editor-header-text {
       color: var(--ff-white);
@@ -77,7 +77,7 @@
     padding-right: 2.25rem !important;
     background-color: var(--ff-base-200);
     width: 6.0625rem;
-    min-height: 35.4375rem;
+    height: calc(100vh - 9.8rem) !important;
     cursor: pointer;
     height: auto;
     position: absolute;
@@ -121,7 +121,7 @@
     padding-left: var(--spacer-200) !important;
     padding-right: 2.25rem !important;
     background-color: var(--ff-base-200);
-    min-height: 35.4375rem;
+    height: calc(100vh - 9.8rem) !important;
     height: auto;
     position: absolute;
     right: -15%;

diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
@@ -123,7 +123,7 @@ select option:hover {
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-sm);
       line-height: var(--text-line-height);
-      padding: var(--spacer-075);
+      padding: var(--spacer-050);
       padding-right: var(--spacer-250);
 
 
@@ -390,3 +390,7 @@ select option:hover {
     }
   }
 }
+
+.valiation-astrisk {
+  color: var(--ff-base-600);
+}
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
@@ -17,6 +17,10 @@
   }
 }
 
+.modal.fade .modal-dialog { 
+  transition: transform 0.7s ease-out !important;
+}
+
 .modal-header,
 .modal-footer {
   justify-content: space-between !important;
@@ -25,20 +29,25 @@
   margin-left: 0 !important;
   padding: var(--spacer-200) 2.5rem !important;
   flex-shrink: 0;
-  color: var(--ff-gray-800, #303436);  
-  font-size: var(--spacer-150);  
+  color: var(--ff-gray-800, #303436);
+  font-size: var(--spacer-150);
   font-weight: var(--font-weight-sm);
   line-height: normal;
 }
+
 .modal-title {
-font-size: var(--font-size-lg) !important;
-font-weight: var(--font-weight-sm) !important;
-line-height: 120% !important;
-text-transform: capitalize !important;
+  font-size: var(--font-size-lg) !important;
+  font-weight: var(--font-weight-sm) !important;
+  line-height: 120% !important;
+  text-transform: capitalize !important;
 }
-.modal-title, .modal-title b, .modal-title strong {
+
+.modal-title,
+.modal-title b,
+.modal-title strong {
   font-weight: var(--font-weight-sm) !important;
 }
+
 .modal-content {
   position: relative;
   display: flex;
@@ -62,19 +71,19 @@ text-transform: capitalize !important;
 
   &.modal-content-heading {
     color: var(--ff-base-600, #253DF4);
-    
+
     font-size: var(--font-size-sm);
-    
+
     font-weight: var(--ff-font-weight-xl);
     line-height: 120%;
     letter-spacing: 0.02rem;
   }
 
   &.modal-content-text {
     color: var(--ff-gray-800, #303436);
-    
+
     font-size: var(--ff--font-size-sm);
-    
+
     font-weight: var(--font-weight-sm);
     line-height: 120%;
     text-align: left;
@@ -89,12 +98,17 @@ text-transform: capitalize !important;
   }
 }
 
+.build-modal-body {
+  padding: 2rem 2.5rem !important;
+}
+
 .message-primary {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-sm);
   line-height: 120%;
   margin-bottom: var(--spacer-150);
 }
+
 .message-secondary {
   color: var(--gray-gray-80, #303436);
   font-size: var(--font-size-sm);
@@ -107,6 +121,10 @@ text-transform: capitalize !important;
   max-width: 50% !important;
 }
 
+.h-40  {
+  min-height: 40px !important;
+}
+
 .content-wrapper {
   display: flex;
   width: 14.0625rem;
@@ -134,9 +152,10 @@ text-transform: capitalize !important;
     border-right: 0 !important;
   }
 }
-.create-form-modal-ee{
-  .modal-dialog{
-    max-width: 57rem ;
+
+.create-form-modal-ee {
+  .modal-dialog {
+    max-width: 57rem;
   }
 }
 
@@ -154,20 +173,44 @@ text-transform: capitalize !important;
 
 .Modal-content-heading {
   color: var(--ff-base-600, #253DF4);
-  
+
   font-size: var(--spacer-100);
-  
+
   font-weight: 700;
   line-height: 120%;
   letter-spacing: 0.02rem;
 }
 
 .modal-content-text {
   color: var(--ff-gray-800, #303436);
-  
+
   font-size: var(--spacer-100);
-  
+
   font-weight: 400;
   line-height: 120%;
   text-align: left;
 }
+
+//action modal
+.custom-action-flex {
+  gap: var(--spacer-100);
+  display: flex;
+}
+
+.custom-action-model-body {
+  padding: var(--spacer-200) var(--spacer-250);
+
+}
+
+.action-form {
+  padding: 1.875rem var(--spacer-125);
+}
+
+.custom-modal-content {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  width: 50% !important;
+  max-width: 100%;
+  margin: auto;
+
+}