feat: menaged to provide host key during log (#406)

implerhq · Oct 25, 2023 · a7c088a · a7c088a
2 parents 0874f18 + 17c005e
commit a7c088a
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 7 deletions.
diff --git a/apps/widget/src/components/Common/Container/Container.tsx b/apps/widget/src/components/Common/Container/Container.tsx
@@ -23,7 +23,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
   const { projectId = '' } = useParams<{ projectId: string }>();
   const [showWidget, setShowWidget] = useState<boolean>(false);
   const [primaryPayload, setPrimaryPayload] = useState<IInitPayload>();
-  const [secondaryPayload, setSecondaryPayload] = useState<IShowPayload>({ primaryColor: colors.primary });
+  const [secondaryPayload, setSecondaryPayload] = useState<IShowPayload>({ host: '', primaryColor: colors.primary });
   const { isAuthenticated, refetch } = useAuthentication({ api, projectId });
 
   useEffect(() => {
@@ -125,6 +125,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
         >
           <NotificationsProvider>
             <Provider
+              host={secondaryPayload.host}
               output={secondaryPayload?.output}
               schema={secondaryPayload?.schema}
               title={secondaryPayload?.title}

diff --git a/apps/widget/src/components/Common/Provider/Provider.tsx b/apps/widget/src/components/Common/Provider/Provider.tsx
@@ -11,6 +11,7 @@ interface IProviderProps {
   output?: string;
   schema?: string;
   data?: Record<string, string | number>[];
+  host: string;
   // api-context
   api: ApiService;
   // impler-context
@@ -35,6 +36,7 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
     children,
     primaryColor,
     schema,
+    host,
   } = props;
 
   return (
@@ -46,7 +48,14 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
       authHeaderValue={authHeaderValue}
     >
       <APIContextProvider api={api}>
-        <AppContextProvider output={output} title={title} primaryColor={primaryColor} data={data} schema={schema}>
+        <AppContextProvider
+          host={host}
+          output={output}
+          title={title}
+          primaryColor={primaryColor}
+          data={data}
+          schema={schema}
+        >
           {children}
         </AppContextProvider>
       </APIContextProvider>

diff --git a/apps/widget/src/hooks/Phase3/usePhase3.ts b/apps/widget/src/hooks/Phase3/usePhase3.ts
@@ -16,7 +16,7 @@ const defaultPage = 1;
 
 export function usePhase3({ onNext }: IUsePhase3Props) {
   const { api } = useAPIState();
-  const { uploadInfo, setUploadInfo } = useAppState();
+  const { uploadInfo, setUploadInfo, host } = useAppState();
   const [page, setPage] = useState<number>(defaultPage);
   const [totalPages, setTotalPages] = useState<number>(defaultPage);
 
@@ -32,12 +32,12 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
       onSuccess(uploadData) {
         logAmplitudeEvent('RECORDS', {
           type: 'invalid',
-          host: location.host,
+          host,
           records: uploadData.invalidRecords,
         });
         logAmplitudeEvent('RECORDS', {
           type: 'valid',
-          host: location.host,
+          host,
           records: uploadData.totalRecords - uploadData.invalidRecords,
         });
         setUploadInfo(uploadData);

diff --git a/apps/widget/src/store/app.context.tsx b/apps/widget/src/store/app.context.tsx
@@ -11,7 +11,7 @@ interface AppContextProviderProps
 
 const AppContext = createContext<IAppStore | null>(null);
 
-const AppContextProvider = ({ children, primaryColor, title, data, schema, output }: AppContextProviderProps) => {
+const AppContextProvider = ({ children, primaryColor, title, data, schema, output, host }: AppContextProviderProps) => {
   const [importConfig, setImportConfig] = useState<IImportConfig>({} as IImportConfig);
   const [templateInfo, setTemplateInfo] = useState<ITemplate>({} as ITemplate);
   const [uploadInfo, setUploadInfo] = useState<IUpload>({} as IUpload);
@@ -26,6 +26,7 @@ const AppContextProvider = ({ children, primaryColor, title, data, schema, outpu
     <AppContext.Provider
       value={{
         title,
+        host,
         templateInfo,
         importConfig,
         setImportConfig,

diff --git a/apps/widget/src/types/store.types.ts b/apps/widget/src/types/store.types.ts
@@ -19,6 +19,7 @@ export interface IAppStore {
   templateInfo: ITemplate;
   uploadInfo: IUpload;
   reset: () => void;
+  host: string;
   primaryColor: string;
   schema?: string;
   output?: string;

diff --git a/libs/embed/src/embed.ts b/libs/embed/src/embed.ts
@@ -78,7 +78,10 @@ class Impler {
     this.iframe?.contentWindow?.postMessage(
       {
         type: EventTypesEnum.SHOW_WIDGET,
-        value: payload,
+        value: {
+          ...payload,
+          host: location.host,
+        },
       },
       '*'
     );

diff --git a/libs/shared/src/types/widget/widget.types.ts b/libs/shared/src/types/widget/widget.types.ts
@@ -2,6 +2,7 @@ export interface IInitPayload {
   accessToken?: string;
 }
 export interface IShowPayload {
+  host: string;
   extra?: string;
   templateId?: string;
   authHeaderValue?: string;