From f757e574002b4afcd0e24b7b5a5b1efcd7127890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eddybrando=20V=C3=A1squez?= <eddybrando.vasquez@gmail.com>
Date: Thu, 7 Sep 2023 17:58:34 +0200
Subject: [PATCH] feat: add Alchemer Beacon (#3453)

* feat: add Alchemer Beacon

* feat(alchemer): prevent full width survey

* style: fix lint

* chore: remove Alchemer styles

* feat(alchemer): popup trigger "feedback" tab

* feat(alchemer): popup trigger "feedback" tab

* feat(alchemer): hide "feedback" button after click

* feat(alchemer): style modal

* Revert "feat(alchemer): style modal"

This reverts commit c7b4aac7b6fcc4b39323252c2fd7b10071f9a7a6.

* feat(alchemer): style modal

* fix(alchemer): modal width in small viewports

* fix(alchemer): modal width in small viewports

---------

Co-authored-by: Randy <randytolentino@ibm.com>
---
 ARCHITECTURE.md                           |  4 +++
 assets/scss/_alchemer.scss                | 14 ++++++++
 assets/scss/main.scss                     |  1 +
 components/Ui/UiAlchemerSurveyTrigger.vue | 42 +++++++++++++++++++++++
 layouts/default.vue                       |  1 +
 nuxt.config.ts                            | 12 +++++++
 6 files changed, 74 insertions(+)
 create mode 100644 assets/scss/_alchemer.scss
 create mode 100644 components/Ui/UiAlchemerSurveyTrigger.vue

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 4320f26548..4e42ac667e 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -31,6 +31,10 @@ We fetch content from [Airtable](https://airtable.com/) during our builds for pr
 
 This content is then stored in JSON files and used to be displayed in the website.
 
+### Alchemer
+
+We use [Alchemer](https://www.alchemer.com/) to get feedback from our visitors.
+
 ### Carbon Web Components
 
 We use web components from the [Carbon Web Components](https://github.com/carbon-design-system/carbon-for-ibm-dotcom) component library.
diff --git a/assets/scss/_alchemer.scss b/assets/scss/_alchemer.scss
new file mode 100644
index 0000000000..2c13e9dfd1
--- /dev/null
+++ b/assets/scss/_alchemer.scss
@@ -0,0 +1,14 @@
+.sg-b-p {
+  box-shadow: 0 0 2rem rgb(0 0 0 / 50%);
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-height: 90vh;
+  max-width: 32rem;
+  width: auto;
+
+  &.sg-b-p-s {
+    left: 5% !important;
+    right: 5% !important;
+  }
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 4ad0899e94..3433244ed7 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -3,6 +3,7 @@
 );
 @use "@carbon/styles/scss/reset";
 @use "carbon";
+@use "./_alchemer";
 @use "./_typography";
 @use "./components";
 @include carbon.grid-css-grid;
diff --git a/components/Ui/UiAlchemerSurveyTrigger.vue b/components/Ui/UiAlchemerSurveyTrigger.vue
new file mode 100644
index 0000000000..163b329781
--- /dev/null
+++ b/components/Ui/UiAlchemerSurveyTrigger.vue
@@ -0,0 +1,42 @@
+<template>
+  <!-- The ID `alchemer-survey-trigger` is required to trigger the popup -->
+  <bx-btn
+    :id="buttonId"
+    class="ui-alchemer-survey-trigger"
+    size="sm"
+    type="button"
+    @click="hideButton"
+  >
+    <div class="ui-alchemer-survey-trigger__label">Feedback</div>
+  </bx-btn>
+</template>
+
+<script setup lang="ts">
+const buttonId = "alchemer-survey-trigger";
+
+function hideButton() {
+  const button = document.getElementById(buttonId);
+  if (button) {
+    button.style.display = "none";
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.ui-alchemer-survey-trigger {
+  &::part(button) {
+    padding: carbon.$spacing-04 carbon.$spacing-02;
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: rotate(180deg);
+    z-index: 300;
+  }
+
+  &__label {
+    writing-mode: vertical-rl;
+  }
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 1867d41d82..fbe59e9b2f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,6 +8,7 @@
       <slot />
     </main>
     <LayoutFooter />
+    <UiAlchemerSurveyTrigger />
   </div>
 </template>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d83e13b278..a0d11bcd1f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -34,6 +34,18 @@ export default defineNuxtConfig({
 
   css: ["~/assets/scss/main.scss"],
 
+  app: {
+    head: {
+      script: [
+        // Alchemer Beacon
+        {
+          children: `(function(d,e,j,h,f,c,b){d.SurveyGizmoBeacon=f;d[f]=d[f]||function(){(d[f].q=d[f].q||[]).push(arguments)};c=e.createElement(j),b=e.getElementsByTagName(j)[0];c.async=1;c.src=h;b.parentNode.insertBefore(c,b)})(window,document,'script','//d2bnxibecyz4h5.cloudfront.net/runtimejs/intercept/intercept.js','sg_beacon');sg_beacon('init','MzI0MTk0LTBjOWMxOGI3ZDVkMTg3ZGE0MmQ2ZjNkMTg0NDZjYjkxMTdkNDExMWFkYzQ0ZGIxNGY4');`,
+          body: true,
+        },
+      ],
+    },
+  },
+
   hooks: {
     "build:before": async () => {
       if (IS_PRODUCTION || GENERATE_CONTENT) {