From 3ea54065b13d137d1607d3777f4c5250c1404d52 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 5 Oct 2023 08:34:21 +0530
Subject: [PATCH] feat: Upgrade prompt for help center (#8010)

Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 app/javascript/dashboard/App.vue              |   4 +-
 .../assets/scss/widgets/_buttons.scss         |  12 +-
 .../dashboard/components/layout/Sidebar.vue   |   8 +-
 .../layout/config/sidebarItems/primaryMenu.js |   1 +
 app/javascript/dashboard/constants/globals.js |   1 +
 .../dashboard/i18n/locale/en/helpCenter.json  |  27 ++++
 .../dashboard/i18n/locale/en/settings.json    |   2 +-
 .../components/HelpCenterLayout.vue           |  28 +++-
 .../helpcenter/components/UpgradePage.vue     | 135 ++++++++++++++++++
 .../components/FluentIcon/DashboardIcon.vue   |   5 +
 .../shared/components/FluentIcon/Icon.vue     |  22 +++
 .../shared/components/FluentIcon/Index.vue    |   5 +
 .../FluentIcon/dashboard-icons.json           |  22 +++
 13 files changed, 255 insertions(+), 17 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 919167c2a..6fd470fcf 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    v-if="!authUIFlags.isFetching"
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
     class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="!accountUIFlags.isFetchingItem && currentAccountId">
+    <template v-if="currentAccountId">
       <payment-pending-banner />
       <upgrade-banner />
     </template>
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index bcdc6176f..1b6166a18 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -34,26 +34,26 @@
   }
 
   &.hollow {
-    @apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
       @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
     }
 
     &:hover {
-      @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
+      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
 
       &.secondary {
         @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
@@ -68,7 +68,7 @@
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
       }
     }
   }
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 0a4c2df56..1290ea602 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -11,7 +11,6 @@
       @key-shortcut-modal="toggleKeyShortcutModal"
       @open-notification-panel="openNotificationPanel"
     />
-
     <secondary-sidebar
       v-if="showSecondarySidebar"
       :class="sidebarClassName"
@@ -114,7 +113,12 @@ export default {
         if (!isAvailableForTheUser) {
           return false;
         }
-
+        if (
+          menuItem.alwaysVisibleOnChatwootInstances &&
+          !this.isACustomBrandedInstance
+        ) {
+          return true;
+        }
         if (menuItem.featureFlag) {
           return this.isFeatureEnabledonAccount(
             this.accountId,
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 05d545634..294b7eb7c 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -42,6 +42,7 @@ const primaryMenuItems = accountId => [
     key: 'helpcenter',
     label: 'HELP_CENTER.TITLE',
     featureFlag: FEATURE_FLAGS.HELP_CENTER,
+    alwaysVisibleOnChatwootInstances: true,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
     roles: ['administrator'],
diff --git a/app/javascript/dashboard/constants/globals.js b/app/javascript/dashboard/constants/globals.js
index 2ef50e732..d0e00dbe7 100644
--- a/app/javascript/dashboard/constants/globals.js
+++ b/app/javascript/dashboard/constants/globals.js
@@ -28,6 +28,7 @@ export default {
     EXPANDED: 'expanded',
   },
   DOCS_URL: '//www.chatwoot.com/docs/product/',
+  HELP_CENTER_DOCS_URL: '//www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
   SMALL_SCREEN_BREAKPOINT: 1024,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 65e80ad64..72f642584 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -425,6 +425,33 @@
           "ERROR_MESSAGE": "Unable to delete category"
         }
       }
+    },
+    "UPGRADE_PAGE": {
+      "TITLE": "Help Center",
+      "DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Upgrade your subscription to enable this feature.",
+      "SELF_HOSTED_DESCRIPTION": "Create user-friendly self-service portals. Help your users to access the articles and get support 24/7. Please contact your administrator to enable this feature.",
+      "BUTTON": {
+        "LEARN_MORE": "Learn more",
+        "UPGRADE": "Upgrade"
+      },
+      "FEATURES": {
+        "PORTALS": {
+          "TITLE": "Multiple portals",
+          "DESCRIPTION": "Create multiple help center portals for different products using the same account."
+        },
+        "LOCALES": {
+          "TITLE": "Full support for locales",
+          "DESCRIPTION": "Localize the portal in your language. We support all locales and allow translations for every article."
+        },
+        "SEO": {
+          "TITLE": "SEO-friendly design",
+          "DESCRIPTION": "Customize your meta tags to improve your visibility on search engines with our SEO-friendly pages."
+        },
+        "API": {
+          "TITLE": "Full API support",
+          "DESCRIPTION": "Use the portal as a headless CMS with third party front-end frameworks using our APIs."
+        }
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 39e5a9a14..dd6dac00d 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -238,7 +238,7 @@
     "REPORTS_OVERVIEW": "Overview",
     "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
     "HELP_CENTER": {
-      "TITLE": "Help Center (Beta)",
+      "TITLE": "Help Center",
       "ALL_ARTICLES": "All Articles",
       "MY_ARTICLES": "My Articles",
       "DRAFT": "Draft",
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 2f87361f3..1c7c9a84c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -19,6 +19,7 @@
       @open-modal="onClickOpenAddCategoryModal"
     />
     <section
+      v-if="isHelpCenterEnabled"
       class="flex h-full min-h-0 overflow-hidden flex-1 px-0 bg-white dark:bg-slate-900"
     >
       <router-view />
@@ -53,11 +54,12 @@
         @cancel="onClickCloseAddCategoryModal"
       />
     </section>
+    <upgrade-page v-else />
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-
+import UpgradePage from './UpgradePage';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -70,17 +72,19 @@ import NotificationPanel from 'dashboard/routes/dashboard/notifications/componen
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import portalMixin from '../mixins/portalMixin';
 import AddCategory from '../pages/categories/AddCategory.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   components: {
-    Sidebar,
-    HelpCenterSidebar,
+    AccountSelector,
+    AddCategory,
     CommandBar,
-    WootKeyShortcutModal,
+    HelpCenterSidebar,
     NotificationPanel,
     PortalPopover,
-    AddCategory,
-    AccountSelector,
+    Sidebar,
+    UpgradePage,
+    WootKeyShortcutModal,
   },
   mixins: [portalMixin, uiSettingsMixin],
   data() {
@@ -102,13 +106,25 @@ export default {
       categories: 'categories/allCategories',
       meta: 'portals/getMeta',
       isFetching: 'portals/isFetchingPortals',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
+
+    isHelpCenterEnabled() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.HELP_CENTER
+      );
+    },
     isSidebarOpen() {
       const { show_help_center_secondary_sidebar: showSecondarySidebar } =
         this.uiSettings;
       return showSecondarySidebar;
     },
     showHelpCenterSidebar() {
+      if (!this.isHelpCenterEnabled) {
+        return false;
+      }
+
       return this.portals.length === 0 ? false : this.isSidebarOpen;
     },
     selectedPortal() {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
new file mode 100644
index 000000000..d16eb87e3
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full h-full max-w-full overflow-auto bg-white dark:bg-slate-900"
+  >
+    <div class="flex flex-col justify-start sm:justify-center gap-6">
+      <div class="flex flex-col gap-1.5 items-start sm:items-center">
+        <h1
+          class="text-slate-900 dark:text-white text-left sm:text-center text-4xl sm:text-5xl mb-6 font-semibold"
+        >
+          {{ $t('HELP_CENTER.UPGRADE_PAGE.TITLE') }}
+        </h1>
+        <p
+          class="max-w-2xl text-base font-normal leading-6 text-left sm:text-center text-slate-700 dark:text-slate-200"
+        >
+          {{
+            isOnChatwootCloud
+              ? $t('HELP_CENTER.UPGRADE_PAGE.DESCRIPTION')
+              : $t('HELP_CENTER.UPGRADE_PAGE.SELF_HOSTED_DESCRIPTION')
+          }}
+        </p>
+      </div>
+      <div
+        v-if="isOnChatwootCloud"
+        class="flex flex-row gap-3 justify-start items-center sm:justify-center"
+      >
+        <woot-button
+          size="medium"
+          variant="hollow"
+          color-scheme="primary"
+          @click="openHelpCenterDocs"
+        >
+          {{ $t('HELP_CENTER.UPGRADE_PAGE.BUTTON.LEARN_MORE') }}
+        </woot-button>
+        <woot-button
+          size="medium"
+          color-scheme="primary"
+          @click="openBillingPage"
+        >
+          {{ $t('HELP_CENTER.UPGRADE_PAGE.BUTTON.UPGRADE') }}
+        </woot-button>
+      </div>
+    </div>
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-16 w-full max-w-2xl overflow-auto"
+    >
+      <div
+        v-for="feature in upgradeFeature"
+        :key="feature.key"
+        class="w-64 min-w-full"
+      >
+        <div class="flex gap-2 flex-row">
+          <div>
+            <fluent-icon
+              :icon="feature.icon"
+              icon-lib="lucide"
+              :size="26"
+              class="mt-px text-slate-800 dark:text-slate-25"
+            />
+          </div>
+          <div>
+            <h5 class="font-semibold text-lg text-slate-800 dark:text-slate-25">
+              {{ feature.title }}
+            </h5>
+            <p class="text-sm leading-6 text-slate-700 dark:text-slate-100">
+              {{ feature.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import wootConstants from 'dashboard/constants/globals';
+export default {
+  data() {
+    return {
+      helpCenterDocsURL: wootConstants.HELP_CENTER_DOCS_URL,
+      upgradeFeature: [
+        {
+          key: 1,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.TITLE'),
+          icon: 'book-copy',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.PORTALS.DESCRIPTION'
+          ),
+        },
+        {
+          key: 2,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.TITLE'),
+          icon: 'globe-line',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.LOCALES.DESCRIPTION'
+          ),
+        },
+        {
+          key: 3,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.TITLE'),
+          icon: 'heart-handshake',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.SEO.DESCRIPTION'
+          ),
+        },
+        {
+          key: 4,
+          title: this.$t('HELP_CENTER.UPGRADE_PAGE.FEATURES.API.TITLE'),
+          icon: 'search-check',
+          description: this.$t(
+            'HELP_CENTER.UPGRADE_PAGE.FEATURES.API.DESCRIPTION'
+          ),
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', // Pending change text
+    }),
+  },
+  methods: {
+    openBillingPage() {
+      this.$router.push({
+        name: 'billing_settings_index',
+        params: { accountId: this.accountId },
+      });
+    },
+    openHelpCenterDocs() {
+      window.open(this.helpCenterDocsURL, '_blank');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index e6f239303..05369ed1e 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -5,6 +5,7 @@
     :type="type"
     :icons="icons"
     :view-box="viewBox"
+    :icon-lib="iconLib"
   />
 </template>
 <script>
@@ -33,6 +34,10 @@ export default {
       type: String,
       default: '0 0 24 24',
     },
+    iconLib: {
+      type: String,
+      default: 'fluent',
+    },
   },
   data() {
     return { icons };
diff --git a/app/javascript/shared/components/FluentIcon/Icon.vue b/app/javascript/shared/components/FluentIcon/Icon.vue
index 6e4fbda73..da01f3397 100644
--- a/app/javascript/shared/components/FluentIcon/Icon.vue
+++ b/app/javascript/shared/components/FluentIcon/Icon.vue
@@ -1,5 +1,6 @@
 <template>
   <svg
+    v-if="iconLib === 'fluent'"
     :width="size"
     :height="size"
     fill="none"
@@ -13,6 +14,23 @@
       fill="currentColor"
     />
   </svg>
+  <svg
+    v-else
+    :width="size"
+    :height="size"
+    fill="none"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g v-for="(pathData, index) in pathSource" :key="index">
+      <path
+        :key="pathData"
+        :d="pathData"
+        stroke="currentColor"
+        stroke-width="1.66667"
+      />
+    </g>
+  </svg>
 </template>
 <script>
 export default {
@@ -37,6 +55,10 @@ export default {
       type: String,
       default: '0 0 24 24',
     },
+    iconLib: {
+      type: String,
+      default: 'fluent',
+    },
   },
 
   computed: {
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index 2b1476a04..d63a0c56b 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -5,6 +5,7 @@
     :type="type"
     :icons="icons"
     :view-box="viewBox"
+    :icon-lib="iconLib"
   />
 </template>
 <script>
@@ -33,6 +34,10 @@ export default {
       type: String,
       default: '0 0 24 24',
     },
+    iconLib: {
+      type: String,
+      default: 'fluent',
+    },
   },
   data() {
     return { icons };
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 8dd57513d..07d49eb48 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -224,5 +224,27 @@
     "M6 3.99988L5.728 4.01854C5.24919 4.08427 4.81038 4.32115 4.49271 4.68539C4.17505 5.04962 4.00002 5.51656 4 5.99986V7.99984H2L1.728 8.01851C1.24919 8.08423 0.810374 8.32112 0.492709 8.68535C0.175044 9.04959 2.04617e-05 9.51653 0 9.99982L0.0186659 10.2718C0.0843951 10.7506 0.321281 11.1894 0.685517 11.5071C1.04975 11.8248 1.5167 11.9998 2 11.9998H4V13.9998L4.01867 14.2718C4.0844 14.7506 4.32128 15.1894 4.68551 15.5071C5.04975 15.8247 5.5167 15.9997 6 15.9998L6.272 15.9811C7.248 15.8478 8 15.0131 8 13.9998V11.9998H10L10.272 11.9811C11.248 11.8478 12 11.0131 12 9.99982L11.9813 9.72782C11.9156 9.24902 11.6787 8.81021 11.3145 8.49255C10.9502 8.17489 10.4833 7.99986 10 7.99984H8V5.99986L7.98133 5.72786C7.9156 5.24906 7.67872 4.81025 7.31448 4.49258C6.95024 4.17492 6.4833 3.9999 6 3.99988Z",
     "M14 0L13.9093 0.00622212C13.7497 0.0281315 13.6035 0.107093 13.4976 0.228504C13.3917 0.349915 13.3333 0.505562 13.3333 0.666661V1.33332H12.6667L12.576 1.33954C12.4164 1.36145 12.2701 1.44041 12.1642 1.56183C12.0584 1.68324 12 1.83888 12 1.99998L12.0062 2.09065C12.0281 2.25025 12.1071 2.39652 12.2285 2.50241C12.3499 2.60829 12.5056 2.66664 12.6667 2.66664H13.3333V3.3333L13.3396 3.42397C13.3615 3.58357 13.4404 3.72984 13.5618 3.83573C13.6833 3.94162 13.8389 3.99996 14 3.99996L14.0907 3.99374C14.416 3.9493 14.6667 3.67108 14.6667 3.3333V2.66664H15.3333L15.424 2.66042C15.7493 2.61598 16 2.33776 16 1.99998L15.9938 1.90932C15.9719 1.74971 15.8929 1.60345 15.7715 1.49756C15.6501 1.39167 15.4944 1.33333 15.3333 1.33332H14.6667V0.666661L14.6605 0.575995C14.6385 0.416393 14.5596 0.270123 14.4382 0.164236C14.3168 0.0583485 14.1611 6.79363e-06 14 0Z",
     "M16 12.0001L15.8187 12.0125C15.4995 12.0563 15.2069 12.2143 14.9951 12.4571C14.7834 12.6999 14.6667 13.0112 14.6667 13.3334V14.6667H13.3333L13.152 14.6792C12.8328 14.723 12.5403 14.8809 12.3285 15.1237C12.1167 15.3665 12 15.6778 12 16L12.0124 16.1814C12.0563 16.5006 12.2142 16.7931 12.457 17.0049C12.6998 17.2167 13.0111 17.3333 13.3333 17.3334H14.6667V18.6667L14.6791 18.848C14.7229 19.1672 14.8809 19.4598 15.1237 19.6715C15.3665 19.8833 15.6778 20 16 20L16.1813 19.9876C16.832 19.8987 17.3333 19.3422 17.3333 18.6667V17.3334H18.6667L18.848 17.3209C19.4987 17.232 20 16.6756 20 16L19.9876 15.8187C19.9437 15.4995 19.7858 15.207 19.543 14.9952C19.3002 14.7834 18.9889 14.6667 18.6667 14.6667H17.3333V13.3334L17.3209 13.1521C17.2771 12.8329 17.1191 12.5403 16.8763 12.3285C16.6335 12.1168 16.3222 12.0001 16 12.0001Z"
+  ],
+
+  "book-copy-outline": [
+    "M3.66675 15.3334V5.33341C3.66675 4.89139 3.84234 4.46746 4.1549 4.1549C4.46746 3.84234 4.89139 3.66675 5.33341 3.66675H14.5001",
+    "M6.16675 13.6667H5.33341C4.89139 13.6667 4.46746 13.8423 4.1549 14.1549C3.84234 14.4675 3.66675 14.8914 3.66675 15.3334C3.66675 15.7754 3.84234 16.1994 4.1549 16.5119C4.46746 16.8245 4.89139 17.0001 5.33341 17.0001H6.16675",
+    "M20.3333 17H11.1667C10.7246 17 10.3007 17.1756 9.98816 17.4882C9.6756 17.8007 9.5 18.2246 9.5 18.6667M9.5 18.6667C9.5 19.1087 9.6756 19.5326 9.98816 19.8452C10.3007 20.1577 10.7246 20.3333 11.1667 20.3333H20.3333V7H11.1667C10.7246 7 10.3007 7.17559 9.98816 7.48816C9.6756 7.80072 9.5 8.22464 9.5 8.66667V18.6667Z"
+  ],
+  "globe-line-outline": [
+    "M12.0001 20.3334C16.6025 20.3334 20.3334 16.6025 20.3334 12.0001C20.3334 7.39771 16.6025 3.66675 12.0001 3.66675C7.39771 3.66675 3.66675 7.39771 3.66675 12.0001C3.66675 16.6025 7.39771 20.3334 12.0001 20.3334Z",
+    "M3.66675 12H20.3334",
+    "M12.0001 3.66675C14.0845 5.94871 15.269 8.91011 15.3334 12.0001C15.269 15.0901 14.0845 18.0515 12.0001 20.3334C9.91568 18.0515 8.73112 15.0901 8.66675 12.0001C8.73112 8.91011 9.91568 5.94871 12.0001 3.66675Z"
+  ],
+  "heart-handshake-outline": [
+    "M17.8334 13.6667C19.0751 12.45 20.3334 10.9917 20.3334 9.08333C20.3334 7.86776 19.8505 6.70197 18.991 5.84243C18.1314 4.98289 16.9657 4.5 15.7501 4.5C14.2834 4.5 13.2501 4.91667 12.0001 6.16667C10.7501 4.91667 9.71675 4.5 8.25008 4.5C7.03451 4.5 5.86872 4.98289 5.00918 5.84243C4.14963 6.70197 3.66675 7.86776 3.66675 9.08333C3.66675 11 4.91675 12.4583 6.16675 13.6667L12.0001 19.5L17.8334 13.6667Z",
+    "M12 6.16675L9.53334 8.63341C9.36402 8.8015 9.22964 9.00143 9.13794 9.22169C9.04624 9.44194 8.99902 9.67817 8.99902 9.91675C8.99902 10.1553 9.04624 10.3916 9.13794 10.6118C9.22964 10.8321 9.36402 11.032 9.53334 11.2001C10.2167 11.8834 11.3083 11.9084 12.0333 11.2584L13.7583 9.67508C14.1907 9.28274 14.7537 9.06541 15.3375 9.06541C15.9214 9.06541 16.4843 9.28274 16.9167 9.67508L19.3833 11.8917",
+    "M16.9999 14.4999L15.3333 12.8333",
+    "M14.4999 16.9999L12.8333 15.3333"
+  ],
+  "search-check-outline": [
+    "M8.66675 11.1667L10.3334 12.8333L13.6667 9.5",
+    "M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
+    "M19.5001 19.5001L15.9167 15.9167"
   ]
 }