@icvdeveloper/common-module 0.0.127 → 0.0.128

package/dist/runtime/components/affiliates/AffiliatePage.vue

@@ -1,329 +1,329 @@
-<script lang="ts" setup>
-import { toRefs } from "vue";
-import { get } from "lodash-es";
-import { useApi } from "../../composables/useApi";
-import { Affiliate } from "../../models/conference";
-import { affiliatePageClassObj } from "../../@types/components";
-import { useClassBinding } from "../../composables/useClassBinding";
-
-
-type Props = {
-  affiliateId: string;
-  classObject?: affiliatePageClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  classObject: () => {
-    return {
-      container: "",
-      headerContainer: "",
-      headerNameContainer: "",
-      headerNameElement: "",
-      headerContactContainer: "",
-      headerSocialContainer: "",
-      htmlHeaderContainer: "",
-      biographyContainer: "",
-      contentContainer: "",
-      affiliateContentBox: "flex flex-col w-full h-full overflow-y-auto p-4 border border-slate-300",
-    };
-  },
-});
-
-// data
-const { affiliateId } = toRefs(props);
-const { classBinding } = useClassBinding();
-const affiliate = ref<Affiliate>({documents:[],links:[],videos:[]});
-const showVideoModal = ref<boolean>(false);
-const modalVideoTitle = ref<string>("");
-const modalVideoUrl = ref<string>("");
-
-// computed
-const contentCount = computed((): number => {
-      let hasDocuments = (affiliate.value.documents.length > 0) ? 1 : 0;
-      let hasVideos = (affiliate.value.videos.length > 0) ? 1 : 0;
-      let hasLinks = (affiliate.value.links.length > 0) ? 1 : 0;
-      return hasDocuments + hasVideos + hasLinks;
-});
-const hasContactInfo = computed((): boolean => {
-      return (
-        affiliate.value.contact_photo ||
-        affiliate.value.contact_name ||
-        affiliate.value.contact_title ||
-        affiliate.value.contact_phone ||
-        affiliate.value.contact_email
-      );
-});
-const showLeftBottomBox = computed((): boolean => {
-      return (hasContactInfo.value || getAffiliateContentItem('custom_box_1'));
-});
-
-// methods
-const fireAnalytics = (type: string) => {
-  let event = 'affiliate-' + affiliate.value.name + '-' + type;
-  this.$analyticsPlugin.click(event, event);
-};
-
-const getAffiliateContentItem = (_item: string) => {
-  let itemVal = get(affiliate.value, 'affiliate_content.'+_item);
-  if (itemVal == undefined || itemVal == '') { return null; }
-  return itemVal;
-};
-
-const getAffiliateContent = () => {
-  return new Promise((resolve, reject) => {
-    const request = useApi();
-    request(
-      `/affiliates/${affiliateId.value}?with=affiliate_content,documents,videos,links`
-    )
-      .then((response) => {
-        affiliate.value = response.data;
-      })
-      .catch((error) => {
-        reject(error);
-      });
-  });
-};
-
-const getStreamingVideoUrl = (_videoUrl: string): string => {
-  let tmpUrl = 'https://cdn.v3mediaportal.com/streaming-player/iframe-player.htm?';
-  tmpUrl += 'cs=' + encodeURIComponent(_videoUrl);
-  tmpUrl += '&ar=16:9&f=video&as=false';
-  return tmpUrl;
-};
-
-const openVideoModal = (_title: string, _videoUrl: string) => {
-  fireAnalytics('video-' + _title);
-  let tmpUrl = getStreamingVideoUrl(_videoUrl);
-  modalVideoUrl.value = tmpUrl;
-  modalVideoTitle.value = _title;
-  showVideoModal.value = true;
-};
-
-// on mount
-onMounted(() => {
-  getAffiliateContent();
-});
-
-</script>
-
-<template>
-  <div
-  :class="
-      classBinding(
-        classObject,
-        'container',
-        'flex w-full flex-col'
-      )
-    "
-  >
-
-    <div v-if="getAffiliateContentItem('html_vanity_page')" v-html="getAffiliateContentItem('html_vanity_page')">
-    </div>
-
-    <div v-else>
-
-      <div :class="classBinding(
-          classObject,
-          'headerContainer',
-          'flex flex-col md:flex-row w-full pb-6 border-b border-solid border-grey-light'
-        )">
-        <div v-if="affiliate.photo" class="mb-6 md:mb-0">
-          <img :src="affiliate.photo" />
-        </div>
-        <div
-          v-if="!affiliate.photo"
-          :class="classBinding(
-            classObject,
-            'headerNameContainer',
-            'flex w-full justify-center md:justify-start'
-          )"
-        >
-          <h1 :class="classBinding(classObject, 'headerNameElement', 'font-light mb-0 body-color-4 self-end')">{{affiliate.name}}</h1>
-        </div>
-        <div
-          v-if="getAffiliateContentItem('contact_in_header') == 1"
-          :class="classBinding(classObject, 'headerContactContainer', 'w-full text-center md:text-right')"
-        >
-          <p>
-            <span v-if="affiliate.contact_address">{{affiliate.contact_address}}<br/></span>
-            <span v-if="affiliate.contact_location">{{affiliate.contact_location}}<br/></span>
-            <span v-if="affiliate.website"><a @click="fireAnalytics('website')" class="affiliate-website" :href="affiliate.website" target="_blank">{{affiliate.website}}</a><br/></span>
-          </p>
-          <span :class="classBinding(classObject, 'headerSocialContainer', 'flex justify-center md:justify-end')">
-            <a @click="fireAnalytics('twitter')" v-if="affiliate.twitter_url" :href="affiliate.twitter_url" target="_blank" class="affiliate-twitter" :aria-label="affiliate.name + ` Twitter Page`">
-                <span class="presenter-icon"><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
-            </a>
-            <a @click="fireAnalytics('facebook')" v-if="affiliate.facebook_url" :href="affiliate.facebook_url" target="_blank" class="affiliate-facebook" :aria-label="affiliate.name + ` Facebook Page`">
-                <span class="presenter-icon "><CommonSvgIcon icon="facebook"></CommonSvgIcon></span>
-            </a>
-            <a @click="fireAnalytics('linked_in')" v-if="affiliate.linkedin_url" :href="affiliate.linkedin_url" target="_blank" class="affiliate-linkedin" :aria-label="affiliate.name + ` LinkedIn Page`">
-                <span class="presenter-icon"><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
-            </a>
-            <a @click="fireAnalytics('youtube')" v-if="affiliate.youtube_url" :href="affiliate.youtube_url" target="_blank" class="affiliate-youtube" :aria-label="affiliate.name + ` YouTube Page`">
-                <span class="presenter-icon"><CommonSvgIcon icon="youtube"></CommonSvgIcon></span>
-            </a>
-          </span>
-        </div>
-      </div>
-
-      <div
-        v-if="getAffiliateContentItem('html_header')"
-        v-html="getAffiliateContentItem('html_header')"
-        :class="classBinding(classObject, 'htmlHeaderContainer', 'w-full mt-5 text-center md:text-left')"
-      ></div>
-      <div
-        v-if="affiliate.biography"
-        v-html="affiliate.biography"
-        :class="classBinding(classObject, 'biographyContainer', 'w-full mt-5 text-center md:text-left')"
-      ></div>
-      <div
-        v-if="contentCount>0"
-        class="grid-container-responsive"
-        :class="classBinding(classObject, 'contentContainer', 'w-full mt-5 md:max-h-300')"
-      >
-
-        <div v-if="affiliate.documents.length>0">
-          <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-            <h3 class="mb-3">Documents</h3>
-            <span v-for="document in affiliate.documents" :key="document.id">
-              <div class="mb-2"><a @click="fireAnalytics('document-' + document.name)" class="affiliate-document" :href="document.url" target="_blank">{{ document.name }}</a></div>
-            </span>
-          </div>
-        </div>
-        <div v-if="affiliate.videos.length>0">
-          <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-            <div v-if="affiliate.videos.length == 1 && getAffiliateContentItem('embed_video') == 1">
-              <iframe
-                  :src="getStreamingVideoUrl(affiliate.videos[0].url)"
-                  width="100%"
-                  style="max-width: 300px; margin:auto;"
-                  scrolling="no"
-                  frameborder="0"
-                  marginheight="0"
-                  marginwidth="0"
-                  allowfullscreen="">
-              </iframe>
-            </div>
-            <div v-else>
-              <h3 class="mb-3">Videos</h3>
-              <input name="affiliateName" type="hidden" id="affiliateName" :value="affiliate.name">
-              <span v-for="video in affiliate.videos" :key="video.id">
-                <div class="mb-2"><a href="javascript:null" class="affiliate-video-trigger" @click="openVideoModal(video.name, video.url)">{{ video.name }}</a></div>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div v-if="affiliate.links.length>0">
-          <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-            <h3 class="mb-3">Links</h3>
-            <span v-for="link in affiliate.links" :key="link.id">
-              <div class="mb-2"><a @click="fireAnalytics('external_link-' + link.name)" :href="link.url" class="affiliate-link" target="_blank">{{ link.name }}</a></div>
-            </span>
-          </div>
-        </div>
-
-      </div>
-      <div class="grid-container-responsive mt-5">
-        <div v-if="showLeftBottomBox" :class="classBinding(classObject, 'affiliateContentBox', '')">
-          <div v-if="getAffiliateContentItem('custom_box_1')"  v-html="getAffiliateContentItem('custom_box_1')"></div>
-          <div v-else-if="hasContactInfo">
-            <div class="flex flex-col md:flex-row">
-              <div v-if="affiliate.contact_photo" class="mr-4 w-1/3 mb-3 md:mb-0 self-center md:self-start">
-                  <img :src="affiliate.contact_photo" class="w-full" />
-              </div>
-              <div class="text-center md:text-left">
-                <p>Contact:</p>
-                <p>
-                  <span v-if="affiliate.contact_name">{{affiliate.contact_name}}<br/></span>
-                  <span v-if="affiliate.contact_title">{{affiliate.contact_title}}<br/></span>
-                  <span v-if="affiliate.contact_phone">Phone: {{affiliate.contact_phone}}<br/></span>
-                  <span v-if="affiliate.contact_email">
-                    <a @click="fireAnalytics('contact_email')" class="affiliate-email" :href="'mailto:' + affiliate.contact_email">
-                      {{affiliate.contact_email}}
-                    </a><br />
-                  </span>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div :class="classBinding(classObject, 'affiliateContentBox', '')">
-          <div v-if="getAffiliateContentItem('custom_box_2')" v-html="getAffiliateContentItem('custom_box_2')"></div>
-          <div v-else class="text-center md:text-right">
-            <p>
-              <span v-if="affiliate.contact_address">{{affiliate.contact_address}}<br/></span>
-              <span v-if="affiliate.contact_location">{{affiliate.contact_location}}<br/></span>
-              <span v-if="affiliate.website"><a @click="fireAnalytics('website')" class="affiliate-website" :href="affiliate.website" target="_blank">{{affiliate.website}}</a><br/></span>
-            </p>
-            <span class="flex justify-center" :class="{'md:justify-end':hasContactInfo}">
-              <a @click="fireAnalytics('twitter')" v-if="affiliate.twitter_url" :href="affiliate.twitter_url" target="_blank" class="affiliate-twitter" :aria-label="affiliate.name + ` Twitter Page`">
-                  <span class="presenter-icon"><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
-              </a>
-              <a @click="fireAnalytics('facebook')" v-if="affiliate.facebook_url" :href="affiliate.facebook_url" target="_blank" class="affiliate-facebook" :aria-label="affiliate.name + ` Facebook Page`">
-                  <span class="presenter-icon "><CommonSvgIcon icon="facebook"></CommonSvgIcon></span>
-              </a>
-              <a @click="fireAnalytics('linked_in')" v-if="affiliate.linkedin_url" :href="affiliate.linkedin_url" target="_blank" class="affiliate-linkedin" :aria-label="affiliate.name + ` LinkedIn Page`">
-                  <span class="presenter-icon"><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
-              </a>
-              <a @click="fireAnalytics('youtube')" v-if="affiliate.youtube_url" :href="affiliate.youtube_url" target="_blank" class="affiliate-youtube" :aria-label="affiliate.name + ` YouTube Page`">
-                  <span class="presenter-icon"><CommonSvgIcon icon="youtube"></CommonSvgIcon></span>
-              </a>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <CommonModal :visible="showVideoModal" modal-size="lg" @clicked="showVideoModal = false" class="video-dialog">
-      <template #modal-title>
-        <div class="p-1 pb-2">
-          {{ modalVideoTitle }}
-        </div>
-      </template>
-      <template #modal-body>
-        <div class="video-modal-body">
-          <iframe
-              class='video-frame'
-              :src="modalVideoUrl"
-              width="640"
-              height="360"
-              scrolling="no"
-              frameborder="0"
-              marginheight="0"
-              marginwidth="0"
-              allowfullscreen="">
-          </iframe>
-        </div>
-      </template>
-    </CommonModal>
-
-</div>
-
-</template>
-
-<style scoped>
-.grid-container-responsive {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-}
-@media (min-width: 768px) {
-  .grid-container-responsive {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  }
-}
-.video-dialog >>> .modal-box {
-    width: 704px;
-}
-.video-frame {
-    display: block;
-    width: 640px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: auto;
-    padding-right: auto;
-}
-</style>
-
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { get } from "lodash-es";
+import { useApi } from "../../composables/useApi";
+import { Affiliate } from "../../models/conference";
+import { affiliatePageClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
+
+
+type Props = {
+  affiliateId: string;
+  classObject?: affiliatePageClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      headerContainer: "",
+      headerNameContainer: "",
+      headerNameElement: "",
+      headerContactContainer: "",
+      headerSocialContainer: "",
+      htmlHeaderContainer: "",
+      biographyContainer: "",
+      contentContainer: "",
+      affiliateContentBox: "flex flex-col w-full h-full overflow-y-auto p-4 border border-slate-300",
+    };
+  },
+});
+
+// data
+const { affiliateId } = toRefs(props);
+const { classBinding } = useClassBinding();
+const affiliate = ref<Affiliate>({documents:[],links:[],videos:[]});
+const showVideoModal = ref<boolean>(false);
+const modalVideoTitle = ref<string>("");
+const modalVideoUrl = ref<string>("");
+
+// computed
+const contentCount = computed((): number => {
+      let hasDocuments = (affiliate.value.documents.length > 0) ? 1 : 0;
+      let hasVideos = (affiliate.value.videos.length > 0) ? 1 : 0;
+      let hasLinks = (affiliate.value.links.length > 0) ? 1 : 0;
+      return hasDocuments + hasVideos + hasLinks;
+});
+const hasContactInfo = computed((): boolean => {
+      return (
+        affiliate.value.contact_photo ||
+        affiliate.value.contact_name ||
+        affiliate.value.contact_title ||
+        affiliate.value.contact_phone ||
+        affiliate.value.contact_email
+      );
+});
+const showLeftBottomBox = computed((): boolean => {
+      return (hasContactInfo.value || getAffiliateContentItem('custom_box_1'));
+});
+
+// methods
+const fireAnalytics = (type: string) => {
+  let event = 'affiliate-' + affiliate.value.name + '-' + type;
+  this.$analyticsPlugin.click(event, event);
+};
+
+const getAffiliateContentItem = (_item: string) => {
+  let itemVal = get(affiliate.value, 'affiliate_content.'+_item);
+  if (itemVal == undefined || itemVal == '') { return null; }
+  return itemVal;
+};
+
+const getAffiliateContent = () => {
+  return new Promise((resolve, reject) => {
+    const request = useApi();
+    request(
+      `/affiliates/${affiliateId.value}?with=affiliate_content,documents,videos,links`
+    )
+      .then((response) => {
+        affiliate.value = response.data;
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+};
+
+const getStreamingVideoUrl = (_videoUrl: string): string => {
+  let tmpUrl = 'https://cdn.v3mediaportal.com/streaming-player/iframe-player.htm?';
+  tmpUrl += 'cs=' + encodeURIComponent(_videoUrl);
+  tmpUrl += '&ar=16:9&f=video&as=false';
+  return tmpUrl;
+};
+
+const openVideoModal = (_title: string, _videoUrl: string) => {
+  fireAnalytics('video-' + _title);
+  let tmpUrl = getStreamingVideoUrl(_videoUrl);
+  modalVideoUrl.value = tmpUrl;
+  modalVideoTitle.value = _title;
+  showVideoModal.value = true;
+};
+
+// on mount
+onMounted(() => {
+  getAffiliateContent();
+});
+
+</script>
+
+<template>
+  <div
+  :class="
+      classBinding(
+        classObject,
+        'container',
+        'flex w-full flex-col'
+      )
+    "
+  >
+
+    <div v-if="getAffiliateContentItem('html_vanity_page')" v-html="getAffiliateContentItem('html_vanity_page')">
+    </div>
+
+    <div v-else>
+
+      <div :class="classBinding(
+          classObject,
+          'headerContainer',
+          'flex flex-col md:flex-row w-full pb-6 border-b border-solid border-grey-light'
+        )">
+        <div v-if="affiliate.photo" class="mb-6 md:mb-0">
+          <img :src="affiliate.photo" />
+        </div>
+        <div
+          v-if="!affiliate.photo"
+          :class="classBinding(
+            classObject,
+            'headerNameContainer',
+            'flex w-full justify-center md:justify-start'
+          )"
+        >
+          <h1 :class="classBinding(classObject, 'headerNameElement', 'font-light mb-0 body-color-4 self-end')">{{affiliate.name}}</h1>
+        </div>
+        <div
+          v-if="getAffiliateContentItem('contact_in_header') == 1"
+          :class="classBinding(classObject, 'headerContactContainer', 'w-full text-center md:text-right')"
+        >
+          <p>
+            <span v-if="affiliate.contact_address">{{affiliate.contact_address}}<br/></span>
+            <span v-if="affiliate.contact_location">{{affiliate.contact_location}}<br/></span>
+            <span v-if="affiliate.website"><a @click="fireAnalytics('website')" class="affiliate-website" :href="affiliate.website" target="_blank">{{affiliate.website}}</a><br/></span>
+          </p>
+          <span :class="classBinding(classObject, 'headerSocialContainer', 'flex justify-center md:justify-end')">
+            <a @click="fireAnalytics('twitter')" v-if="affiliate.twitter_url" :href="affiliate.twitter_url" target="_blank" class="affiliate-twitter" :aria-label="affiliate.name + ` Twitter Page`">
+                <span class="presenter-icon"><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
+            </a>
+            <a @click="fireAnalytics('facebook')" v-if="affiliate.facebook_url" :href="affiliate.facebook_url" target="_blank" class="affiliate-facebook" :aria-label="affiliate.name + ` Facebook Page`">
+                <span class="presenter-icon "><CommonSvgIcon icon="facebook"></CommonSvgIcon></span>
+            </a>
+            <a @click="fireAnalytics('linked_in')" v-if="affiliate.linkedin_url" :href="affiliate.linkedin_url" target="_blank" class="affiliate-linkedin" :aria-label="affiliate.name + ` LinkedIn Page`">
+                <span class="presenter-icon"><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
+            </a>
+            <a @click="fireAnalytics('youtube')" v-if="affiliate.youtube_url" :href="affiliate.youtube_url" target="_blank" class="affiliate-youtube" :aria-label="affiliate.name + ` YouTube Page`">
+                <span class="presenter-icon"><CommonSvgIcon icon="youtube"></CommonSvgIcon></span>
+            </a>
+          </span>
+        </div>
+      </div>
+
+      <div
+        v-if="getAffiliateContentItem('html_header')"
+        v-html="getAffiliateContentItem('html_header')"
+        :class="classBinding(classObject, 'htmlHeaderContainer', 'w-full mt-5 text-center md:text-left')"
+      ></div>
+      <div
+        v-if="affiliate.biography"
+        v-html="affiliate.biography"
+        :class="classBinding(classObject, 'biographyContainer', 'w-full mt-5 text-center md:text-left')"
+      ></div>
+      <div
+        v-if="contentCount>0"
+        class="grid-container-responsive"
+        :class="classBinding(classObject, 'contentContainer', 'w-full mt-5 md:max-h-300')"
+      >
+
+        <div v-if="affiliate.documents.length>0">
+          <div :class="classBinding(classObject, 'affiliateContentBox', '')">
+            <h3 class="mb-3">Documents</h3>
+            <span v-for="document in affiliate.documents" :key="document.id">
+              <div class="mb-2"><a @click="fireAnalytics('document-' + document.name)" class="affiliate-document" :href="document.url" target="_blank">{{ document.name }}</a></div>
+            </span>
+          </div>
+        </div>
+        <div v-if="affiliate.videos.length>0">
+          <div :class="classBinding(classObject, 'affiliateContentBox', '')">
+            <div v-if="affiliate.videos.length == 1 && getAffiliateContentItem('embed_video') == 1">
+              <iframe
+                  :src="getStreamingVideoUrl(affiliate.videos[0].url)"
+                  width="100%"
+                  style="max-width: 300px; margin:auto;"
+                  scrolling="no"
+                  frameborder="0"
+                  marginheight="0"
+                  marginwidth="0"
+                  allowfullscreen="">
+              </iframe>
+            </div>
+            <div v-else>
+              <h3 class="mb-3">Videos</h3>
+              <input name="affiliateName" type="hidden" id="affiliateName" :value="affiliate.name">
+              <span v-for="video in affiliate.videos" :key="video.id">
+                <div class="mb-2"><a href="javascript:null" class="affiliate-video-trigger" @click="openVideoModal(video.name, video.url)">{{ video.name }}</a></div>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div v-if="affiliate.links.length>0">
+          <div :class="classBinding(classObject, 'affiliateContentBox', '')">
+            <h3 class="mb-3">Links</h3>
+            <span v-for="link in affiliate.links" :key="link.id">
+              <div class="mb-2"><a @click="fireAnalytics('external_link-' + link.name)" :href="link.url" class="affiliate-link" target="_blank">{{ link.name }}</a></div>
+            </span>
+          </div>
+        </div>
+
+      </div>
+      <div class="grid-container-responsive mt-5">
+        <div v-if="showLeftBottomBox" :class="classBinding(classObject, 'affiliateContentBox', '')">
+          <div v-if="getAffiliateContentItem('custom_box_1')"  v-html="getAffiliateContentItem('custom_box_1')"></div>
+          <div v-else-if="hasContactInfo">
+            <div class="flex flex-col md:flex-row">
+              <div v-if="affiliate.contact_photo" class="mr-4 w-1/3 mb-3 md:mb-0 self-center md:self-start">
+                  <img :src="affiliate.contact_photo" class="w-full" />
+              </div>
+              <div class="text-center md:text-left">
+                <p>Contact:</p>
+                <p>
+                  <span v-if="affiliate.contact_name">{{affiliate.contact_name}}<br/></span>
+                  <span v-if="affiliate.contact_title">{{affiliate.contact_title}}<br/></span>
+                  <span v-if="affiliate.contact_phone">Phone: {{affiliate.contact_phone}}<br/></span>
+                  <span v-if="affiliate.contact_email">
+                    <a @click="fireAnalytics('contact_email')" class="affiliate-email" :href="'mailto:' + affiliate.contact_email">
+                      {{affiliate.contact_email}}
+                    </a><br />
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div :class="classBinding(classObject, 'affiliateContentBox', '')">
+          <div v-if="getAffiliateContentItem('custom_box_2')" v-html="getAffiliateContentItem('custom_box_2')"></div>
+          <div v-else class="text-center md:text-right">
+            <p>
+              <span v-if="affiliate.contact_address">{{affiliate.contact_address}}<br/></span>
+              <span v-if="affiliate.contact_location">{{affiliate.contact_location}}<br/></span>
+              <span v-if="affiliate.website"><a @click="fireAnalytics('website')" class="affiliate-website" :href="affiliate.website" target="_blank">{{affiliate.website}}</a><br/></span>
+            </p>
+            <span class="flex justify-center" :class="{'md:justify-end':hasContactInfo}">
+              <a @click="fireAnalytics('twitter')" v-if="affiliate.twitter_url" :href="affiliate.twitter_url" target="_blank" class="affiliate-twitter" :aria-label="affiliate.name + ` Twitter Page`">
+                  <span class="presenter-icon"><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
+              </a>
+              <a @click="fireAnalytics('facebook')" v-if="affiliate.facebook_url" :href="affiliate.facebook_url" target="_blank" class="affiliate-facebook" :aria-label="affiliate.name + ` Facebook Page`">
+                  <span class="presenter-icon "><CommonSvgIcon icon="facebook"></CommonSvgIcon></span>
+              </a>
+              <a @click="fireAnalytics('linked_in')" v-if="affiliate.linkedin_url" :href="affiliate.linkedin_url" target="_blank" class="affiliate-linkedin" :aria-label="affiliate.name + ` LinkedIn Page`">
+                  <span class="presenter-icon"><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
+              </a>
+              <a @click="fireAnalytics('youtube')" v-if="affiliate.youtube_url" :href="affiliate.youtube_url" target="_blank" class="affiliate-youtube" :aria-label="affiliate.name + ` YouTube Page`">
+                  <span class="presenter-icon"><CommonSvgIcon icon="youtube"></CommonSvgIcon></span>
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <CommonModal :visible="showVideoModal" modal-size="lg" @clicked="showVideoModal = false" class="video-dialog">
+      <template #modal-title>
+        <div class="p-1 pb-2">
+          {{ modalVideoTitle }}
+        </div>
+      </template>
+      <template #modal-body>
+        <div class="video-modal-body">
+          <iframe
+              class='video-frame'
+              :src="modalVideoUrl"
+              width="640"
+              height="360"
+              scrolling="no"
+              frameborder="0"
+              marginheight="0"
+              marginwidth="0"
+              allowfullscreen="">
+          </iframe>
+        </div>
+      </template>
+    </CommonModal>
+
+</div>
+
+</template>
+
+<style scoped>
+.grid-container-responsive {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+@media (min-width: 768px) {
+  .grid-container-responsive {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+}
+.video-dialog >>> .modal-box {
+    width: 704px;
+}
+.video-frame {
+    display: block;
+    width: 640px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: auto;
+    padding-right: auto;
+}
+</style>
+