Feature/cmg 528

ui/src/components/DestinationStack/Actions/singleRowComp.tsx

@@ -0,0 +1,77 @@
+/* Import React modules */
+import React, { useState } from "react";
+/* Import other node modules */
+import { Select, Tooltip, Icon } from "@contentstack/venus-components";
+/* Import our modules */
+//import { TypeMultiSelectObj, TypeSingleRowComp } from "../../common/types";
+//import localeTexts from "../locale/en-us";
+/* Import node module CSS */
+/* Import our CSS */
+
+const SingleRowComp: React.FC<any> = function () {
+  const [contentTypes, setContentTypes] = useState<any[]>();
+  const [metaFields, setMetaFields] = useState<any[]>();
+
+  const saveData = () => {
+    if (contentTypes?.length && metaFields?.length) {
+      const contentTypesData = contentTypes.map(
+        (item: any) => item?.label
+      );
+      const metaFieldsData = metaFields.map(
+        (item: any) => item?.label
+      );
+    //   setList([
+    //     ...list,
+    //     { content_types: contentTypesData, meta_fields: metaFieldsData },
+    //   ]);
+    //   setContentTypes([]);
+    //   setMetaFields([]);
+    //   removeRowComp();
+    }
+  };
+
+  return (
+    <div
+      className="flex-v-center mb-20"
+      data-testid="mapper-select-container"
+    >
+      <Select
+        value={contentTypes}
+        options={[]}
+        placeholder={'select language'}
+        isSearchable
+        isClearable
+        testId="schemaValue-select"
+        onChange={setContentTypes}
+        onBlur={saveData}
+        multiDisplayLimit={2}
+        isSelectAll
+      />
+      <span> - </span>
+      <Select
+        value={metaFields}
+        options={[]}
+        placeholder={'select language'}
+        isSearchable
+        isClearable
+        testId="mapperValue-select"
+        onChange={setMetaFields}
+        onBlur={saveData}
+        multiDisplayLimit={2}
+        isSelectAll
+      />
+      <Tooltip content="Delete" position="top" showArrow={false}>
+        <Icon
+          icon="Trash"
+          size="mini"
+          //onClick={removeRowComp}
+          hover
+        hoverType="secondary"
+        shadow="medium"
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+export default SingleRowComp;

ui/src/components/DestinationStack/Actions/tableHeader.tsx

@@ -0,0 +1,30 @@
+// Importing Library
+import { FieldLabel } from "@contentstack/venus-components";
+
+// TableHeader component of language-mapper tabel
+const TableHeader = ({cms}:{cms:string}) => {
+    return (
+        <div className="flex-v-center">
+          <FieldLabel
+            htmlFor="Content Types"
+            className="contentTypeRows__label field-color field-label"
+            version="v2"
+            requiredText="(destination language)"
+          >
+           Contentstack
+          </FieldLabel>
+
+          <div style={{ marginLeft: "15px" }}>
+            <FieldLabel
+              htmlFor="Fields"
+              className="contentTypeRows__label field-color field-label"
+              requiredText="(source language)"
+              version="v2"
+            >
+             {cms}
+            </FieldLabel>
+          </div>
+        </div>
+      );
+}
+export default TableHeader;

ui/src/components/DestinationStack/DestinationStack.scss

@@ -45,7 +45,13 @@
   border-radius: 4px;
 }
 .destination-stack-container {
-  padding: 20px;
+  padding-left: 25px !important;
+  padding-top: 26px;
+  padding-right: 30px;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 80vh;
   .migration-vertical-stepper {
     padding: 24px 30px;
     border: 1px solid $color-brand-secondary-lightest;
@@ -156,8 +162,15 @@
       color: $color-brand-warning-medium;
       font-size: $size-font-small;
     }
-
-
+    .table-content-section {
+      .Field {
+        &.Field--full {
+          .field-content {
+            border-left: none !important;
+          }
+        }
+      }
+    }
   }
 }
 .action-summary-wrapper {
@@ -175,11 +188,83 @@
   }
 }
 
-
 .locale-container {
   display: flex;
   background-color: $color-base-white-5;
   height: $px-40;
   align-items: center;
   padding: $px-10;
 }
+.lang-container {
+  //display: flex;
+  //flex-wrap: wrap;
+  //padding: $px-20;
+  //padding-bottom: 50px;
+}
+.language-mapper {
+  //padding-top:20px;
+  //margin-top: 20px;
+  //padding: 24px 30px;
+  // height: 150px;
+  border: 1px solid $color-brand-secondary-lightest;
+  border-radius: 4px;
+  background-color: $color-brand-white-base;
+  white-space: nowrap;
+  //z-index: 999 !important;
+  // min-height: auto;
+  // max-height: none;
+  // overflow: visible;
+  // flex-grow: 1;
+  height: auto;
+  margin-bottom: 120px;
+  //padding:  24px 30px, 24px, 30px;
+  gap: 24px;
+  //margin-bottom: 40px;
+  //padding: 10px 50px;
+  .table-content-section {
+    .Field {
+      &.Field--full {
+        .field-content {
+          width: 100% !important;
+          //border-left: none !important;
+        }
+      }
+    }
+  }
+  .span {
+    padding: 10px 20px;
+  }
+  .field-label {
+    padding: 10px 10px;
+  }
+}
+
+.language-title {
+  margin-top: 10px;
+  //margin-left: 2px;
+}
+.info-lang {
+  display: flex;
+  gap: 10px;
+}
+.help-text {
+  margin-top: -5px;
+  margin-left: 0px;
+}
+.mini-table {
+  margin-left: 40px;
+  margin-top: 10px;
+  //width: 120px;
+}
+.lang-container {
+  margin-bottom: 30px;
+  margin-left: 10px;
+  margin-top: 10px;
+  display: flex;
+}
+.info-tag {
+  max-width: 500px;
+}
+.info-language-mapper {
+  margin-bottom: 120px;
+}

ui/src/components/DestinationStack/index.tsx

@@ -2,18 +2,25 @@ import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getDestinationStackSteps } from './StepperSteps';
-import { CircularLoader } from '@contentstack/venus-components';
+import {
+  CircularLoader,
+  HelpText,
+  Icon,
+  Info,
+  Tooltip
+} from '@contentstack/venus-components';
 import { CS_ENTRIES } from '../../utilities/constants';
 import {
   DEFAULT_DESTINATION_STACK_DATA,
-  IDestinationStackComponent,
+  IDestinationStackComponent
 } from '../../context/app/app.interface';
 import './DestinationStack.scss';
 import { MigrationResponse } from '../../services/api/service.interface';
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 import { RootState } from '../../store';
 import { updateMigrationData } from '../../store/slice/migrationDataSlice';
 import { AutoVerticalStepperRef } from '../LegacyCms';
+import LanguageMapper from './Actions/LoadLanguageMapper';
 
 type DestinationStackComponentProps = {
   isCompleted: boolean;
@@ -103,7 +110,9 @@ const DestinationStackComponent = ({
       ) : (
         <div className="destination-stack-container">
           <div className='stackTitle'>{migrationData?.destinationStackData?.title}</div>
-          <AutoVerticalStepper
+          <div className="row">
+            <div className="col-12">
+            <AutoVerticalStepper
             key={stepperKey}
             steps={getDestinationStackSteps(
               isCompleted,
@@ -116,10 +125,41 @@ const DestinationStackComponent = ({
             isRequired={false}
             handleOnAllStepsComplete={handleAllStepsComplete}
           />
+
+            </div>
+          </div>
+
+          <div className="col-12 info-lang">
+            <div className="stackTitle language-title">Language configuration</div>
+            <Tooltip
+              content={`Define language mappings between Contentstack and ${newMigrationData?.legacy_cms?.selectedCms?.parent} for smooth content transfer. Each mapping aligns a WordPress source language with its Contentstack equivalent.`}
+              position="right">
+              <Icon className="language-title" icon="Information" version="v2" size="small"></Icon>
+            </Tooltip>
+          </div>
+          <HelpText
+            data-test-id="cs-paragraph-tag"
+            className="contentMapWrapper-heading p1 regular help-text">
+            Contentstack and {newMigrationData?.legacy_cms?.selectedCms?.parent} Languages Mapping
+          </HelpText>
+
+          {newMigrationData?.destination_stack?.selectedStack?.value ? (
+            <div className="language-mapper col-12 ">
+              <LanguageMapper />
+            </div>
+          ) : (
+            <Info
+              className="info-language-mapper col-12 info-tag"
+              icon={<Icon icon="Information" version="v2" size="small"></Icon>}
+              version="v2"
+              content="Please select the stack to proceed with language mapping"
+              type="light"
+            />
+          )}
         </div>
       )}
     </>
   );
 };
 
-export default DestinationStackComponent;
+export default DestinationStackComponent;

ui/src/context/app/app.interface.ts

@@ -173,7 +173,9 @@ export interface IDestinationStack {
   selectedStack: IDropDown;
   stackArray: IDropDown[];
   migratedStacks: string[];
-
+  sourceLocale: string[];
+  localeMapping: {};
+  csLocale: string[];
 }
 export interface IContentMapper {
   existingGlobal: ContentTypeList[] | (() => ContentTypeList[]);
@@ -337,6 +339,9 @@ export const DEFAULT_DESTINATION_STACK: IDestinationStack = {
   selectedStack: DEFAULT_DROPDOWN,
   stackArray: [],
   migratedStacks: [],
+  sourceLocale: [],
+  localeMapping: {},
+  csLocale: []
 };
 
 export const DEFAULT_CONTENT_MAPPER: IContentMapper = {