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() {
-      copy(this.data.content);
+    async handleCopy() {
+      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) {
-      copy(attributeValue);
+    async onCopy(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';