feat: mutations and small refactor in share req

packages/hoppscotch-common/src/components/share/CustomizeModal.vue

@@ -205,6 +205,35 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  embedOptions: {
+    type: Object as PropType<EmbedOption>,
+    default: () => ({
+      selectedTab: "parameters",
+      tabs: [
+        {
+          value: "parameters",
+          label: "shared_requests.parameters",
+          enabled: true,
+        },
+        {
+          value: "body",
+          label: "shared_requests.body",
+          enabled: true,
+        },
+        {
+          value: "headers",
+          label: "shared_requests.headers",
+          enabled: true,
+        },
+        {
+          value: "authorization",
+          label: "shared_requests.authorization",
+          enabled: false,
+        },
+      ],
+      theme: "system",
+    }),
+  },
 })
 
 const emit = defineEmits<{
@@ -213,6 +242,7 @@ const emit = defineEmits<{
     request: {
       sharedRequestID: string | undefined
       content: string | undefined
+      type: string | undefined
     }
   ): void
   (e: "hide-modal"): void
@@ -220,6 +250,7 @@ const emit = defineEmits<{
 }>()
 
 const selectedWidget = useVModel(props, "modelValue")
+const embedOptions = useVModel(props, "embedOptions")
 
 type WidgetID = "embed" | "button" | "link"
 
@@ -254,34 +285,6 @@ type EmbedOption = {
   }[]
   theme: "light" | "dark" | "system"
 }
-
-const embedOptions = ref<EmbedOption>({
-  selectedTab: "parameters",
-  tabs: [
-    {
-      value: "parameters",
-      label: t("tab.parameters"),
-      enabled: true,
-    },
-    {
-      value: "body",
-      label: t("tab.body"),
-      enabled: true,
-    },
-    {
-      value: "headers",
-      label: t("tab.headers"),
-      enabled: true,
-    },
-    {
-      value: "authorization",
-      label: t("tab.authorization"),
-      enabled: true,
-    },
-  ],
-  theme: "system",
-})
-
 const embedThemeIcon = computed(() => {
   if (embedOptions.value.theme === "system") {
     return IconMonitor
@@ -355,12 +358,13 @@ const linkVariants: LinkVariant[] = [
 const baseURL = import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
 
 const copyEmbed = () => {
-  const options = embedOptions.value
-  const enabledEmbedOptions = options.tabs
-    .filter((tab) => tab.enabled)
-    .map((tab) => tab.value)
-    .toString()
-  return `<iframe src="${baseURL}/e/${props.request?.id}/${enabledEmbedOptions}' style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'></iframe>`
+  //const options = embedOptions.value
+  // const enabledEmbedOptions = options.tabs
+  //   .filter((tab) => tab.enabled)
+  //   .map((tab) => tab.value)
+  //   .toString()
+  //return `<iframe src="${baseURL}/e/${props.request?.id}' style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'></iframe>`
+  return `${baseURL}/e/${props.request?.id} `
 }
 
 const copyButton = (
@@ -410,7 +414,11 @@ const copyContent = ({
   } else {
     content = copyEmbed()
   }
-  const copyContent = { sharedRequestID: props.request?.id, content }
+  const copyContent = {
+    sharedRequestID: props.request?.id,
+    content,
+    type: widget,
+  }
   emit("copy-shared-request", copyContent)
 }