From f5d11f9ba6a6f2be14ecf0aa930136ed8a0cf678 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Mon, 15 Jan 2024 19:05:46 +0530
Subject: [PATCH] feat:implement new widgets-  initial
 signature,name,company,job title & date in sign-yourself flow

---
 .../src/microappComponent/DragElement.js      | 146 ++++++++++++------
 apps/OpenSign/src/microappComponent/sign3.png | Bin 804 -> 0 bytes
 .../OpenSign/src/microappComponent/stamp2.png | Bin 561 -> 0 bytes
 .../{IconColor.js => themeColor.js}           |   0
 4 files changed, 100 insertions(+), 46 deletions(-)
 delete mode 100644 apps/OpenSign/src/microappComponent/sign3.png
 delete mode 100644 apps/OpenSign/src/microappComponent/stamp2.png
 rename apps/OpenSign/src/microappComponent/{IconColor.js => themeColor.js} (100%)

diff --git a/apps/OpenSign/src/microappComponent/DragElement.js b/apps/OpenSign/src/microappComponent/DragElement.js
index 2c8b5cb9d..912af9c13 100644
--- a/apps/OpenSign/src/microappComponent/DragElement.js
+++ b/apps/OpenSign/src/microappComponent/DragElement.js
@@ -1,56 +1,110 @@
 import React from "react";
-import stamp from "./stamp2.png";
-import sign from "./sign3.png";
-import { themeColor } from "./IconColor.js";
+import { themeColor } from "./themeColor";
 
-function DragElement({ id }) {
-  const selectedId = id;
+function DragElement(item) {
+  const getWidgets = [
+    {
+      type: "signature",
+      icon: "fa-solid fa-pen-nib",
+      iconSize: "20px"
+    },
+    {
+      type: "stamp",
+      icon: "fa-solid fa-stamp",
+      iconSize: "19px"
+    },
+    {
+      type: "dropdown",
+      icon: "fa-solid fa-circle-chevron-down",
+      iconSize: "19px"
+    },
+    {
+      type: "checkbox",
+      icon: "fa-solid fa-square-check",
+      iconSize: "22px"
+    },
+    {
+      type: "text",
+      icon: "fa-solid fa-font",
+      iconSize: "21px"
+    },
+    {
+      type: "initials",
+      icon: "fa-solid fa-signature",
+      iconSize: "15px"
+    },
+    {
+      type: "name",
+      icon: "fa-solid fa-user",
+      iconSize: "21px"
+    },
+    {
+      type: "company",
+      icon: "fa-solid fa-building",
+      iconSize: "24px"
+    },
+    {
+      type: "job title",
+      icon: "fa-solid fa-address-card",
+      iconSize: "16px"
+    },
+    {
+      type: "date",
+      icon: "fa-solid fa-calendar-days",
+      iconSize: "19px"
+    }
+  ];
+
+  const filterWidgetPreview = getWidgets.filter(
+    (data) => data.type === item?.text
+  );
 
   return (
-    <div>
-      {selectedId === 3 ? (
-        <div
+    <div
+      className="signatureBtn"
+      style={{
+        // opacity: isDragSign ? 0.5 : 1,
+        boxShadow:
+          "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+        marginLeft: "5px"
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          marginLeft: "5px"
+        }}
+      >
+        <i
+          className="fa-sharp fa-solid fa-grip-vertical"
+          style={{ color: "#908d8d", fontSize: "13px" }}
+        ></i>
+        <span
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            userSelect: "none"
+            fontWeight: "400",
+            fontSize: "15px",
+            // padding: "3px 20px 0px 20px",
+            color: "black",
+            marginLeft: "5px"
           }}
         >
-          <img
-            alt="sign img"
-            style={{
-              width: "25px",
-              height: "23px",
-              background: themeColor()
-            }}
-            src={sign}
-          />
-          <span style={{ color: themeColor(), fontSize: "12px" }}>
-            Signature
-          </span>
-        </div>
-      ) : (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            userSelect: "none"
-          }}
-        >
-          <img
-            alt="stamp img"
-            style={{
-              width: "25px",
-              height: "23px",
-              background: themeColor()
-            }}
-            src={stamp}
-          />
-          <span style={{ color: themeColor(), fontSize: "12px" }}>Stamp</span>
-        </div>
-      )}
+          {filterWidgetPreview[0].type}
+        </span>
+      </div>
+      <div
+        style={{
+          backgroundColor: themeColor(),
+          padding: "0 5px",
+          display: "flex",
+          alignItems: "center"
+        }}
+      >
+        <i
+          style={{ color: "white", fontSize: filterWidgetPreview[0].iconSize }}
+          className={filterWidgetPreview[0].icon}
+        ></i>
+      </div>
     </div>
   );
 }
diff --git a/apps/OpenSign/src/microappComponent/sign3.png b/apps/OpenSign/src/microappComponent/sign3.png
deleted file mode 100644
index 4467b46cb8f1d26ec24f9e5b85c4c46ab958c652..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 804
zcmV+<1Ka$GP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkQ)=5M`RCt{2nN5gIVHn5XLB3K`EPR&*Sx6EaWiL|{F(0K#WMN}v
zL5-qNNLF_8u^^2UWi^r{3n?q5v0xH48!{s^?tR|p{&dcrne*P${W#~$oO{mA{ny>x
zd+zi6{^$L8-VbBiYOAd|5wHqmAJ_p@ZlU%$Dj!k#j>;G+lc-!Yc@eMzY(FXwQTa;A
z((t45J8NzO#oeeKMCETJ=m6epflC>Jvl+ER_1-ROU!igx>`9O=C~N`N0-c$Gdjfj`
zm5D0QULQXXg>ArmlShF)8-f;8?s(89?*iFh32)y+VXJ8c0n1Psb>N=?OH8W>>~W{t
zeDVyLRub-vgFR+iO{jbc46wc_IVo&M?PFAamg|On2lgn?5kHt0ATY2f6=FwVyK5Fl
zmD{mRpfchZ*l1D|*dBj+u2;#i{qcgTed_#qAXE5~KMTH%8@SJD!ZBcVX7DASVIpR5
z7N9ch1h}6We96!MBS8}Bs_cidHxu}h--R9}OQ!O`c?-i{%QPQeCKIo{fHkO$I|I76
z$?yX9aMGO9iO)Gr`J~D4-Lrx(CufrrbR=Ps$_CyOu-NU7CZ@c#6e^kt{LFST2>#h5
zP-GK2$MAk~l^f0&7>o$q6JEtOG@)t0Q{07$b!x$$Nbu#Yr$#oRslc<evKrf=$nXJJ
zV-uPJyq`$rT4+7AAr^cT6Pgx0tgGA;*dvMH8<`*l_^IG$oUZd?R`7L9q$bq9b_VW&
zn$IDJVy-HiV*-_LfdN)lho{p&Qp~Et))OiP$H2m>&tQ9V3Gb=mP^-pn43&Gig!hEn
zm(C2-XF>wzRhY~ZyeF`yomuEZ`1BcyJ97)~30PjSkx{v7YV8s720tyZr$RtiW`0xq
zrUCpI$U&2(fDZpuEPxsh49Kr4(4(l_Ew4l~zLg0buiTuvX}mo1y~+ht{`f87-Aq#4
ik?0Jwt+v|wzx5AM4tpcYAmm8^0000<MNUMnLSTY?dTxRM

diff --git a/apps/OpenSign/src/microappComponent/stamp2.png b/apps/OpenSign/src/microappComponent/stamp2.png
deleted file mode 100644
index bd16c5fb8b88ea8c1b56c544e6ade0af1293a571..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 561
zcmV-10?z%3P)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00009a7bBm000XU
z000XU0RWnu7ytkP<4Ht8RCt{2n!#!mK@dQj2z!c>c=YJiqbEszL82la1Aak%As`r|
zr~HD1=qUuf<!U}bF^HaAa}+fqIMp>zx;G&Q!Rgs;tYVo51q;j0)SK$=>Y1Go2Id@K
z1n~hXd#D_v^7Aax=e_(LjDlxC?xFIDHuBF<`3Q11cmr5K<!PtD-$L8zx4{djJnJoS
zA@d}-8BXn#66b;3F_vJI$NQ`zX<k__0HhUYR*8$M+_w`^c~MP7W!F;VLq(BeOOexx
zBBz!jKPrlRvlMw>Pb9uI6p05FMfUAPh!5*6zj57AgykypMCCiMWG0ejR323j*))|%
z09Q~M&mi#`xEwqHvNrwPkhS0mR9;T8QoRb^0Iua*+VUaw3%DLUg33-0k)7ZbXjaPS
zMsq881-M!+V%#^nC>06bVGwZ!^HPxkOMpwMJA>R#J6JTnM&+cS8Gc3MQEs5bb!cw>
zx93{qr|iFP<P)a^CW(}9NxJ14RNkTT9O4EvtH9!{NiR<h6gTpLCnt#2lI|yXa#rch
zT=~-d85$2w67D4z54%OIlWfak5Wzte7%I}*UwMX#wDVFCjYrl=(iIxt6g9;GZ=mwU
z@34|_ACWD`B9Ht2f4=3aGAiRF;r@l3fiU3@q{@oL4#Al*00000NkvXXu0mjf6ae%j

diff --git a/apps/OpenSign/src/microappComponent/IconColor.js b/apps/OpenSign/src/microappComponent/themeColor.js
similarity index 100%
rename from apps/OpenSign/src/microappComponent/IconColor.js
rename to apps/OpenSign/src/microappComponent/themeColor.js