{"version":3,"mappings":"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","names":["router","useRouter","handleNavigation","VendorModalEmbed","defineAsyncComponent","__vitePreload","open","ref","openModal","closeModal","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_1","props","__props","sortState","reactive","sortedRows","computed","a","b","column","sortData","VendorModalDisclaimer","columns","openDisclaimerModal","openEmbedModal","textToCopy","slug","modalEmbedTitle","softwareUuid","onShowModalDisclaimer","row","getWordPressText","onCloseModalDisclaimer","onShowModalEmbed","fixed_on_time","tooltipText","store","useProductsStore","__temp","__restore","_withAsyncContext","products","storeToRefs","allProducts","_createBlock","_component_BaseLink","_withCtx","_createVNode","_component_BaseImage","_createElementVNode","_hoisted_2","user","useSanctumUser","VendorTableOpen","VendorTablePending","useHead","data","activeReports","_a","openReports","pendingReports","programData","tabs","_b"],"ignoreList":[],"sources":["../../../../components/Vendor/Programs/Programs.vue","../../../../components/Base/Progress/Progress.vue","../../../../components/Table/Table.vue","../../../../components/Vendor/ProgramsTable/ProgramsTable.vue","../../../../components/Vendor/TableAll/TableAll.vue","../../../../components/Vendor/BannerAffiliate/BannerAffiliate.vue","../../../../pages/vdp/programs/index.vue"],"sourcesContent":["<template>\n  <BaseCard>\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex justify-between items-center\">\n        <h1 class=\"text-white text-2xl md:text-4xl font-semibold\">Programs</h1>\n        <div class=\"flex items-center gap-2\">\n          <BaseButton\n            v-if=\"data.active > 0\"\n            @click=\"openModal\"\n            class=\"bg-cadet-gray bg-opacity-5 text-nowrap icon-btn\"\n          >\n            <svgo-embed class=\"text-primary\" />\n            <span class=\"text-white hover:text-primary text-md duration-300\">\n              Embed report\n            </span>\n          </BaseButton>\n          <div\n            v-tooltip=\"{\n              hideTooltip: data.active,\n              text: 'Verify your first program to add more.'\n            }\"\n          >\n            <BaseButton\n              @click=\"handleNavigation\"\n              class=\"base-btn icon-btn disabled:bg-dark4\"\n              :disabled=\"!data.active\"\n            >\n              <svgo-plus />\n              <span>Start new</span>\n            </BaseButton>\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col md:flex-row gap-4\">\n        <DataBox name=\"Active\" class=\"p-8\">\n          <h2 class=\"text-white text-4xl\">\n            {{ data.active\n            }}<span\n              v-tooltip=\"{\n                text: `You have ${data.total - data.active} programs still pending activation`\n              }\"\n              class=\"text-dark4 text-md\"\n            >\n              /{{ data.total }}</span\n            >\n          </h2>\n        </DataBox>\n        <DataBox name=\"Reports\" class=\"p-8\">\n          <h2 class=\"text-white text-4xl\">{{ data.reports }}</h2>\n        </DataBox>\n        <DataBox name=\"Fixed\" class=\"p-8\">\n          <h2 class=\"text-white text-4xl\">{{ data.fixed }}</h2>\n        </DataBox>\n        <DataBox\n          name=\"Fixed on time\"\n          class=\"p-8\"\n          v-tooltip=\"{\n            text: 'Whether or not vulnerability was resolved within the suggested timeframe'\n          }\"\n        >\n          <h2 class=\"text-white text-4xl\">{{ data.fixedOnTime }}</h2>\n        </DataBox>\n      </div>\n    </div>\n  </BaseCard>\n  <VendorModalEmbed\n    :open=\"open\"\n    @update:open=\"closeModal\"\n    :multiple=\"true\"\n    title=\"Embed a vulnerability report form to your website\"\n  />\n</template>\n<script setup lang=\"ts\">\n  import { defineAsyncComponent, ref } from 'vue';\n  import { useRouter } from 'vue-router';\n\n  const router = useRouter();\n\n  const handleNavigation = () => {\n    router.push('/vdp/start-program');\n  };\n  const VendorModalEmbed = defineAsyncComponent(\n    () => import('@/components/Vendor/ModalEmbed/ModalEmbed.vue')\n  );\n\n  interface Props {\n    data: {\n      active: number;\n      reports: number;\n      fixed: string;\n      fixedOnTime: string;\n      total: number;\n    };\n  }\n\n  defineProps<Props>();\n  const open = ref(false);\n\n  const openModal = () => {\n    open.value = true;\n  };\n\n  const closeModal = () => {\n    open.value = false;\n  };\n</script>\n","<template>\n  <div class=\"loader\">\n    <div class=\"loaderBar\"></div>\n  </div>\n</template>\n<style lang=\"scss\" scoped>\n  .loader {\n    width: 100%;\n    margin: 0 auto;\n    position: relative;\n    padding: 1px;\n  }\n  .loader:before {\n    content: '';\n    border-radius: 10px;\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    bottom: -4px;\n    left: -4px;\n  }\n  .loader .loaderBar {\n    position: absolute;\n    border-radius: 10px;\n    top: 0;\n    right: 100%;\n    bottom: 0;\n    left: 0;\n    background: theme('colors.primary');\n    width: 0;\n    animation: borealisBar 2s linear infinite;\n  }\n\n  @keyframes borealisBar {\n    0% {\n      left: 0%;\n      right: 100%;\n      width: 0%;\n    }\n    10% {\n      left: 0%;\n      right: 75%;\n      width: 25%;\n    }\n    90% {\n      right: 0%;\n      left: 75%;\n      width: 25%;\n    }\n    100% {\n      left: 100%;\n      right: 0%;\n      width: 0%;\n    }\n  }\n</style>\n","<template>\n  <div class=\"w-full\">\n    <div class=\"relative overflow-x-auto shadow-md sm:rounded-lg\">\n      <table class=\"w-full divide-y divide-cadet-gray divide-opacity-15\">\n        <thead class=\"relative\">\n          <tr class=\"bg-cadet-gray bg-opacity-5\">\n            <th\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              scope=\"col\"\n              :class=\"[\n                'px-4 py-3.5 text-white font-semibold text-sm',\n                column.align === 'center'\n                  ? 'text-center'\n                  : column.align === 'right'\n                    ? 'text-right'\n                    : 'text-left rtl:text-right',\n                column.width ? column.width : '',\n                column.minWidth ? column.minWidth : 'min-w-[100px]',\n                column.maxWidth ? column.maxWidth : ''\n              ]\"\n            >\n              <slot\n                :name=\"`${column.key}-header`\"\n                :column=\"column\"\n                :on-sort=\"sortData\"\n              >\n                <BaseButton\n                  v-if=\"column.sortable\"\n                  class=\"focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-sm text-sm gap-x-1.5 p-1.5 text-gray-200 hover:text-white hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 inline-flex items-center -m-1.5 duration-300\"\n                  @click=\"sortData(column)\"\n                >\n                  <span class=\"truncate\">\n                    {{ column.label }}\n                  </span>\n                  <span>\n                    <component\n                      :is=\"\n                        !sortState.column ||\n                        !sortState.direction ||\n                        sortState.column !== column.key\n                          ? 'svgo-sort'\n                          : sortState.direction === 'asc'\n                            ? 'svgo-sort-asc'\n                            : 'svgo-sort-desc'\n                      \"\n                    />\n                  </span>\n                </BaseButton>\n                <span v-else class=\"truncate\">{{ column.label }}</span>\n              </slot>\n            </th>\n          </tr>\n          <tr v-if=\"loading\">\n            <td :colspan=\"columns.length\">\n              <BaseProgress />\n            </td>\n          </tr>\n        </thead>\n        <tbody class=\"divide-y divide-cadet-gray divide-opacity-15\">\n          <tr v-if=\"loading && !sortedRows?.length\">\n            <td :colspan=\"columns.length\">\n              <slot name=\"loading-state\">\n                <div class=\"flex flex-col justify-center items-center h-80\">\n                  <BaseLoader />\n                </div>\n              </slot>\n            </td>\n          </tr>\n\n          <tr v-else-if=\"!loading && !sortedRows?.length\">\n            <td :colspan=\"columns.length\">\n              <slot name=\"empty-state\">\n                <div\n                  class=\"flex flex-col gap-2 justify-center items-center py-12\"\n                >\n                  <h1 class=\"text-white font-semibold text-xl\">No items.</h1>\n                  <svgo-no-data class=\"text-[48px] text-dark4\" />\n                </div>\n              </slot>\n            </td>\n          </tr>\n\n          <template v-else>\n            <tr v-for=\"(row, index) in sortedRows\" :key=\"row.id\">\n              <td\n                v-for=\"(column, subIndex) in columns\"\n                :key=\"subIndex\"\n                :class=\"[\n                  'px-4 py-4 text-dark4 text-sm',\n                  column.align === 'center'\n                    ? 'text-center'\n                    : column.align === 'right'\n                      ? 'text-right'\n                      : 'text-left',\n                  column.cellClass ? column.cellClass : ''\n                ]\"\n              >\n                <slot\n                  v-if=\"$slots[`${column.key}-data`]\"\n                  :name=\"`${column.key}-data`\"\n                  :column=\"column\"\n                  :row=\"row\"\n                  :index=\"index\"\n                >\n                </slot>\n                <div\n                  v-else\n                  :class=\"{\n                    'text-center': column.align === 'center',\n                    'text-right': column.align === 'right'\n                  }\"\n                >\n                  <span class=\"truncate inline-block max-w-full\">\n                    {{ row[column.key] }}\n                  </span>\n                </div>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\n  import { computed, reactive } from 'vue';\n\n  type Column = {\n    key: string;\n    label: string;\n    sortable: boolean;\n    width?: string;\n    minWidth?: string;\n    maxWidth?: string;\n    cellClass?: string;\n    align?: 'left' | 'center' | 'right';\n  };\n\n  interface Props {\n    data: Array<any>;\n    columns: Array<Column>;\n    loading: boolean;\n  }\n\n  interface Sort {\n    column: string | null;\n    direction: string | null;\n  }\n\n  const props = defineProps<Props>();\n  const sortState: Sort = reactive({\n    column: null,\n    direction: null\n  });\n\n  const sortedRows = computed(() => {\n    if (sortState.direction && sortState.column) {\n      return [...props.data].sort((a, b) => {\n        const column = sortState.column as string;\n\n        if (a[column] < b[column])\n          return sortState.direction === 'asc' ? -1 : 1;\n        if (a[column] > b[column])\n          return sortState.direction === 'asc' ? 1 : -1;\n        return 0;\n      });\n    }\n\n    return props.data;\n  });\n\n  const sortData = (column: Column) => {\n    if (sortState.column === column.key) {\n      if (sortState.direction === 'asc') {\n        sortState.direction = 'desc';\n      } else if (sortState.direction === 'desc') {\n        sortState.direction = null;\n      } else {\n        sortState.direction = 'asc';\n      }\n    } else {\n      sortState.column = column.key;\n      sortState.direction = 'asc';\n    }\n  };\n</script>\n\n<style scoped>\n  @media (max-width: 640px) {\n    .overflow-x-auto:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 100%;\n      width: 16px;\n      background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1));\n      pointer-events: none;\n    }\n  }\n</style>\n","<template>\n  <div>\n    <Table :data=\"data\" :columns=\"columns\" :loading=\"loading\">\n      <template #embed-header>\n        <span\n          v-tooltip=\"{\n            text: 'Embed the vulnerability submission form to your website'\n          }\"\n        >\n          Embed\n        </span>\n      </template>\n      <template #status-data=\"{ row }\">\n        <svgo-status-active v-if=\"row.is_active\" class=\"text-primary\" />\n        <svgo-status-inactive v-else class=\"text-coral\" />\n      </template>\n      <template #name-data=\"{ row }\">\n        <BaseLink\n          v-if=\"props.active\"\n          :to=\"`/vdp/programs/${row.product_id}`\"\n          target=\"_self\"\n        >\n          <span class=\"text-white\">\n            {{ row.name }}\n          </span>\n        </BaseLink>\n        <span v-else class=\"text-white\">\n          {{ row.name }}\n        </span>\n      </template>\n      <template #fixed_on_time-data=\"{ row }\">\n        <span v-tooltip=\"{ text: tooltipText(row) }\">\n          {{ fixed_on_time(row) }}\n        </span>\n      </template>\n      <template #disclaimer-data=\"{ row }\">\n        <BaseButton class=\"icon-btn\" @click=\"onShowModalDisclaimer(row)\">\n          <svgo-disclaimer />\n        </BaseButton>\n      </template>\n      <template #embed-data=\"{ row }\">\n        <BaseButton\n          class=\"icon-btn\"\n          :disabled=\"!props.active\"\n          @click=\"onShowModalEmbed(row)\"\n        >\n          <svgo-embed class=\"text-dark4\" />\n        </BaseButton>\n      </template>\n    </Table>\n    <VendorModalDisclaimer\n      :open=\"openDisclaimerModal\"\n      :slug=\"slug\"\n      :text-to-copy=\"textToCopy\"\n      @update:open=\"onCloseModalDisclaimer\"\n    />\n    <VendorModalEmbed\n      :open=\"openEmbedModal\"\n      @update:open=\"openEmbedModal = false\"\n      :multiple=\"false\"\n      :title=\"modalEmbedTitle\"\n      :uuid=\"softwareUuid\"\n    />\n  </div>\n</template>\n\n<script setup>\n  import { getWordPressText } from '@/utils';\n  import { defineAsyncComponent, ref } from 'vue';\n\n  const VendorModalDisclaimer = defineAsyncComponent(\n    () => import('@/components/Vendor/ModalDisclaimer/ModalDisclaimer.vue')\n  );\n\n  const VendorModalEmbed = defineAsyncComponent(\n    () => import('@/components/Vendor/ModalEmbed/ModalEmbed.vue')\n  );\n\n  const props = defineProps({\n    data: {\n      type: Array,\n      required: true\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    active: {\n      type: Boolean,\n      default: true\n    }\n  });\n\n  const columns = [\n    { key: 'status', label: 'Status', sortable: false },\n    { key: 'name', label: 'Software name', sortable: true },\n    { key: 'vendor_contact_email', label: 'Recipient', sortable: true },\n    { key: 'reports_count', label: 'Vulns', sortable: false, align: 'center' },\n    {\n      key: 'fixed_reports_count',\n      label: 'Fixed',\n      sortable: false,\n      align: 'center'\n    },\n    {\n      key: 'fixed_on_time',\n      label: 'On time',\n      sortable: false,\n      align: 'center'\n    },\n    {\n      key: 'disclaimer',\n      label: 'Disclaimer',\n      sortable: false\n    },\n    { key: 'embed', label: 'Embed', sortable: false }\n  ];\n\n  const openDisclaimerModal = ref(false);\n  const openEmbedModal = ref(false);\n  const textToCopy = ref('');\n  const slug = ref('');\n  const modalEmbedTitle = ref('');\n  const softwareUuid = ref('');\n\n  const onShowModalDisclaimer = (row) => {\n    openDisclaimerModal.value = true;\n    slug.value = row.slug;\n    textToCopy.value = getWordPressText(row.slug);\n  };\n\n  const onCloseModalDisclaimer = () => {\n    openDisclaimerModal.value = false;\n    slug.value = '';\n    textToCopy.value = '';\n  };\n\n  const onShowModalEmbed = (row) => {\n    openEmbedModal.value = true;\n    modalEmbedTitle.value = `Embed a vulnerability report form for ${row.name}`;\n    softwareUuid.value = row.uuid;\n  };\n\n  const fixed_on_time = (row) => {\n    if (row.reports_count > 0 && row.fixed_reports_count > 0) {\n      return `${row.fixed_on_time}%`;\n    }\n    return '-';\n  };\n\n  const tooltipText = (row) => {\n    return fixed_on_time(row) === '-'\n      ? 'No reports to fix yet'\n      : 'Whether or not vulnerability was resolved within the suggested timeframe';\n  };\n</script>\n","<template>\n  <VendorProgramsTable\n    :data=\"allProducts.data\"\n    :loading=\"allProducts.loading\"\n  />\n</template>\n\n<script setup>\n  import { useProductsStore } from '@/stores/products/products';\n  import { storeToRefs } from 'pinia';\n  import { computed } from 'vue';\n\n  const store = useProductsStore();\n  await store.fetchProducts('all');\n\n  const { products } = storeToRefs(store);\n  const allProducts = computed(() => products.value.all);\n</script>\n","<template>\n  <BaseLink\n    to=\"https://patchstack.com/affiliates\"\n    target=\"_blank\"\n    class=\"w-full\"\n  >\n    <div class=\"relative\">\n      <BaseImage\n        format=\"webp\"\n        fit=\"contain\"\n        class=\"w-full h-auto rounded-lg\"\n        src=\"/images/affiliate-banner.webp\"\n        alt=\"Banner affiliate\"\n      />\n      <div\n        class=\"absolute top-[50%] left-[5%] translate-y-[-50%] flex flex-col gap-4 md:gap-8 w-80\"\n      >\n        <h2\n          class=\"text-white text-base lg:text-2xl font-semibold leading-6 md:leading-8\"\n        >\n          Start earning money by referring Patchstack!\n        </h2>\n        <BaseLink\n          class=\"bg-primary hover:bg-secondary duration-300 text-dark2 text-md md:text-base leading-6 p-1 md:p-3 w-36 md:w-44\"\n          to=\"https://patchstack.com/affiliates\"\n          target=\"_blank\"\n          >Become an affiliate</BaseLink\n        >\n      </div>\n    </div>\n  </BaseLink>\n</template>\n","<template>\n  <ScreenWrapper class=\"gradient\">\n    <template v-if=\"!programData.active\" #alert-1>\n      <Alert type=\"warning\">\n        <p class=\"text-dark2 px-2 lg:px-0 text-xs lg:text-base\">\n          Add the unique Patchstack point of disclosure to your first project\n          readme and verify ownership to start more programs.\n        </p>\n      </Alert>\n    </template>\n    <div class=\"flex flex-col items-center pt-8 pb-24 gap-16 px-4 md:px-0\">\n      <section class=\"w-full flex flex-col justify-center\">\n        <VendorPrograms :data=\"programData\" />\n      </section>\n      <section class=\"w-full\">\n        <BaseTabs :tabs=\"tabs\">\n          <template #tab-0>\n            <VendorTableAll v-if=\"user.vendor.is_account_active\" />\n            <VendorTablePending v-else />\n          </template>\n          <template v-if=\"user.vendor.is_account_active\" #tab-1>\n            <VendorTableOpen />\n          </template>\n          <template v-if=\"user.vendor.is_account_active\" #tab-2>\n            <VendorTablePending />\n          </template>\n        </BaseTabs>\n      </section>\n      <section class=\"w-full py-16\">\n        <VendorBannerAffiliate />\n      </section>\n    </div>\n  </ScreenWrapper>\n</template>\n\n<script setup>\n  import { useProductsStore } from '@/stores/products/products';\n  import { storeToRefs } from 'pinia';\n  import { computed, defineAsyncComponent, ref, watch } from 'vue';\n  const user = useSanctumUser();\n\n  const VendorTableOpen = defineAsyncComponent(\n    () => import('@/components/Vendor/TableOpen/TableOpen.vue')\n  );\n  const VendorTablePending = defineAsyncComponent(\n    () => import('@/components/Vendor/TablePending/TablePending.vue')\n  );\n\n  definePageMeta({\n    layout: 'vendor',\n    middleware: ['auth-vendor']\n  });\n\n  useSeoMeta({\n    title: 'Vendor Portal - Software'\n  });\n\n  const store = useProductsStore();\n  await store.fetchProductDetail();\n  const { productDetail: data } = storeToRefs(store);\n\n  const activeReports = computed(() => data.value?.data.active);\n  const openReports = computed(() => data.value?.data.open);\n  const pendingReports = computed(() => data.value?.data.pending);\n\n  const programData = computed(() => {\n    return {\n      active: data.value.data.active,\n      reports: data.value.data.reports,\n      fixed: data.value.data.reports > 0 ? `${data.value.data.fixed}%` : '-',\n      fixedOnTime:\n        data.value.data.reports > 0 ? `${data.value.data.fixedOnTime}%` : '-',\n      total: data.value.data.active + data.value.data.pending\n    };\n  });\n\n  // Conditionally set tabs based on user account status\n  const tabs = computed(() => {\n    if (user.value?.vendor?.is_account_active) {\n      return [\n        {\n          id: 0,\n          label: 'All programs',\n          postfix: activeReports.value + pendingReports.value\n        },\n        { id: 1, label: 'With open reports', postfix: openReports.value },\n        { id: 2, label: 'Pending activation', postfix: pendingReports.value }\n      ];\n    } else {\n      return [\n        { id: 0, label: 'Pending approval', postfix: pendingReports.value }\n      ];\n    }\n  });\n</script>\n"],"file":"_nuxt/W6w4Gcgj.js"}