chore: Replace packages with native functions (#5140)

app/javascript/dashboard/components/Code.vue

@@ -9,7 +9,7 @@
 
 <script>
 import 'highlight.js/styles/default.css';
-import copy from 'copy-text-to-clipboard';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
 
 export default {
   props: {
@@ -23,9 +23,9 @@ export default {
     },
   },
   methods: {
-    onCopy(e) {
+    async onCopy(e) {
       e.preventDefault();
-      copy(this.script);
+      await copyTextToClipboard(this.script);
       bus.$emit('newToastMessage', this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
   },

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -109,8 +109,6 @@
   </li>
 </template>
 <script>
-import copy from 'copy-text-to-clipboard';
-
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import timeMixin from '../../../mixins/time';
 
@@ -128,6 +126,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
 
 export default {
   components: {
@@ -405,8 +404,8 @@ export default {
         this.showAlert(this.$t('CONVERSATION.FAIL_DELETE_MESSSAGE'));
       }
     },
-    handleCopy() {
+    async handleCopy() {
-      copy(this.data.content);
+      await copyTextToClipboard(this.data.content);
       this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
       this.showContextMenu = false;
     },

app/javascript/dashboard/helper/URLHelper.js

@@ -1,8 +1,7 @@
-import queryString from 'query-string';
 import { DEFAULT_REDIRECT_URL } from '../constants';
 
 export const frontendURL = (path, params) => {
-  const stringifiedParams = params ? `?${queryString.stringify(params)}` : '';
+  const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
   return `/app/${path}${stringifiedParams}`;
 };
 

app/javascript/dashboard/helper/flag.js

@@ -0,0 +1,19 @@
+const FLAG_OFFSET = 127397;
+
+/**
+ * Gets emoji flag for given locale.
+ *
+ * @param {string} countryCode locale code
+ * @return {string} emoji flag
+ *
+ * @example
+ * getCountryFlag('cz') // '🇨🇿'
+ */
+export const getCountryFlag = countryCode => {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => FLAG_OFFSET + char.charCodeAt());
+
+  return String.fromCodePoint(...codePoints);
+};

app/javascript/dashboard/helper/specs/flag.spec.js

@@ -0,0 +1,9 @@
+import { getCountryFlag } from '../flag';
+
+describe('#flag', () => {
+  it('returns the correct flag ', () => {
+    expect(getCountryFlag('cz')).toBe('🇨🇿');
+    expect(getCountryFlag('IN')).toBe('🇮🇳');
+    expect(getCountryFlag('US')).toBe('🇺🇸');
+  });
+});

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -28,7 +28,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
-import flag from 'country-code-emoji';
+import { getCountryFlag } from 'dashboard/helper/flag';
 
 import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -200,7 +200,7 @@ export default {
             if (row.country) {
               return (
                 <div class="text-truncate">
-                  {`${flag(row.countryCode)} ${row.country}`}
+                  {`${getCountryFlag(row.countryCode)} ${row.country}`}
                 </div>
               );
             }

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -150,7 +150,7 @@ import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';
 import alertMixin from 'shared/mixins/alertMixin';
 import adminMixin from '../../../../mixins/isAdmin';
 import { mapGetters } from 'vuex';
-import flag from 'country-code-emoji';
+import { getCountryFlag } from 'dashboard/helper/flag';
 
 export default {
   components: {
@@ -244,7 +244,7 @@ export default {
     },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
-        const countryFlag = countryCode ? flag(countryCode) : '🌎';
+        const countryFlag = countryCode ? getCountryFlag(countryCode) : '🌎';
         return `${cityAndCountry} ${countryFlag}`;
       } catch (error) {
         return '';

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -28,9 +28,9 @@
   </div>
 </template>
 <script>
-import copy from 'copy-text-to-clipboard';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
 
 export default {
   components: {
@@ -60,9 +60,9 @@ export default {
     },
   },
   methods: {
-    onCopy(e) {
+    async onCopy(e) {
       e.preventDefault();
-      copy(this.value);
+      await copyTextToClipboard(this.value);
       this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
     },
   },

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -20,10 +20,11 @@
 </template>
 
 <script>
-import copy from 'copy-text-to-clipboard';
 import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import attributeMixin from 'dashboard/mixins/attributeMixin';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
 export default {
   components: {
     CustomAttribute,
@@ -86,8 +87,8 @@ export default {
         this.showAlert(errorMessage);
       }
     },
-    onCopy(attributeValue) {
+    async onCopy(attributeValue) {
-      copy(attributeValue);
+      await copyTextToClipboard(attributeValue);
       this.showAlert(this.$t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
     },
   },

app/javascript/shared/helpers/clipboard.js

@@ -0,0 +1,14 @@
+/**
+ * Writes a text string to the system clipboard.
+ *
+ * @async
+ * @param {string} text text to be written to the clipboard
+ * @throws {Error} unable to copy text to clipboard
+ */
+export const copyTextToClipboard = async text => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    throw new Error(`Unable to copy text to clipboard: ${error.message}`);
+  }
+};

app/javascript/shared/mixins/filterMixin.js

@@ -1,5 +1,3 @@
-// import groupBy from 'lodash.groupby';
-
 export default {
   methods: {
     setFilterAttributes() {

app/javascript/widget/helpers/utils.js

@@ -36,3 +36,10 @@ export const RNHelper = {
     );
   },
 };
+
+export const groupBy = (array, predicate) => {
+  return array.reduce((acc, value) => {
+    (acc[predicate(value)] ||= []).push(value);
+    return acc;
+  }, {});
+};

app/javascript/widget/store/modules/conversation/getters.js

@@ -1,5 +1,5 @@
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import groupBy from 'lodash.groupby';
+import { groupBy } from 'widget/helpers/utils';
 import { groupConversationBySender } from './helpers';
 import { formatUnixDate } from 'shared/helpers/DateHelper';
 

package.json

@@ -32,18 +32,14 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "bourbon": "^6.0.0",
     "chart.js": "~2.9.4",
-    "copy-text-to-clipboard": "2.2.0",
     "core-js": "3.11.0",
-    "country-code-emoji": "^1.0.0",
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "2.2.7",
-    "dotenv": "^8.0.0",
     "foundation-sites": "~6.5.3",
     "highlight.js": "~10.4.1",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
-    "lodash.groupby": "^4.6.0",
     "marked": "4.0.10",
     "md5": "^2.3.0",
     "ninja-keys": "^1.1.9",
@@ -52,7 +48,6 @@
     "prosemirror-markdown": "1.5.1",
     "prosemirror-state": "1.3.4",
     "prosemirror-view": "1.18.4",
-    "query-string": "5",
     "semver": "7.3.5",
     "spinkit": "~1.2.5",
     "tailwindcss": "^1.9.6",
@@ -60,7 +55,6 @@
     "v-tooltip": "~2.1.3",
     "videojs-record": "^4.5.0",
     "vue": "2.6.12",
-    "vue-axios": "~1.2.2",
     "vue-chartjs": "3.5.1",
     "vue-clickaway": "~2.1.0",
     "vue-color": "2.8.1",

yarn.lock

@@ -5501,11 +5501,6 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-text-to-clipboard@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz#329dd6daf8c42034c763ace567418401764579ae"
-  integrity sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ==
-
 core-js-compat@^3.8.1, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.0.tgz#635683f43480a0b41e3f6be3b1c648dadb8b4390"
@@ -5561,11 +5556,6 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-country-code-emoji@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/country-code-emoji/-/country-code-emoji-1.0.0.tgz#7c77791839c9e9921beec08ef080caa7cfb8b40c"
-  integrity sha512-fBM5A49oZkOxOVb0bx7q7Hanlfh8e3z/r6/ZnFhbL57JXGIgWPC2HYrjXEyiGML7OFftDV/WfAlJdDkoAbj1Rg==
-
 cp-file@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@@ -10173,11 +10163,6 @@ lodash.get@^4.0:
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
   integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
-lodash.groupby@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
-  integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
-
 lodash.has@^4.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
@@ -12971,15 +12956,6 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-query-string@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
-  integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -15629,11 +15605,6 @@ void-elements@^3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
 
-vue-axios@~1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/vue-axios/-/vue-axios-1.2.2.tgz#d18bb48fa7bf469ffa86676960f52a89b7d38a9d"
-  integrity sha1-0Yu0j6e/Rp/6hmdpYPUqibfTip0=
-
 vue-chartjs@3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.1.tgz#d25e845708f7744ae51bed9d23a975f5f8fc6529"