From da11feb39bfb9c8817ca09e35bc481ea18fe52c8 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 10 Apr 2023 15:44:06 +0530
Subject: [PATCH] feat: one-click codepen for widget configuration (#6865)

* feat: allow codepen in code

* feat: enable codepen in config

* feat: update codepen title

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/javascript/dashboard/components/Code.vue  | 49 ++++++++++++++++---
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 .../inbox/settingsPage/ConfigurationPage.vue  |  7 ++-
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/Code.vue b/app/javascript/dashboard/components/Code.vue
index f348114a6..269311c2d 100644
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,8 +1,23 @@
 <template>
   <div class="code--container">
-    <button class="button small button--copy-code" @click="onCopy">
-      {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-    </button>
+    <div class="code--action-area">
+      <form
+        v-if="enableCodePen"
+        class="code--codeopen-form"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+
+        <button type="submit" class="button secondary tiny">
+          {{ $t('COMPONENTS.CODE.CODEPEN') }}
+        </button>
+      </form>
+      <button class="button secondary tiny" @click="onCopy">
+        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+      </button>
+    </div>
     <highlightjs v-if="script" :language="lang" :code="script" />
   </div>
 </template>
@@ -21,6 +36,24 @@ export default {
       type: String,
       default: 'javascript',
     },
+    enableCodePen: {
+      type: Boolean,
+      default: false,
+    },
+    codepenTitle: {
+      type: String,
+      default: 'Chatwoot Codepen',
+    },
+  },
+  computed: {
+    codepenScriptValue() {
+      const lang = this.lang === 'javascript' ? 'js' : this.lang;
+      return JSON.stringify({
+        title: this.codepenTitle,
+        private: true,
+        [lang]: this.script,
+      });
+    },
   },
   methods: {
     async onCopy(e) {
@@ -37,10 +70,14 @@ export default {
   position: relative;
   text-align: left;
 
-  .button--copy-code {
-    margin-top: 0;
+  .code--action-area {
+    top: var(--space-small);
     position: absolute;
-    right: 0;
+    right: var(--space-small);
+  }
+
+  .code--codeopen-form {
+    display: inline-block;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index a37884db8..48d93288e 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -160,6 +160,7 @@
   "COMPONENTS": {
     "CODE": {
       "BUTTON_TEXT": "Copy",
+      "CODEPEN": "Open in CodePen",
       "COPY_SUCCESSFUL": "Copied to clipboard"
     },
     "SHOW_MORE_BLOCK": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index 2206ae7d1..24cea1732 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -21,7 +21,12 @@
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
       >
-        <woot-code :script="inbox.web_widget_script" />
+        <woot-code
+          :script="inbox.web_widget_script"
+          lang="html"
+          :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
+          :enable-code-pen="true"
+        />
       </settings-section>
 
       <settings-section