fix: Removed Hardcoded Locales and Improved Error Handlings

.circleci/config.yml

@@ -1,35 +1,35 @@
-version: 2.1
-
-orbs:
-  node: circleci/node@5.1.0
-
-jobs:
-  apps-checks:
-    docker:
-      - image: cimg/base:stable
-    resource_class: medium+
-    steps:
-      - checkout
-      - node/install
-      - run:
-          name: Install root dependencies
-          command: npm install
-      - run:
-          name: Install apps dependencies
-          command: npm run install-apps
-      - run:
-          name: Build apps
-          command: npm run build-apps
-      - run:
-          name: Test apps
-          command: npm run test-apps
-
-workflows:
-  version: 2
-  apps-ci-pipeline:
-    jobs:
-      - apps-checks:
-          filters:
-            branches:
-              ignore:
-                - main
+version: 2.1
+
+orbs:
+  node: circleci/node@5.1.0
+
+jobs:
+  apps-checks:
+    docker:
+      - image: cimg/base:stable
+    resource_class: medium+
+    steps:
+      - checkout
+      - node/install
+      - run:
+          name: Install root dependencies
+          command: npm install
+      - run:
+          name: Install apps dependencies
+          command: npm run install-apps
+      - run:
+          name: Build apps
+          command: npm run build-apps
+      - run:
+          name: Test apps
+          command: npm run test-apps
+
+workflows:
+  version: 2
+  apps-ci-pipeline:
+    jobs:
+      - apps-checks:
+          filters:
+            branches:
+              ignore:
+                - main

apps/imageHotspotCreator/src/components/Creator/createHotspot.css

@@ -41,7 +41,6 @@
     width:100%;
     padding: 10px;
     background-color: #ffffff;
-    /* border: 1px solid rgb(206, 206, 206); */
     align-items: center;
     justify-content: flex-start;
     border-radius: 4px;
@@ -59,7 +58,6 @@
     display: flex;
     color: black;
     height: 10px;
-    /* position: absolute; */
     cursor: pointer;
     align-items: center;
     right: -7px;
@@ -90,7 +88,6 @@
 
 .hotspot_image_logo{
     display: flex;
-    /* border-radius: 5px; */
     height: 15px;
     width: 15px;
     background-color: burlywood;
@@ -116,7 +113,6 @@
     max-height: 100%;
     width: 60%;
     padding: 20px;
-    /* border-right: 1px dotted black; */
     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 }
 
@@ -125,7 +121,6 @@
     justify-content: space-between;
     height: 40px;
     align-items: center;
-    /* border: 1px solid rgb(206, 206, 206); */
     background-color: #ffffff;
     border-radius: 4px;
     padding: 10px;
@@ -142,15 +137,12 @@
     display: flex;
     color: black;
     font-weight: bold;
-    /* width: 78%; */
-    /* height: 100%; */
     align-items: center;
 }
 
 .add_hotspot_button{
     display: flex;
     align-items: center;
-    /* width: 22%; */
     color: black;
     gap: 10px;
     justify-content: center;
@@ -166,7 +158,6 @@
     height: 85%;
     align-items: center;
     justify-content: center;
-    /* width: 100%; */
 }
 
 .editable_image{
@@ -181,15 +172,13 @@
 
 .imageSection{
     width: 45%;
-    /* border: 1px solid gray; */
     display: flex;
     flex-direction: column;
     padding: 10px;
     border-right: 1.5px solid gray;
 }
 
 .imageContainer{
-    /* height: 80%; */
     height: 70%;
     width: 100%;
     display: flex;
@@ -210,7 +199,6 @@
 }
 
 .imageDetailContainer{
-    /* margin-top: 20px; */
     display: flex;
     gap: 20px;
     height: 100%;
@@ -270,7 +258,6 @@ object-fit: contain;
     width: 50%;
     height: 100%;
     border: none;
-    /* background-color: rgb(232 232 232); */
 }
 
 .buttonSection{
@@ -298,4 +285,4 @@ object-fit: contain;
     padding: 10px;
     text-align: center;
     height: 100%;
-}
+}

apps/imageHotspotCreator/src/components/Creator/createHotspot.tsx

@@ -6,6 +6,8 @@ import CancelIcon from '@mui/icons-material/Cancel'
 import CropIcon from '@mui/icons-material/Crop'
 import cloneDeep from 'clone-deep'
 import { Button, Stack, Menu, Tooltip, Notification } from '@contentful/f36-components'
+import ValidationPage from '../Validation'
+import fieldMissing from "../../Assets/MissingField.svg";
 
 /**
  * CreateHotspot component.
@@ -123,65 +125,63 @@ const CreateHotspot = ({
     const scaledWidth = imageWidth * scale;
     const scaledHeight = imageHeight * scale;
 
-    canvas.width = scaledWidth;
+   if(canvas){
+     canvas.width = scaledWidth;
     canvas.height = scaledHeight;
     canvas.style.cursor = cursorStyle;
     context.drawImage(image, 0, 0, scaledWidth, scaledHeight);
     setCanvas(canvas);
 
     // Update hotspot arrays based on the new canvas size
     if (sdk.entry.fields.hotspots.getValue()?.hotspots) {
+
       setRectArray(sdk.entry.fields.hotspots.getValue().hotspots)
       setListArray(sdk.entry.fields.hotspots.getValue().hotspots)
+
     } else {
+
       sdk.entry.fields.hotspots.setValue({
         hotspots: [],
       })
+
       setRectArray(sdk?.entry?.fields?.hotspots?.getValue().hotspots)
       setListArray(sdk?.entry?.fields?.hotspots?.getValue().hotspots)
     }
+  }
+
+
   };
 
+  const [missedField, setMissedField] = useState([]);
+
+  useEffect(() => {
+
+    const requiredNames = ["Title", "Image URL", "Hotspots"];
+    const missedObject: any = cloneDeep(missedField);
+
+    // Check if required names exist and create objects accordingly
+    for (const name of requiredNames) {
+      const found = sdk.contentType.fields.find((obj: any) => obj.name === name); // Check if object with name exists
+      if (!found) {
+        missedObject.push({ name }); // Add missing object with just the name property
+      }
+    }
+    if (missedObject.length > 0) {
+      setMissedField(missedObject);
+    }
+
+  }, [])
+
   //Initial use effect for drawing the canvas and image in the image container
   useEffect(() => {
     sdk?.entry?.fields?.imageUrl?.setValue(imageUrl)
-    const container:HTMLDivElement|any = containerRef.current
-    const canvas:HTMLCanvasElement | any = canvasRef.current
-    const context = canvas?.getContext('2d')
     const image:HTMLImageElement|any = imageRef.current
-    image.onload = () => {
-      // const containerWidth = container?.offsetWidth
-      // const containerHeight = container?.offsetHeight
-
-      // const imageWidth = image?.width
-      // const imageHeight = image?.height
-
-      // const widthRatio = containerWidth / imageWidth
-      // const heightRatio = containerHeight / imageHeight
-
-      // const scale = Math.min(widthRatio, heightRatio)
-
-      // const scaledWidth = imageWidth * scale
-      // const scaledHeight = imageHeight * scale
-
-      // canvas.width = scaledWidth
-      // canvas.height = scaledHeight
-      // canvas.style.cursor = cursorStyle;
-      // context.drawImage(image, 0, 0, scaledWidth, scaledHeight)
-      // setCanvas(canvas)
-
-      // if (sdk.entry.fields.hotspots.getValue()?.hotspots) {
-      //   setRectArray(sdk.entry.fields.hotspots.getValue().hotspots)
-      //   setListArray(sdk.entry.fields.hotspots.getValue().hotspots)
-      // } else {
-      //   sdk.entry.fields.hotspots.setValue({
-      //     hotspots: [],
-      //   })
-      //   setRectArray(sdk?.entry?.fields?.hotspots?.getValue().hotspots)
-      //   setListArray(sdk?.entry?.fields?.hotspots?.getValue().hotspots)
-      // }
-      handleResize();
+    if(image){
+      image.onload = () => {
+        handleResize();
+      }
     }
+
   }, [])
 
   useEffect(() => {
@@ -194,11 +194,14 @@ const CreateHotspot = ({
 
   useEffect(()=>{
     const canvas:HTMLCanvasElement | any = canvasRef.current
-    canvas.style.cursor = cursorStyle;
-    canvas.style.border = '0px';
-    if(cursorStyle==="crosshair"){
-      canvas.style.border = '3px dotted red';
+    if(canvas){
+      canvas.style.cursor = cursorStyle;
+      canvas.style.border = '0px';
+      if(cursorStyle==="crosshair"){
+        canvas.style.border = '3px dotted #cdcdcd';
+      }
     }
+
   },[cursorStyle])
 
   /**
@@ -368,31 +371,6 @@ const CreateHotspot = ({
    */
   const deleteBoundingBox = (index: number, e: any) => {
     e.stopPropagation()
-    // if(showDetail){
-    //   e.stopPropagation()
-    //   Notification.error('You are creating or editing a hotspot', { title: 'Oops!' ,duration:2500})
-    // }
-    // else{
-    //   setRect({
-    //     x: 0,
-    //     y: 0,
-    //     width: 0,
-    //     height: 0,
-    //     name: 'Boundingbox',
-    //     borderColor: `#ffffff`,
-    //     hotspotX: 0,
-    //     hotspotY: 0,
-    //   })
-    //   let tempArr = cloneDeep(rectArray)
-    //   tempArr.splice(index, 1)
-    //   setSelectedBoundingBoxIndex(null)
-    //   setShowDetail(false)
-    //   setEditing(false)
-    //   setRectArray(tempArr)
-    //   setListArray(tempArr)
-    //   sdk.entry.fields.imageUrl.setValue(imageUrl)
-    //   sdk.entry.fields.hotspots.setValue({ hotspots: tempArr })
-    // }
     if(index===selectedBoundingBoxIndex){
       e.stopPropagation()
       Notification.error('You are editing this hotspot', { title: 'Oops!' ,duration:2500})
@@ -523,13 +501,11 @@ const CreateHotspot = ({
       ||(data?.x < 0 || data?.x > 100 - data.width) 
       || (data.hotspotY < data.y || (data.hotspotY > data.y + data.height))
       || (data.hotspotX < data.x || (data.hotspotX > data.x + data.width))){
-        console.log("false")
         return false;
       }
       return true;
      }
      else if(data.name.length===0){
-      console.log(data.name.length,true)
       return false;
      }
      else{
@@ -642,7 +618,8 @@ const CreateHotspot = ({
   }, [selectedBoundingBoxIndex])
 
   return (
-    <div className="createContainer">
+    <>
+     {missedField.length===0 ? <div className="createContainer">
       <div className="hotspotlist_container">
         <div className="hotspotlist_title">Existing Hotspots</div>
 
@@ -910,8 +887,9 @@ const CreateHotspot = ({
           </div>
         )}
       </div>
-    </div>
+    </div> : <ValidationPage missedField={missedField} fieldMissing={fieldMissing}/>}
+    </>
+
   )
 }
 export default CreateHotspot
-