Usage in Web

How to embed hybrid hh-fwb or nuxt project in web client (new-ui).

Step 1 : Create function for setup data hybrid

create function listenDoSetupData() in component that you want to use for the hybrid. Then after that, call function listenFromPlatform() in function listenDoSetupData(), but you need import the function import listenFromPlatform from "~/composables/hybrid/platformBridge", put it on top.

<script lang="ts" setup>
import { listenFromPlatform } from "~/composables/hybrid/platformBridge";

...
</script>

After call function listenFromPlatform() in the listenDoSetupData(), need send two params in function listenFromPlatform(), that is eventName and callback() function. And then call event EVENT_DO_SETUP_DATA which is in eventManager.ts and put in then eventName in the function listenFromPlatform().

<script lang="ts" setup>
import { listenFromPlatform } from "~/composables/hybrid/platformBridge";
import { EVENT_DO_SETUP_DATA } from "~/composables/hybrid/eventManager";

function listenDoSetupData() {
  listenFromPlatform({
    eventName: EVENT_DO_SETUP_DATA,
    callback: () => {},
  });
}
</script>

Step 2 : How to call function setup data hybrid

After finishing create function listenDoSetupData() and call listenFromPlatform() inside it. call function listenDoSetupData() in the function eventManager. Function eventManager need call event name EVENT_ON_APP_BRIDGE_READY, so import event name EVENT_ON_APP_BRIDGE_READY the first, and put in function eventManager.

<script lang="ts" setup>
import { listenFromPlatform } from "~/composables/hybrid/platformBridge";
import {
  eventManager,
  EVENT_DO_SETUP_DATA,
  EVENT_ON_APP_BRIDGE_READY,
} from "~/composables/hybrid/eventManager";

function listenDoSetupData() {
  listenFromPlatform({
    eventName: EVENT_DO_SETUP_DATA,
    callback: () => {},
  });
}

eventManager.on(EVENT_ON_APP_BRIDGE_READY, () => {
  listenDoSetupData();
});
</script>

Step 3 : How to embed event hybrid in new-ui

After create event in hybrid, we can embed hybrid using event that was made. The method can be seen in the code below.

<template>
  <iframe
    :id="iframeId"
    :src="iframeSrc"
    width="100%"
    class="w-[80vh]"
  ></iframe>
</template>

<script>
import { framePostMessage } from "~/helper/frameCommunication";
import { ref } from "@vue/composition-api";
import { framePostMessage } from "@/helper/frameCommunication";
import qs from "qs";
import humps from "humps";

export default {
  name: "EmbedHybrid",
  setup() {
    const iframeLoaded = ref(false);
    const iframe = ref("");
    const iframeSrc = ref("");
    return {
      iframe,
      iframeId: "IframeHybridId",
      iframeLoaded,
      iframeSrc,
    };
  },
  watch: {
    iframeLoaded() {
      setTimeout(() => {
        this.handleDoSetupData();
      }, 500);
    },
  },
  mounted() {
    this.buildLink();
    this.iframeOnLoad();
  },
  computed: {
    frameParam() {
      return qs.stringify(
        humps.decamelizeKeys({
          embed: true,
          // debug: true,
          clientType: "web",
          lang: "en",
        })
      );
    },
  },
  methods: {
    buildLink() {
      const domain = "localhost:3000";
      let url = `${domain}/hybrid-url`;
      this.iframeSrc = `${url}?${this.frameParam}`;
    },
    startListenPostMessage() {
      window.addEventListener("message", this.postMessageHandler, {
        passive: true,
      });
    },
    stopListenPostMessage() {
      window.removeEventListener("message", this.postMessageHandler);
    },
    handleDoSetupData(data) {
      const message = {
        provider: "hungryhub",
        eventName: "doSetupData",
        payload: "",
      };

      framePostMessage(this.iframeId, message);
    },
  },
};
</script>

Step 4 : How to testing hybrid after embed hybrid in new-ui

You can using url in https://hhstaging.hungryhub.com, after that taket the link netlify in your PR hh-fwb or hh-nuxt. Example https://deploy-preview-358--hh-nuxt-staging.netlify.app.

After that, encrypt the link netlify using method btoa function in javascript, example btoa('https://deploy-preview-358--hh-nuxt-staging.netlify.app'), you can encrypt in the console chrome.

If the finish encrypt the link, copy and paste the encrypt link in the param nuxt_domain or fwb_domain url https://hhstaging.hungryhub.com, the result will be https://hhstaging.hungryhub.com?nuxt_domain=aHR0cHM6Ly9kZXBsb3ktcHJldmlldy0zNTgtLWhoLW51eHQtc3RhZ2luZy5uZXRsaWZ5LmFwcA==. And then you can use that link in you browser.