feat import widget title

apps/widget/src/components/Common/Container/Container.tsx

@@ -117,6 +117,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
         >
           <NotificationsProvider>
             <Provider
+              title={secondaryPayload?.title}
               // api
               api={api}
               // impler-context

apps/widget/src/components/Common/Heading/Heading.tsx

@@ -5,15 +5,9 @@ import { PhasesEum } from '@types';
 
 interface IHeadingProps {
   active: PhasesEum;
+  title?: string;
 }
 
-const Titles = {
-  [PhasesEum.UPLOAD]: TEXTS.TITLES.UPLOAD,
-  [PhasesEum.MAPPING]: TEXTS.TITLES.MAPPING,
-  [PhasesEum.REVIEW]: TEXTS.TITLES.REVIEW,
-  [PhasesEum.COMPLETE]: TEXTS.TITLES.COMPLETE,
-};
-
 const Steps = [
   {
     label: TEXTS.STEPS.UPLOAD,
@@ -29,13 +23,12 @@ const Steps = [
   },
 ];
 
-export function Heading(props: IHeadingProps) {
-  const { active } = props;
+export function Heading({ active, title }: IHeadingProps) {
   const theme = useMantineTheme();
 
   return (
     <Group style={{ justifyContent: 'space-between' }} mb="lg">
-      <Title order={3}>{Titles[active]}</Title>
+      <Title order={3}>{title}</Title>
       <Stepper active={active} steps={Steps} primaryColor={theme.colors.primary[variables.colorIndex]} />
     </Group>
   );

apps/widget/src/components/Common/Layout/Layout.tsx

@@ -5,16 +5,16 @@ import { PhasesEum } from '@types';
 
 interface ILayoutProps {
   active: PhasesEum;
+  title?: string;
 }
 
 export function Layout(props: PropsWithChildren<ILayoutProps>) {
   const { classes } = useStyles();
-  const { children, active } = props;
+  const { children, active, title } = props;
 
   return (
     <div className={classes.root}>
-      {/* Heading */}
-      <Heading active={active} />
+      <Heading active={active} title={title} />
       <div className={classes.container}>{children}</div>
     </div>
   );

apps/widget/src/components/Common/Provider/Provider.tsx

@@ -5,6 +5,7 @@ import APIContextProvider from '@store/api.context';
 import AppContextProvider from '@store/app.context';
 
 interface IProviderProps {
+  title?: string;
   // api-context
   api: ApiService;
   // impler-context
@@ -17,7 +18,7 @@ interface IProviderProps {
 }
 
 export function Provider(props: PropsWithChildren<IProviderProps>) {
-  const { api, projectId, templateId, accessToken, extra, authHeaderValue, children, primaryColor } = props;
+  const { api, title, projectId, templateId, accessToken, extra, authHeaderValue, children, primaryColor } = props;
 
   return (
     <ImplerContextProvider
@@ -28,7 +29,9 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
       authHeaderValue={authHeaderValue}
     >
       <APIContextProvider api={api}>
-        <AppContextProvider primaryColor={primaryColor}>{children}</AppContextProvider>
+        <AppContextProvider title={title} primaryColor={primaryColor}>
+          {children}
+        </AppContextProvider>
       </APIContextProvider>
     </ImplerContextProvider>
   );

apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx

@@ -19,14 +19,14 @@ export function Phase1(props: IPhase1Props) {
   const { classes } = useStyles();
   const { onNextClick: goNext } = props;
   const {
-    showSelectTemplate,
     onSubmit,
-    trigger,
     control,
     templates,
-    isInitialDataLoaded,
-    isUploadLoading,
     onDownload,
+    isUploadLoading,
+    onTemplateChange,
+    showSelectTemplate,
+    isInitialDataLoaded,
     isDownloadInProgress,
   } = usePhase1({
     goNext,
@@ -50,10 +50,7 @@ export function Phase1(props: IPhase1Props) {
                 data={templates}
                 width="50%"
                 error={fieldState.error?.message}
-                onChange={(value) => {
-                  field.onChange(value);
-                  trigger('templateId');
-                }}
+                onChange={onTemplateChange}
                 value={field.value}
                 ref={field.ref}
               />

apps/widget/src/components/widget/Widget.tsx

@@ -16,7 +16,7 @@ import { logAmplitudeEvent, resetAmplitude } from '@amplitude';
 export function Widget() {
   const defaultDataCount = 0;
   const queryClient = useQueryClient();
-  const { reset: resetAppState, uploadInfo } = useAppState();
+  const { reset: resetAppState, uploadInfo, templateInfo, title } = useAppState();
   const [phase, setPhase] = useState<PhasesEum>(PhasesEum.UPLOAD);
   const [dataCount, setDataCount] = useState<number>(defaultDataCount);
   const [promptContinueAction, setPromptContinueAction] = useState<PromptModalTypesEnum>();
@@ -63,7 +63,7 @@ export function Widget() {
 
   return (
     <Modal opened onClose={onClose}>
-      <Layout active={phase}>
+      <Layout active={phase} title={title || templateInfo?.name}>
         {PhaseView[phase]}
         <PromptModal
           onCancel={onPromptCancel}

apps/widget/src/hooks/Phase1/usePhase1.ts

@@ -16,7 +16,7 @@ interface IUsePhase1Props {
 
 export function usePhase1({ goNext }: IUsePhase1Props) {
   const { api } = useAPIState();
-  const { setUploadInfo } = useAppState();
+  const { setUploadInfo, setTemplateInfo } = useAppState();
   const [templates, setTemplates] = useState<IOption[]>([]);
   const [isDownloadInProgress, setIsDownloadInProgress] = useState<boolean>(false);
   const { projectId, templateId, authHeaderValue, extra } = useImplerState();
@@ -32,6 +32,12 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
           value: item._id,
         }))
       );
+      if (templateId) {
+        const foundTemplate = templatesResponse.find((templateItem) => templateItem._id === templateId);
+        if (foundTemplate) {
+          setTemplateInfo(foundTemplate);
+        }
+      }
     },
     onError(error: IErrorObject) {
       notifier.showError({ message: error.message, title: error.error });
@@ -90,7 +96,14 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
 
     return undefined;
   };
-
+  const onTemplateChange = (newTemplateId: string) => {
+    const foundTemplate = dataTemplates?.find((templateItem) => templateItem._id === newTemplateId);
+    if (foundTemplate) {
+      setTemplateInfo(foundTemplate);
+      setValue('templateId', newTemplateId);
+      trigger('templateId');
+    }
+  };
   const onDownload = async () => {
     setIsDownloadInProgress(true);
     const isTemplateValid = await trigger('templateId');
@@ -123,11 +136,11 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
   return {
     control,
     errors,
-    trigger,
     register,
     templates,
-    isUploadLoading,
     onDownload,
+    isUploadLoading,
+    onTemplateChange,
     isDownloadInProgress,
     isInitialDataLoaded: isFetched && !isLoading,
     showSelectTemplate: !templateId,

apps/widget/src/store/app.context.tsx

@@ -1,22 +1,27 @@
 import React, { createContext, useContext, useState } from 'react';
-import { IUpload } from '@impler/shared';
+import { ITemplate, IUpload } from '@impler/shared';
 import { IAppStore } from '../types';
 
 interface AppContextProviderProps
   extends React.PropsWithChildren,
-    Omit<IAppStore, 'uploadInfo' | 'setUploadInfo' | 'reset'> {}
+    Omit<IAppStore, 'uploadInfo' | 'setUploadInfo' | 'reset' | 'templateInfo' | 'setTemplateInfo'> {}
 
 const AppContext = createContext<IAppStore | null>(null);
 
-const AppContextProvider = ({ children, primaryColor }: AppContextProviderProps) => {
+const AppContextProvider = ({ children, primaryColor, title }: AppContextProviderProps) => {
+  const [templateInfo, setTemplateInfo] = useState<ITemplate>({} as ITemplate);
   const [uploadInfo, setUploadInfo] = useState<IUpload>({} as IUpload);
 
   const reset = () => {
     setUploadInfo({} as IUpload);
   };
 
   return (
-    <AppContext.Provider value={{ uploadInfo, setUploadInfo, reset, primaryColor }}>{children}</AppContext.Provider>
+    <AppContext.Provider
+      value={{ title, templateInfo, setTemplateInfo, uploadInfo, setUploadInfo, reset, primaryColor }}
+    >
+      {children}
+    </AppContext.Provider>
   );
 };
 

apps/widget/src/types/store.types.ts

@@ -1,5 +1,5 @@
 import { ApiService } from '@impler/client';
-import { IUpload } from '@impler/shared';
+import { IUpload, ITemplate } from '@impler/shared';
 
 export interface IImplerStore {
   projectId: string;
@@ -14,8 +14,11 @@ export interface IApiStore {
 }
 
 export interface IAppStore {
+  title?: string;
+  templateInfo: ITemplate;
   uploadInfo: IUpload;
   reset: () => void;
   primaryColor: string;
+  setTemplateInfo: (templateInfo: ITemplate) => void;
   setUploadInfo: (uploadInfo: IUpload) => void;
 }

libs/shared/src/types/widget/widget.types.ts

@@ -7,6 +7,7 @@ export interface IShowPayload {
   authHeaderValue?: string;
   primaryColor?: string;
   colorScheme?: string;
+  title?: string;
 }
 export interface IOption {
   value: string;

packages/react/src/hooks/useImpler.ts

@@ -1,6 +1,6 @@
-import { EventTypesEnum, IShowPayload, IUpload } from '@impler/shared';
 import { useCallback, useEffect, useState } from 'react';
 import { logError } from '../utils/logger';
+import { EventTypesEnum, IShowPayload, IUpload } from '@impler/shared';
 import { EventCalls, UploadTemplateData, UploadData } from '../components/button/Button.types';
 
 interface ShowWidgetProps {
@@ -9,6 +9,7 @@ interface ShowWidgetProps {
 
 interface UseImplerProps {
   projectId: string;
+  title?: string;
   templateId?: string;
   accessToken?: string;
   primaryColor?: string;
@@ -26,6 +27,7 @@ export function useImpler({
   templateId,
   accessToken,
   authHeaderValue,
+  title,
   extra,
   onUploadComplete,
   onWidgetClose,
@@ -75,6 +77,7 @@ export function useImpler({
       const payload: IShowPayload = {
         templateId,
       };
+      if (title) payload.title = title;
       if (colorScheme) payload.colorScheme = colorScheme;
       else {
         const preferColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';