Merge pull request #458 from panoratech/feat/docs-front-updates

✨ New feats
panoratech · May 24, 2024 · f629ab5 · f629ab5
2 parents 90f4bf3 + dd8eb36
commit f629ab5
Show file tree

Hide file tree

Showing 28 changed files with 1,719 additions and 64 deletions.
diff --git a/apps/client-ts/package.json b/apps/client-ts/package.json
@@ -47,6 +47,7 @@
     "next-themes": "^0.2.1",
     "posthog-js": "^1.96.1",
     "react": "^18",
+    "react-confetti-boom": "^1.0.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",

diff --git a/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx b/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
@@ -197,7 +197,7 @@ export default function Page() {
                       </Button2>
                     </CardDescription>
                   </CardHeader>
-                  <Separator className="mb-10"/>
+                  <Separator className="mb-7"/>
                   <CardContent>
                     <FieldMappingsTable mappings={mappingTs} isLoading={isFieldMappingsLoading} />
                   </CardContent>

diff --git a/apps/client-ts/src/components/Auth/CustomLoginComponent/LoginUserForm.tsx b/apps/client-ts/src/components/Auth/CustomLoginComponent/LoginUserForm.tsx
@@ -74,7 +74,7 @@ const LoginUserForm = () => {
                     <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                     <div className="ml-2">
                         User
-                        <Badge variant="secondary" className="rounded-sm px-1 mx-2 font-normal">{`${data.email}`}</Badge>
+                        <Badge variant="secondary" className="rounded-sm px-1 mx-2 font-normal">{`${values.email}`}</Badge>
                         has been logged in
                     </div>
                     </div>

diff --git a/apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingModal.tsx b/apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingModal.tsx
@@ -182,7 +182,7 @@ export function FModal({ onClose }: {onClose: () => void}) {
             <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
             <div className="ml-2">
               Custom field 
-              <Badge variant="secondary" className="rounded-sm px-1 mx-2 font-normal">{`${data.name}`}</Badge>
+              <Badge variant="secondary" className="rounded-sm px-1 mx-2 font-normal">{`${values.sourceCustomFieldId}`}</Badge>
               has been mapped
             </div>
           </div>

diff --git a/apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingsTable.tsx b/apps/client-ts/src/components/Configuration/FieldMappings/FieldMappingsTable.tsx
@@ -20,6 +20,7 @@ import {
 import { DefineForm } from "./defineForm";
 import { useState } from "react";
 import { MapForm } from "./mapForm";
+import StepperForm from "./Stepper/stepper-form";
 export interface Mapping {
   standard_object: string; 
   source_app: string; 
@@ -36,6 +37,8 @@ export default function FieldMappingsTable({
 }: { mappings: Mapping[] | undefined; isLoading: boolean }) {
   const [defineOpen, setDefineOpen] = useState(false);
   const [mapOpen, setMapOpen] = useState(false);
+  const [stepperClose, setStepperClose] = useState(true);
+
   const columns =  useColumns();
   const handleDefineClose = () => {
     setDefineOpen(false);
@@ -48,11 +51,34 @@ export default function FieldMappingsTable({
 
   const countDefined = mappings?.filter(mapping => mapping.status === "defined").length;
   const countMapped = mappings?.filter(mapping => mapping.status === "mapped").length;
+
+  const handleStepper = () => {
+    setStepperClose(false);
+  }
+  const handleStepperClose = () => {
+		setStepperClose(true); 
+	};
+
   if(isLoading){
     return <DataTableLoading data={[]} columns={columns}/>;
   }
+
   return (
     <>
+    {
+      stepperClose ? 
+        <Button 
+        size="sm" 
+        className="h-7 gap-1 mb-4" 
+        onClick={handleStepper}
+        >
+            <span className="flex flex-row justify-center sr-only sm:not-sr-only sm:whitespace-nowrap mx-4">
+            <PlusCircledIcon className="h-3.5 w-3.5 mt-[3px] mr-1" />
+            Add Field Mappings
+            </span>
+      </Button>
+      : <StepperForm setClose={handleStepperClose}/>
+    }
       <div className="hidden h-full flex-1 flex-col space-y-8 md:flex">
       <div className="flex items-center space-x-4 justify-between flex-row">
       <Card className="relative w-1/2">