[CMG-94]

ui/src/components/DestinationStack/Summary/StacksSummary.tsx

@@ -1,34 +1,75 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import StepIcon from '../../../components/Stepper/FlowStepper/StepIcon';
 import { AppContext } from '../../../context/app/app.context';
 import { isEmptyString } from '../../../utilities/functions';
-import { IStep } from '../../../context/app/app.interface';
-import LoadStacks from '../Actions/LoadStacks';
+import { DEFAULT_DROPDOWN, IDropDown, INewMigration, IStep } from '../../../context/app/app.interface';
+
 
 import './summary.scss';
+import { Icon, Select } from '@contentstack/venus-components';
 interface StacksSummaryProps {
   stepData: IStep;
 }
 
-let LoadFileFormatProps: {
-  stepComponentProps: any;
-  currentStep: 1;
-  handleStepChange: (stepIndex: number, closeStep?: boolean) => {};
-};
 
 const StacksSummary = (props: StacksSummaryProps): JSX.Element => {
   const { newMigrationData } = useContext(AppContext);
+  const [selectedStack, setSelectedStack] = useState<IDropDown>(
+    !isEmptyString(newMigrationData?.destination_stack?.selectedOrg?.value)
+      ? newMigrationData?.destination_stack?.selectedStack
+      : DEFAULT_DROPDOWN
+  );
+  const loadingOption = [
+    {
+      uid: '',
+      label: 'Loading stacks...',
+      value: 'loading',
+      default: false,
+      locale: '',
+      created_at: ''
+    }
+  ];
+  const [allStack, setAllStack] = useState<IDropDown[]>(loadingOption);
 
   return (
     <div className="row">
       {/* {!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.label) &&
       !isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value) && ( */}
-      <div className="col-12">
-        <LoadStacks
-          stepComponentProps={LoadFileFormatProps?.stepComponentProps}
-          currentStep={LoadFileFormatProps?.currentStep}
-          handleStepChange={LoadFileFormatProps?.handleStepChange}
-        />
+       <div className="action-summary-wrapper ">
+        <div className="service_list ">
+          <div className="row">
+            <div className="col-12 pb-3 ">
+              <div className="Dropdown-wrapper p-0 active ">
+                <Select
+                  className="stackselect"
+                  version={'v2'}
+                  options={allStack}
+                  onChange={()=>{return}}
+                  value={selectedStack}
+                  isSearchable={true}
+                  isClearable={true}
+                  placeholder={'Stacks'}
+                />
+              </div>
+            </div>
+            <div className="col-12 pb-2">
+              <label className="title">Master Locale</label>
+            </div>
+            <div className="col-12 pb-2">
+              <div className="stackselect locale-container">
+                <span>{selectedStack?.locale}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="stackselect pb-3 text-end">
+          <a className={`link`} onClick={()=>{return}}>
+            <span className="small">
+              <Icon icon="Plus" size="extraSmall" version="v2" active={true} />
+              Create New Stack
+            </span>
+          </a>
+        </div>
       </div>
     </div>
   );

ui/src/components/DestinationStack/index.tsx

@@ -60,13 +60,13 @@ const DestinationStackComponent = ({
   };
 
   const handleOnClick = async (event: MouseEvent) => {
-    event.preventDefault();
+    event?.preventDefault();
     //Update Data in backend
     await updateDestinationStack(selectedOrganisation?.value, projectId, {
       stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
     });
 
-    const res = await updateCurrentStepData(selectedOrganisation.value, projectId);
+    const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
     if (res) {
       const url = `/projects/${projectId}/migration/steps/3`;
       navigate(url, { replace: true });
@@ -77,7 +77,7 @@ const DestinationStackComponent = ({
     //Update New Migration data
 
     const selectedOrganisationData = validateArray(organisationsList)
-      ? organisationsList.find((org: IDropDown) => org.value === org_id)
+      ? organisationsList?.find((org: IDropDown) => org?.value === org_id)
       : selectedOrganisation;
 
     let selectedStackData: IDropDown = {
@@ -90,13 +90,13 @@ const DestinationStackComponent = ({
     //If stack is already selected and exist in backend, then fetch all stack list and filter selected stack.
     if (!isEmptyString(destination_stack)) {
       const stackData: any = await getAllStacksInOrg(
-        selectedOrganisationData?.value || selectedOrganisation.value
+        selectedOrganisationData?.value || selectedOrganisation?.value
       );
 
       const stack =
         validateArray(stackData?.data?.stacks) &&
         stackData?.data?.stacks?.find(
-          (stack: StackResponse) => stack.api_key === destination_stack
+          (stack: StackResponse) => stack?.api_key === destination_stack
         );
 
       if (stack) {
@@ -125,7 +125,7 @@ const DestinationStackComponent = ({
 
     //Update newMigration Data for destination stack
     const newMigData: IDestinationStack = {
-      ...newMigrationData.destination_stack,
+      ...newMigrationData?.destination_stack,
       selectedOrg: selectedOrganisationData || selectedOrganisation,
       selectedStack: selectedStackData
     };
@@ -137,7 +137,7 @@ const DestinationStackComponent = ({
   useEffect(() => {
     const fetchCMSData = async () => {
       //check if offline CMS data field is set to true, if then read data from cms data file.
-      const data = await getCMSDataFromFile(CS_ENTRIES.DESTINATION_STACK);
+      const data = await getCMSDataFromFile(CS_ENTRIES?.DESTINATION_STACK);
 
       //fetch Legacy CMS Component Data from Contentstack CMS
       //const data = await getEntries({ contentType: CS_ENTRIES.DESTINATION_STACK })
@@ -151,10 +151,10 @@ const DestinationStackComponent = ({
 
       const destinationStackDataMapped: IDestinationStackComponent = {
         ...data,
-        all_steps: getDestinationStackSteps(isCompleted, isMigrationLocked, data.all_steps)
+        all_steps: getDestinationStackSteps(isCompleted, isMigrationLocked, data?.all_steps)
       };
 
-      updateDestinationStackData();
+      //updateDestinationStackData();
 
       updateMigrationData({ destinationStackData: destinationStackDataMapped });
 
@@ -181,14 +181,14 @@ const DestinationStackComponent = ({
   useEffect(() => {
     if (autoVerticalStepperComponent?.current) {
       if (internalActiveStepIndex > -1) {
-        autoVerticalStepperComponent.current.handleDynamicStepChange(internalActiveStepIndex);
+        autoVerticalStepperComponent?.current?.handleDynamicStepChange(internalActiveStepIndex);
       }
 
       if (
         internalActiveStepIndex > -1 &&
         internalActiveStepIndex === migrationData?.destinationStackData?.all_steps?.length - 1
       ) {
-        autoVerticalStepperComponent.current.handleDynamicStepChange(internalActiveStepIndex, true);
+        autoVerticalStepperComponent?.current?.handleDynamicStepChange(internalActiveStepIndex, true);
       }
     }
   }, [internalActiveStepIndex]);

ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx

@@ -46,20 +46,21 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
 
   /****  ALL METHODS HERE  ****/
 
-  const handleBtnClick = (e: MouseEvent) => {
+  const handleBtnClick = async(e: MouseEvent) => {
     e.preventDefault();
     if (!isEmptyString(selectedCard?.fileformat_id) && isCheckedBoxChecked) {
       updateNewMigrationData({
         ...newMigrationData,
         legacy_cms: {
-          ...newMigrationData.legacy_cms,
+          ...newMigrationData?.legacy_cms,
           isFileFormatCheckboxChecked: isCheckedBoxChecked
         }
       });
-      updateFileFormatData(selectedOrganisation.value, projectId, {
+      await updateFileFormatData(selectedOrganisation?.value, projectId, {
         file_format: selectedCard?.fileformat_id
       });
-      fileformatConfirmation(selectedOrganisation?.value, projectId, {
+
+      await fileformatConfirmation(selectedOrganisation?.value, projectId, {
         fileformat_confirmation: isCheckedBoxChecked
       });
 
@@ -78,16 +79,16 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
   useEffect(() => {
     if (validateArray(allowed_file_formats)) {
       const initialFormat = {
-        description: allowed_file_formats[0]?.description,
-        group_name: allowed_file_formats[0]?.group_name,
-        title: allowed_file_formats[0]?.title,
-        fileformat_id: allowed_file_formats[0]?.fileformat_id
+        description: allowed_file_formats?.[0]?.description,
+        group_name: allowed_file_formats?.[0]?.group_name,
+        title: allowed_file_formats?.[0]?.title,
+        fileformat_id: allowed_file_formats?.[0]?.fileformat_id
       };
       setSelectedCard(initialFormat);
       const newMigrationDataObj = {
         ...newMigrationData,
         legacy_cms: {
-          ...newMigrationData.legacy_cms,
+          ...newMigrationData?.legacy_cms,
           selectedFileFormat: initialFormat
         }
       };

ui/src/components/LegacyCms/Actions/LoadPrefix.tsx

@@ -43,7 +43,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
   /****  ALL METHODS HERE  ****/
 
   //Handle Prefix Change
-  const handleOnBlur = (e: MouseEvent) => {
+  const handleOnBlur = async(e: MouseEvent) => {
     e.preventDefault();
     if (!isEmptyString(prefix) && !isError && isCheckedBoxChecked) {
       const newMigrationDataObj: INewMigration = {
@@ -60,8 +60,8 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
       setIsError(false);
 
       //API call for saving Affix
-      updateAffixData(selectedOrganisation?.value, projectId, { affix: prefix });
-      affixConfirmation(selectedOrganisation?.value, projectId, {
+      await updateAffixData(selectedOrganisation?.value, projectId, { affix: prefix });
+      await affixConfirmation(selectedOrganisation?.value, projectId, {
         affix_confirmation: isCheckedBoxChecked
       });
 

ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx

@@ -84,24 +84,19 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
     updateCMSFilters(cmsFilter);
   };
 
-  const getCmsType = async () => {
-    const res: any = await fileValidation();
-    const cmsType = res?.data?.file_details?.cmsType?.toLowerCase();
-    setCmsType(cmsType);
-    return cmsType;
-  };
+
   // Filter CMS Data
   const filterCMSData = async (searchText: string) => {
 
     const { all_cms = [] } = migrationData?.legacyCMSData || {};
-    const cmsType = await getCmsType(); // Fetch the specific CMS type
+    const cmstype = cmsType // Fetch the specific CMS type
 
     let filteredCmsData: ICMSType[] = [];
-    if (isEmptyString(searchText) && !validateArray(cmsFilter) && !cmsType) {
+    if (isEmptyString(searchText) && !validateArray(cmsFilter) && !cmstype) {
       filteredCmsData = all_cms;
     } else {
-      if (cmsType) {
-        filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.cms_id === cmsType);
+      if (cmstype) {
+        filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.cms_id === cmstype);
       }
     }
 
@@ -121,7 +116,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
 
 
 
-    const newSelectedCard = filteredCmsData?.some((cms) => cms?.cms_id === cmsType)  ? filteredCmsData?.[0] : DEFAULT_CMS_TYPE
+    const newSelectedCard = filteredCmsData?.some((cms) => cms?.cms_id === cmstype)  ? filteredCmsData?.[0] : DEFAULT_CMS_TYPE
 
    setSelectedCard(newSelectedCard);
 
@@ -139,9 +134,9 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       updateNewMigrationData(newMigrationDataObj);
 
       // API call for saving selected CMS, if a new card is selected 
-        updateLegacyCMSData(selectedOrganisation?.value, projectId, {
-          legacy_cms: newSelectedCard?.cms_id
-        });
+        // updateLegacyCMSData(selectedOrganisation?.value, projectId, {
+        //   legacy_cms: newSelectedCard?.cms_id
+        // });
 
     }
   };
@@ -157,9 +152,17 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
 
   useEffect(()=>{
    handleDirectSelection(selectedCard)
-  },[cmsType,selectedCard])
-
+  },[cmsType,selectedCard]);
 
+  useEffect(() => {
+    const getCmsType = async () => {
+      const res: any = await fileValidation();
+      const cmsType = res?.data?.file_details?.cmsType?.toLowerCase();
+      setCmsType(cmsType);
+      return cmsType;
+    }; 
+  }, []); 
+
   return (    
     <div>
 

ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx

@@ -53,7 +53,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   }`;
   useEffect(() => {
     handleOnFileUploadCompletion();
-  }, [newMigrationData]);
+  }, []);
 
   return (
     <div className="row">