@riskdefy/chargebacks 1.0.6 → 1.0.8

package/src/components/IncomingDetails.vue

@@ -0,0 +1,621 @@
+<template>
+    <div class="row g-5 g-xl-10">
+      <!--begin::Col-->
+  
+      <div class="col-xl-8">
+        <Details
+          :reason_explained="reason_explained"
+          :reason="reason"
+          :merchant="merchant"
+          :incoming="incoming"
+        ></Details>
+      </div>
+  
+      <div class="col-xl-4 mb-10">
+        <div class="card">
+          <!--begin::Header-->
+          <div class="card">
+            <Summary
+              :reason="reason"
+              :processor="processor"
+              :merchant="merchant"
+              :incoming="incoming"
+            ></Summary>
+          </div>
+          <!--end::Header-->
+          <!--begin::Body-->
+          <!--end::Body-->
+        </div>
+        <div class="card card-body d-flex align-items-start mt-5 pt-5">
+          <!--begin::Chart-->
+          <div class="mb-auto">
+            <!--begin::Header-->
+            <div class="align-items-center border-0">
+              <h3 class="align-items-start flex-column">
+                <span class="fw-normal fs-7 text-dark ps-5"
+                  >Response Timeline</span
+                >
+              </h3>
+            </div>
+            <!--end::Header-->
+            <!--begin::Body-->
+            <div class="card-body pt-5">
+              <!--begin::Timeline-->
+              <div class="timeline-label">
+                <!--begin::Item-->
+                <div
+                  v-if="incoming.found_date != '0000-00-00 00:00:00'"
+                  class="timeline-item"
+                >
+                  <!--begin::Label-->
+                  <div class="timeline-label text-gray-800 fs-8">
+                    {{ getFoundTime }}
+                  </div>
+                  <!--end::Label-->
+                  <!--begin::Badge-->
+                  <div class="timeline-badge">
+                    <i class="fa fa-genderless text-success fs-1"></i>
+                  </div>
+                  <!--end::Badge-->
+                  <!--begin::Text-->
+                  <div class="text-gray-800 ps-3 fs-8">
+                    Transaction Found ({{ getFoundDate }})
+                  </div>
+                  <!--end::Text-->
+                </div>
+                <div v-else class="timeline-item">
+                  <!--begin::Label-->
+                  <div class="timeline-label text-gray-400 fs-8">00:00</div>
+                  <!--end::Label-->
+                  <!--begin::Badge-->
+                  <div class="timeline-badge">
+                    <i class="fa fa-genderless text-gray-400 fs-1"></i>
+                  </div>
+                  <!--end::Badge-->
+                  <!--begin::Text-->
+                  <div class="text-gray-400 ps-3 fs-8">Transaction Not Found</div>
+                  <!--end::Text-->
+                </div>
+                <div
+                  v-if="incoming.found_date != '0000-00-00 00:00:00'"
+                  class="timeline-item"
+                >
+                  <!--begin::Label-->
+                  <div class="timeline-label text-gray-800 fs-8">
+                    {{ getPopulatedTime }}
+                  </div>
+                  <!--end::Label-->
+                  <!--begin::Badge-->
+                  <div class="timeline-badge">
+                    <i class="fa fa-genderless text-success fs-1"></i>
+                  </div>
+                  <!--end::Badge-->
+                  <!--begin::Text-->
+                  <div class="text-gray-800 ps-3 fs-8">
+                    Details Populated ({{ getPopulatedDate }})
+                  </div>
+                  <!--end::Text-->
+                </div>
+                <div v-else class="timeline-item">
+                  <!--begin::Label-->
+                  <div class="timeline-label text-gray-400 fs-8">00:00</div>
+                  <!--end::Label-->
+                  <!--begin::Badge-->
+                  <div class="timeline-badge">
+                    <i class="fa fa-genderless text-gray-400 fs-1"></i>
+                  </div>
+                  <!--end::Badge-->
+                  <!--begin::Text-->
+                  <div class="text-gray-400 ps-3 fs-8">Details Not Populated</div>
+                  <!--end::Text-->
+                </div>
+                <!--end::Item-->
+                <!--begin::Item-->
+                <div
+                  v-if="incoming.sent_date != '0000-00-00 00:00:00'"
+                  class="timeline-item"
+                >
+                  <!--begin::Label-->
+                  <div class="timeline-label text-gray-800 fs-8">
+                    {{ getSentTime }}
+                  </div>
+                  <!--end::Label-->
+                  <!--begin::Badge-->
+                  <div class="timeline-badge">
+                    <i class="fa fa-genderless text-success fs-1"></i>
+                  </div>
+                  <!--end::Badge-->
+                  <!--begin::Content-->
+                  <div class="timeline-content d-flex">
+                    <span class="text-gray-800 ps-3 fs-8"
+                      >Response Sent ({{ getSentDate }})</span
+                    >
+                  </div>
+                  <!--end::Content-->
+                </div>
+                <div v-else class="timeline-item">
+                  <!--begin::Label-->
+                  <div class="timeline-label text-gray-400 fs-8">00:00</div>
+                  <!--end::Label-->
+                  <!--begin::Badge-->
+                  <div class="timeline-badge">
+                    <i class="fa fa-genderless text-gray-400 fs-1"></i>
+                  </div>
+                  <!--end::Badge-->
+                  <!--begin::Content-->
+                  <div class="timeline-content d-flex">
+                    <span class="text-gray-400 ps-3 fs-8">Response Not Sent</span>
+                  </div>
+                  <!--end::Content-->
+                </div>
+                <!--end::Item-->
+              </div>
+              <!--end::Timeline-->
+            </div>
+            <!--end: Card Body-->
+          </div>
+          <!--end::Chart-->
+        </div>
+        <!--end::Chart widget 31-->
+      </div>
+      <!--end::Col-->
+      <!--begin::Col-->
+      <!--end::Col-->
+    </div>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent, onMounted, computed, ref } from "vue";
+  import { Modal } from "bootstrap";
+  
+  import Details from "./Details.vue";
+  import Summary from "./Summary.vue";
+  import ApiService from "../service/api";
+  
+  interface Incoming {
+    id: string;
+    transaction_found: string;
+    details_populated: string;
+    dispute_url: string;
+    is_responded: string;
+    // eslint-disable-next-line
+    card_holder: any;
+    // eslint-disable-next-line
+    card: any;
+    // eslint-disable-next-line
+    transaction: any;
+    // eslint-disable-next-line
+    order_details: any;
+    // eslint-disable-next-line
+    order2_details: any;
+    order3_details: any;
+    crm2_details: any;
+    crm3_details: any;
+    product_details: any;
+    merchant_id: string;
+    reason: string;
+    // eslint-disable-next-line
+    dispute_cycle: any;
+    connection_id: string;
+    found_date: string;
+    populated_date: string;
+    sent_date: string;
+    reason_condition: string;
+  }
+  
+  interface Merchant {
+    dba_name: string;
+    processor_id: string;
+    // eslint-disable-next-line
+    merchantDetails: any;
+  }
+  
+  interface Connection {
+    id: string;
+    conn_name: string;
+    scheme: string;
+    host: string;
+    domain: string;
+    auth_type: string;
+    payload_type: string;
+    response_type: string;
+    enabled: string;
+    conn_status: string;
+    category: string;
+    created: string;
+    modified: string;
+    logo_url: string;
+  }
+  
+  export default defineComponent({
+    name: "incoming-details",
+    components: {
+      Details,
+      Summary,
+    },
+    props: {
+      apiKey: {
+        type: String,
+        required: true,
+      },
+      incomingId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props: any) {
+      const getIncomingId = computed(() => {
+        return props.incomingId;
+      });
+      const incoming = ref<Incoming>({
+        id: "",
+        transaction_found: "0",
+        details_populated: "0",
+        dispute_url: "",
+        is_responded: "",
+        card_holder: {},
+        card: {},
+        transaction: {
+          action: {},
+        },
+        order_details: {
+          items: [],
+        },
+        order2_details: {
+          items: [],
+        },
+        order3_details: {
+          items: [],
+        },
+        crm2_details: {},
+        crm3_details: {},
+        product_details: {},
+        merchant_id: "",
+        reason: "",
+        dispute_cycle: {},
+        connection_id: "",
+        found_date: "0000-00-00 00:00:00",
+        populated_date: "0000-00-00 00:00:00",
+        sent_date: "0000-00-00 00:00:00",
+        reason_condition: "",
+      });
+      const merchant = ref<Merchant>({
+        dba_name: "",
+        processor_id: "",
+        merchantDetails: {},
+      });
+      const reason = ref({});
+      const reason_explained = ref({
+        message: {},
+        instructions: {},
+      });
+      const processor = ref({});
+      const templates = ref({});
+      const templateImages = ref([]);
+  
+      onMounted(async () => {
+        ApiService.setApiKey(props.apiKey);
+  
+        setTimeout(async () => {
+          await getIncoming();
+          await getConnections();
+        }, 500);
+      });
+  
+      const connections = ref<Connection[]>([]);
+      const getConnections = async () => {
+        const response = await ApiService.get("apis/connections?limit=100");
+        if (response?.data?.success) {
+          connections.value = [...(response?.data ?? [])];
+        }
+      };
+      const isTransactionAvailable = computed(() => {
+        const transaction = incoming.value.transaction;
+        return (
+          transaction &&
+          Object.keys(transaction).length > 0 &&
+          transaction.transaction_id && // Assuming transaction_id is a key indicator
+          transaction.transaction_id !== ""
+        );
+      });
+      const getFoundTime = computed(() => {
+        const time = incoming.value.found_date.split(" ")[1];
+        const partTime = time.split(":");
+        return `${partTime[0]}:${partTime[1]}`;
+      });
+      const getFoundDate = computed(() => {
+        const date = incoming.value.found_date.split(" ")[0];
+        const partDate = date.split("-");
+        return `${partDate[1]}-${partDate[2]}`;
+      });
+      const getPopulatedTime = computed(() => {
+        const time = incoming.value.populated_date.split(" ")[1];
+        const partTime = time.split(":");
+        return `${partTime[0]}:${partTime[1]}`;
+      });
+      const getPopulatedDate = computed(() => {
+        const date = incoming.value.populated_date.split(" ")[0];
+        const partDate = date.split("-");
+        return `${partDate[1]}-${partDate[2]}`;
+      });
+      const getSentTime = computed(() => {
+        const time = incoming.value.sent_date.split(" ")[1];
+        const partTime = time.split(":");
+        return `${partTime[0]}:${partTime[1]}`;
+      });
+      const getSentDate = computed(() => {
+        const date = incoming.value.sent_date.split(" ")[0];
+        const partDate = date.split("-");
+        return `${partDate[1]}-${partDate[2]}`;
+      });
+      const apiSyncItems = ref([]);
+  
+      const getIncoming = async () => {
+        try {
+          const { data } = await ApiService.get(
+            `chargebacks/incoming?id=${getIncomingId.value}`
+          );
+          incoming.value = data[0];
+          console.log("here", incoming.value);
+          try {
+            incoming.value.card_holder = JSON.parse(incoming.value.card_holder);
+          } catch (e) {
+            incoming.value.card_holder = {};
+          }
+  
+          try {
+            incoming.value.card = JSON.parse(incoming.value.card);
+          } catch (e) {
+            incoming.value.card = {};
+          }
+  
+          try {
+            incoming.value.transaction = JSON.parse(incoming.value.transaction);
+          } catch (e) {
+            incoming.value.transaction = { action: {} };
+          }
+  
+          try {
+            incoming.value.dispute_cycle = JSON.parse(
+              incoming.value.dispute_cycle
+            );
+          } catch (e) {
+            incoming.value.dispute_cycle = {};
+          }
+  
+          try {
+            incoming.value.order_details = JSON.parse(
+              incoming.value.order_details
+            );
+          } catch (e) {
+            incoming.value.order_details = { items: [] };
+          }
+  
+          try {
+            incoming.value.order2_details = JSON.parse(
+              incoming.value.order2_details
+            );
+          } catch (e) {
+            incoming.value.order2_details = { items: [] };
+          }
+  
+          try {
+            incoming.value.product_details = JSON.parse(
+              incoming.value.product_details
+            );
+          } catch (e) {
+            incoming.value.product_details = {};
+          }
+        } catch (err) {
+          console.log(err);
+          incoming.value = {
+            id: "",
+            transaction_found: "0",
+            details_populated: "0",
+            dispute_url: "",
+            is_responded: "",
+            card_holder: {},
+            card: {},
+            transaction: {
+              action: {},
+            },
+            order_details: {
+              items: [],
+            },
+            order2_details: {
+              items: [],
+            },
+            order3_details: {
+              items: [],
+            },
+            crm2_details: {},
+            crm3_details: {},
+            product_details: {},
+            merchant_id: "",
+            reason: "",
+            dispute_cycle: {},
+            connection_id: "",
+            found_date: "0000-00-00 00:00:00",
+            populated_date: "0000-00-00 00:00:00",
+            sent_date: "0000-00-00 00:00:00",
+            reason_condition: "",
+          };
+        }
+  
+        try {
+          const { data } = await ApiService.get(
+            `merchants/accounts?merchant_id=${incoming.value.merchant_id}`
+          );
+          merchant.value = data[0];
+          try {
+            merchant.value.merchantDetails = JSON.parse(
+              merchant.value.merchantDetails
+            );
+          } catch (e) {
+            merchant.value.merchantDetails = {};
+          }
+        } catch (err) {
+          merchant.value = {
+            dba_name: "",
+            processor_id: "",
+            merchantDetails: {},
+          };
+        }
+  
+        try {
+          const { data } = await ApiService.get(
+            `chargebacks/reasons?code=${incoming.value.reason}`
+          );
+          reason.value = data[0];
+        } catch (err) {
+          reason.value = {};
+        }
+  
+        try {
+          const { data } = await ApiService.get(
+            `chargebacks/reasons_explained?code=${incoming.value.reason}`
+          );
+          reason_explained.value = data[0];
+          reason_explained.value.message = JSON.parse(data[0].message);
+          reason_explained.value.instructions = JSON.parse(data[0].instructions);
+        } catch (err) {
+          reason_explained.value = { message: {}, instructions: {} };
+        }
+  
+        try {
+          const { data } = await ApiService.get(
+            `processors/isos/${merchant.value.processor_id}`
+          );
+          processor.value = data[0];
+        } catch (err) {
+          processor.value = {};
+        }
+  
+        try {
+          const { data } = await ApiService.get(
+            `apis/merchants?fields=id,alias_name,connection_id,endpoint_name&category=Gateway&merchant_id=${incoming.value.merchant_id}`
+          );
+          apiSyncItems.value = data;
+        } catch (e) {
+          apiSyncItems.value = [];
+        }
+      };
+  
+      const resetIncoming = () => {
+        getIncoming();
+      };
+  
+      const onOpenResponseDrawer = async () => {
+        try {
+          let res = await ApiService.get(
+            `chargebacks/incoming/${incoming.value.id}?action=evidence_images`
+          );
+          if (res.success) {
+            if (res.data[0] === null) {
+              templateImages.value = [];
+            } else {
+              templateImages.value = res.data[0];
+            }
+          }
+  
+          res = await ApiService.get(
+            `chargebacks/incoming/${incoming.value.id}?action=response_packet`
+          );
+          if (res.success) {
+            if (res.data[0] === null) {
+              templates.value = {};
+            } else {
+              templates.value = res.data[0];
+            }
+          }
+        } catch (e) {
+          templates.value = {};
+          templateImages.value = [];
+        }
+      };
+  
+      const submitTemplate = async () => {
+        try {
+          let res = await ApiService.get(
+            `chargebacks/incoming/${incoming.value.id}?action=evidence_images`
+          );
+          if (res.data.success) {
+            if (res.data[0] === null) {
+              templateImages.value = [];
+            } else {
+              templateImages.value = res.data[0];
+            }
+          }
+  
+          res = await ApiService.get(
+            `chargebacks/incoming/${incoming.value.id}?action=response_packet`
+          );
+          if (res.success) {
+            if (res.data[0] === null) {
+              templates.value = {};
+            } else {
+              templates.value = res.data[0];
+            }
+          }
+        } catch (e) {
+          templates.value = {};
+          templateImages.value = [];
+        }
+      };
+  
+      const onViewDispute = () => {
+        const modal = new Modal(document.getElementById("modal_pdf_view"));
+        modal.show();
+      };
+      const incomingWithoutTransaction = computed(() => {
+        const { transaction, card_holder, ...rest } = incoming.value;
+        return rest;
+      });
+      return {
+        incoming,
+        isTransactionAvailable,
+        incomingWithoutTransaction,
+        merchant,
+        reason,
+        reason_explained,
+        processor,
+        getFoundTime,
+        getPopulatedTime,
+        resetIncoming,
+        getSentTime,
+        getSentDate,
+        getFoundDate,
+        getPopulatedDate,
+        connections,
+  
+        onOpenResponseDrawer,
+        submitTemplate,
+        templates,
+        templateImages,
+        onViewDispute,
+        apiSyncItems,
+      };
+    },
+  });
+  </script>
+  <style>
+  .el-step__title {
+    font-size: 12px;
+    line-height: 38px;
+    font-weight: 500;
+    font-family: inherit;
+  }
+  .el-step__title.is-process {
+    font-weight: 500;
+  }
+  
+  .el-step__icon-inner {
+    font-size: 12px;
+  }
+  .el-message__content {
+    padding: 2px;
+    font-size: 12px;
+    line-height: 1;
+  }
+  </style>
+