feat: Deprecate extra; users must pass it via showWidget() in future Impler versions

Author: thisismayuresh

apps/queue-manager/src/consumers/send-bubble-data.consumer.ts

@@ -202,7 +202,7 @@ export class SendBubbleDataConsumer extends BaseConsumer {
       const emailContents = this.emailService.getEmailContent({
         type: 'ERROR_SENDING_BUBBLE_DATA',
         data: {
-          error: JSON.stringify(data.error, null, 2).replace(/\\+"/g, '"'),
+          error: JSON.stringify(data.error, null, 2)?.replace(/\\+"/g, '"') ?? 'Error while sending data to Bubble',
           importName,
           time: data.callDate.toString(),
           bubbleAppUrl: bubbleData.bubbleAppUrl,

apps/web/pages/imports/[id].tsx

@@ -56,7 +56,6 @@ function ImportDetails() {
     accessToken: profileInfo?.accessToken,
     onUploadComplete: onSpreadsheetImported,
     authHeaderValue: webhookConfig.authHeaderValue || '',
-    extra: webhookConfig.extra || '',
     appearance: {
       widget: {
         backgroundColor: '#1c1917',
@@ -97,7 +96,9 @@ function ImportDetails() {
           onConfigSubmit={(config: { authHeaderValue?: string; extra?: string }) => {
             setWebhookConfig(config);
             modals.closeAll();
-            showWidget();
+            showWidget({
+              extra: config.extra || '',
+            });
             setTimeout(() => {}, 100);
           }}
         />

packages/client/src/types.ts

@@ -223,6 +223,11 @@ export interface IUseImplerProps {
    * In future versions, the `primaryColor` property will be moved under `appearance` object.
    */
   primaryColor?: string;
+  /**
+   * @deprecated Use the `extra` parameter in `showWidget()` instead.
+   * Example: `showWidget({ extra: { your: 'data' } })`
+   * In future versions, the `extra` property will be removed and `showWidget({ extra: { your: 'data' } })` will be the only way to pass extra data.
+   */
   extra?: string | Record<string, any>;
   config?: WidgetConfig;
   appearance?: AppearanceConfig;

packages/react/src/hooks/useImpler.ts

@@ -9,7 +9,7 @@ export function useImpler({
   authHeaderValue,
   title,
   texts,
-  extra,
+  extra: defaultExtra,
   config,
   maxRecords,
   appearance,
@@ -85,7 +85,8 @@ export function useImpler({
     sampleFile,
     schema,
     output,
-  }: Pick<IShowWidgetProps, 'colorScheme' | 'data' | 'schema' | 'output' | 'sampleFile'> = {}) => {
+    extra = defaultExtra,
+  }: Pick<IShowWidgetProps, 'colorScheme' | 'data' | 'schema' | 'output' | 'sampleFile' | 'extra'> = {}) => {
     if (window.impler && isImplerInitiated) {
       const payload: IShowWidgetProps & { uuid: string; host: string } = {
         uuid,