From 7a3997472cc1078c355fa8a494f23e12a4d0624b Mon Sep 17 00:00:00 2001
From: Senthil Athiban <senthilathiban0@gmail.com>
Date: Tue, 23 Jul 2024 08:58:27 +0530
Subject: [PATCH 1/2] (fix): fix the dnd destination

---
 .../interactive-builder/interactive-builder.component.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
index cb4eafff..74a4ab21 100644
--- a/src/components/interactive-builder/interactive-builder.component.tsx
+++ b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -242,7 +242,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
   );
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, delta } = event;
+    const { active, over } = event;
 
     if (active) {
       // Get the source information
@@ -251,11 +251,15 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
       const sourceSectionIndex = parseInt(activeIdParts[2]);
       const sourceQuestionIndex = parseInt(activeIdParts[3]);
 
+      // Get the destination information
+      const destination = over.id.toString().split('-');
+      const destinationQuestionIndex = parseInt(destination[4]);
+
       // Move the question within the same section
       const questions = schema.pages[sourcePageIndex].sections[sourceSectionIndex].questions;
       const questionToMove = questions[sourceQuestionIndex];
       questions.splice(sourceQuestionIndex, 1);
-      questions.splice(sourceQuestionIndex + delta.y, 0, questionToMove);
+      questions.splice(destinationQuestionIndex, 0, questionToMove);
 
       const updatedSchema = {
         ...schema,

From 9c8131af47939e628168eeebf9b1ebe83957cf17 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 23 Jul 2024 11:46:40 +0300
Subject: [PATCH 2/2] Subtle tweaks

---
 .../draggable-question.component.tsx          | 29 ++++++++++++-------
 .../draggable-question.scss                   |  8 +++--
 .../droppable-container.scss                  |  4 +--
 translations/en.json                          |  2 +-
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
index e082b04e..d2dce558 100644
--- a/src/components/interactive-builder/draggable-question.component.tsx
+++ b/src/components/interactive-builder/draggable-question.component.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useTranslation } from 'react-i18next';
@@ -29,8 +30,8 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   schema,
   sectionIndex,
 }) => {
-  const defaultEnterDelayInMs = 300;
   const { t } = useTranslation();
+  const defaultEnterDelayInMs = 300;
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
   const launchEditQuestionModal = useCallback(() => {
@@ -57,25 +58,31 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     });
   }, [onSchemaChange, pageIndex, question, questionIndex, schema, sectionIndex]);
 
-  const { attributes, listeners, transform, isDragging, setNodeRef } = useDraggable({
+  const { attributes, listeners, transform, isDragging, over, setNodeRef } = useDraggable({
     id: draggableId,
     disabled: questionCount <= 1,
   });
 
-  const style = {
-    transform: CSS.Translate.toString(transform),
-  };
-
-  const dragStyles = isDragging ? styles.isDragged : styles.normal;
+  const handleDuplicate = useCallback(() => {
+    if (!isDragging) {
+      handleDuplicateQuestion(question, pageIndex, sectionIndex);
+    }
+  }, [handleDuplicateQuestion, isDragging, question, pageIndex, sectionIndex]);
 
   return (
-    <div className={dragStyles} style={style}>
+    <div
+      className={classNames({
+        [styles.dragContainer]: true,
+        [styles.dragContainerWhenDragging]: isDragging,
+      })}
+      style={{ transform: CSS.Translate.toString(transform) }}
+    >
       <div className={styles.iconAndName}>
         <div ref={setNodeRef} {...attributes} {...listeners}>
           <IconButton
             className={styles.dragIcon}
-            enterDelayMs={defaultEnterDelayInMs}
-            label={t('reorderQuestion', 'Reorder question')}
+            enterDelayMs={over ? 6000 : defaultEnterDelayInMs}
+            label={t('dragToReorder', 'Drag to reorder')}
             kind="ghost"
             size="md"
           >
@@ -91,7 +98,7 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           feedback={t('duplicated', 'Duplicated') + '!'}
           iconDescription={t('duplicateQuestion', 'Duplicate question')}
           kind="ghost"
-          onClick={() => !isDragging && handleDuplicateQuestion(question, pageIndex, sectionIndex)}
+          onClick={handleDuplicate}
         />
         <IconButton
           enterDelayMs={defaultEnterDelayInMs}
diff --git a/src/components/interactive-builder/draggable-question.scss b/src/components/interactive-builder/draggable-question.scss
index 1e3a8007..8431925f 100644
--- a/src/components/interactive-builder/draggable-question.scss
+++ b/src/components/interactive-builder/draggable-question.scss
@@ -16,7 +16,7 @@
   @include type.type-style('body-01');
 }
 
-.isDragged, .normal {
+.dragContainer {
   display: flex;
   height: 3rem;
   justify-content: space-between;
@@ -24,9 +24,11 @@
   width: 100%;
 }
 
-.isDragged {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+.dragContainerWhenDragging {
+  @extend .dragContainer;
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   background-color: rgba(255, 255, 255, 0.552);
+  transform: scale(.75);
 }
 
 .dragIcon {
diff --git a/src/components/interactive-builder/droppable-container.scss b/src/components/interactive-builder/droppable-container.scss
index 746e8048..3d3a29ec 100644
--- a/src/components/interactive-builder/droppable-container.scss
+++ b/src/components/interactive-builder/droppable-container.scss
@@ -1,9 +1,9 @@
 @use '@carbon/colors';
 
 .droppable {
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 }
 
 .isOver {
-  border-color: colors.$teal-70;
+  border-color: colors.$teal-40;
 }
diff --git a/translations/en.json b/translations/en.json
index c1eb00c8..9f0cc9e4 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -50,6 +50,7 @@
   "description": "Description",
   "descriptionPlaceholderText": "e.g. A form used to collect encounter data for clients in the Express Care program.",
   "downloadSchema": "Download schema",
+  "dragToReorder": "Drag to reorder",
   "duplicated": "Duplicated",
   "duplicateQuestion": "Duplicate question",
   "editButton": "Edit {{elementType}}",
@@ -163,7 +164,6 @@
   "relationship": "Relationship",
   "renderChanges": "Render changes",
   "renderingType": "Rendering type",
-  "reorderQuestion": "Reorder question",
   "required": "Required",
   "restoreDraft": "Restore draft",
   "retired": "Retired",