feat(apps): Shopify Integration (#11101)

This PR adds native integration with Shopify. No more dashboard apps.
The support agents can view the orders, their status and the link to the
order page on the conversation sidebar.

This PR does the following: 
- Create an integration with Shopify (a new app is added in the
integrations tab)
- Option to configure it in SuperAdmin
- OAuth endpoint and the callbacks.
- Frontend component to render the orders. (We might need to cache it in
the future)
---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from 'vue';
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  order: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const formatDate = dateString => {
+  return format(new Date(dateString), 'MMM d, yyyy');
+};
+
+const formatCurrency = (amount, currency) => {
+  return new Intl.NumberFormat('en', {
+    style: 'currency',
+    currency: currency || 'USD',
+  }).format(amount);
+};
+
+const getStatusClass = status => {
+  const classes = {
+    paid: 'bg-n-teal-5 text-n-teal-12',
+  };
+  return classes[status] || 'bg-slate-50 text-slate-700';
+};
+
+const getStatusI18nKey = (type, status = '') => {
+  return `CONVERSATION_SIDEBAR.SHOPIFY.${type.toUpperCase()}_STATUS.${status.toUpperCase()}`;
+};
+
+const fulfillmentStatus = computed(() => {
+  const { fulfillment_status: status } = props.order;
+  if (!status) {
+    return '';
+  }
+  return t(getStatusI18nKey('FULFILLMENT', status));
+});
+
+const financialStatus = computed(() => {
+  const { financial_status: status } = props.order;
+  if (!status) {
+    return '';
+  }
+  return t(getStatusI18nKey('FINANCIAL', status));
+});
+
+const getFulfillmentClass = status => {
+  const classes = {
+    fulfilled: 'text-green-600',
+    partial: 'text-yellow-600',
+    unfulfilled: 'text-red-600',
+  };
+  return classes[status] || 'text-slate-600';
+};
+</script>
+
+<template>
+  <div
+    class="py-3 border-b border-n-weak last:border-b-0 flex flex-col gap-1.5"
+  >
+    <div class="flex justify-between items-center">
+      <div class="font-medium flex">
+        <a
+          :href="order.admin_url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hover:underline text-n-slate-12 cursor-pointer truncate"
+        >
+          {{ $t('CONVERSATION_SIDEBAR.SHOPIFY.ORDER_ID', { id: order.id }) }}
+          <i class="i-lucide-external-link pl-5" />
+        </a>
+      </div>
+      <div
+        :class="getStatusClass(order.financial_status)"
+        class="text-xs px-2 py-1 rounded capitalize truncate"
+        :title="financialStatus"
+      >
+        {{ financialStatus }}
+      </div>
+    </div>
+    <div class="text-sm text-n-slate-12">
+      <span class="text-n-slate-11 border-r border-n-weak pr-2">
+        {{ formatDate(order.created_at) }}
+      </span>
+      <span class="text-n-slate-11 pl-2">
+        {{ formatCurrency(order.total_price, order.currency) }}
+      </span>
+    </div>
+    <div v-if="fulfillmentStatus">
+      <span
+        :class="getFulfillmentClass(order.fulfillment_status)"
+        class="capitalize font-medium"
+        :title="fulfillmentStatus"
+      >
+        {{ fulfillmentStatus }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useFunctionGetter } from 'dashboard/composables/store';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ShopifyAPI from '../../../api/integrations/shopify';
+import ShopifyOrderItem from './ShopifyOrderItem.vue';
+
+const props = defineProps({
+  contactId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const contact = useFunctionGetter('contacts/getContact', props.contactId);
+
+const hasSearchableInfo = computed(
+  () => !!contact.value?.email || !!contact.value?.phone_number
+);
+
+const orders = ref([]);
+const loading = ref(true);
+const error = ref('');
+
+const fetchOrders = async () => {
+  try {
+    loading.value = true;
+    const response = await ShopifyAPI.getOrders(props.contactId);
+    orders.value = response.data.orders;
+  } catch (e) {
+    error.value =
+      e.response?.data?.error || 'CONVERSATION_SIDEBAR.SHOPIFY.ERROR';
+  } finally {
+    loading.value = false;
+  }
+};
+
+watch(
+  () => props.contactId,
+  () => {
+    if (hasSearchableInfo.value) {
+      fetchOrders();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="px-4 py-2 text-n-slate-12">
+    <div v-if="!hasSearchableInfo" class="text-center text-n-slate-12">
+      {{ $t('CONVERSATION_SIDEBAR.SHOPIFY.NO_SHOPIFY_ORDERS') }}
+    </div>
+    <div v-else-if="loading" class="flex justify-center items-center p-4">
+      <Spinner size="32" class="text-n-brand" />
+    </div>
+    <div v-else-if="error" class="text-center text-n-ruby-12">
+      {{ error }}
+    </div>
+    <div v-else-if="!orders.length" class="text-center text-n-slate-12">
+      {{ $t('CONVERSATION_SIDEBAR.SHOPIFY.NO_SHOPIFY_ORDERS') }}
+    </div>
+    <div v-else>
+      <ShopifyOrderItem
+        v-for="order in orders"
+        :key="order.id"
+        :order="order"
+      />
+    </div>
+  </div>
+</template>