@icvdeveloper/common-module 0.0.1

package/dist/runtime/components/core/ZoomModal.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+
+interface Props {
+  presentationId: number | string;
+  modalSize?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modalSize: "full",
+});
+
+const { modalSize, presentationId } = toRefs(props);
+
+const showModal = ref<boolean>(false);
+
+const zoomUrl = computed(() => {
+  return `/zoom/${presentationId.value}/meeting`;
+});
+</script>
+
+<template>
+  <span>
+    <CommonModal
+      :visible="showModal"
+      :modal-size="modalSize"
+      @trigger="showModal = false"
+    >
+      <template #modal-body>
+        <iframe :src="zoomUrl" class="w-full h-full"></iframe>
+      </template>
+    </CommonModal>
+    <a class="no-underline" href="javascript:null" @click="showModal = true">
+      <slot name="modal-link"></slot>
+    </a>
+  </span>
+</template>

package/dist/runtime/components/events/EventHeader.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { Conference } from "../../models/conference";
+import { useTemplateConfigsStore } from "../../store/templateConfigs";
+import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
+
+interface Props {
+  conference: Conference;
+  useEventText?: boolean;
+}
+
+// Component Props
+const props = withDefaults(defineProps<Props>(), {
+  useEventText: true,
+});
+
+// reactive data
+const { useEventText, conference } = toRefs(props);
+
+// helper functions
+const {
+  getConferenceDisplayDate,
+  showConferenceWebcastButton,
+  getConferenceWebcastUrl,
+  getConferenceWebcastButtonText,
+  showViewArchiveButton,
+  getViewArchiveUrl,
+  getViewArchiveButtonText,
+  showConferenceRegButton,
+  getConferenceRegUrl,
+  getConferenceRegText,
+} = useConferenceHelpers(conference);
+
+// store methods
+const { globalConfigValue, pagesConfigValue } = storeToRefs(
+  useTemplateConfigsStore()
+);
+
+// computed properties
+const mainStyles = computed(() => {
+  if (useEventText.value) {
+    return {
+      "background-image": `url(${conference.value.photo_large})`,
+      "background-repeat": "no-repeat",
+      "background-size": "cover",
+      "background-position": "center",
+    };
+  } else {
+    return {};
+  }
+});
+
+const mutedHeaderStyle = computed(() => {
+  const muted = globalConfigValue.value("muted_photo_headers");
+  if (muted === "lighten") return "background-color: rgb(255, 255, 255, .4)";
+  if (muted === "darken") return "background-color: rgb(0, 0, 0, .4)";
+  return "";
+});
+
+const hasOtherButton = computed(() => {
+  return showViewArchiveButton() || showConferenceWebcastButton();
+});
+
+const mainBodyImage = computed(() => {
+  return conference.value.photo_large;
+});
+</script>
+
+<template>
+  <div :style="mainStyles" class="flex bg-color-2">
+    <div
+      v-if="useEventText"
+      class="text-center flex flex-1 flex-col items-center justify-center h-auto p-12"
+      :style="mutedHeaderStyle"
+    >
+      <h1
+        class="text-shadow font-bold heading-color-1 mt-4 mb-4 text-2xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
+      >
+        {{ conference.name }}
+      </h1>
+      <h1
+        v-if="conference.location"
+        class="text-shadow font-light heading-color-2 mb-2 text-2xl sm:text-l md:text-xl lg:text-2xl xl:text-3xl"
+      >
+        {{ conference.location }}
+      </h1>
+      <h3
+        v-if="pagesConfigValue('main.use_event_text_date')"
+        class="text-shadow font-light heading-color-2 mb-2 text-l sm:text-l md:text-xl lg:text-2xl xl:text-3xl"
+      >
+        {{ getConferenceDisplayDate() }}
+      </h3>
+
+      <div class="flex-row mt-6">
+        <!-- view test stream or webcast -->
+        <a
+          v-if="showConferenceWebcastButton()"
+          :href="getConferenceWebcastUrl()"
+          :target="/^http/.test(getConferenceWebcastUrl()) ? '_blank' : '_self'"
+        >
+          <button class="btn">
+            {{ getConferenceWebcastButtonText() }}
+          </button>
+        </a>
+
+        <!-- view archive -->
+        <a
+          v-if="showViewArchiveButton()"
+          :href="getViewArchiveUrl()"
+          :target="/^http/.test(getViewArchiveUrl()) ? '_blank' : '_self'"
+        >
+          <button class="btn">
+            {{ getViewArchiveButtonText() }}
+          </button>
+        </a>
+
+        <!-- register -->
+        <a
+          v-if="showConferenceRegButton()"
+          :href="getConferenceRegUrl()"
+          :target="/^http/.test(getConferenceRegUrl()) ? '_blank' : '_self'"
+        >
+          <button class="btn" :class="hasOtherButton ? 'md:ml-4' : ''">
+            {{ getConferenceRegText() }}
+          </button>
+        </a>
+      </div>
+    </div>
+    <img v-else :src="mainBodyImage" class="w-full h-auto" />
+  </div>
+</template>

package/dist/runtime/components/events/PastEvents.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { Conference } from "../../models/conference";
+
+const router = useRouter();
+const route = useRoute();
+
+// data
+const { pastEvents } = storeToRefs(useConferencesStore());
+const { isLoggedIn } = storeToRefs(useAuthStore());
+const loginModalVisible = ref<boolean>(false);
+const conferenceToLoginTo = ref<Conference | null>(null);
+
+// methods
+const { formatDate } = useDateFormat();
+const { pagesConfigValue, globalConfigValue } = storeToRefs(
+  useTemplateConfigsStore()
+);
+const {
+  isSingleDayEvent,
+  showViewArchiveButton,
+  getViewArchiveUrl,
+  getViewArchiveButtonText,
+  getConferenceRegUrl,
+  getConferenceRegText,
+  showConferenceRegButton,
+} = useConferenceHelpers(pastEvents);
+
+const goEventPage = (conference: Conference) => {
+  router.push(`/upcoming-events/${conference.id}`);
+};
+
+const setConferenceToLoginTo = (conference: Conference) => {
+  conferenceToLoginTo.value = conference;
+  loginModalVisible.value = true;
+};
+
+// computed
+const buttonClass = computed(() => {
+  return pagesConfigValue.value("main.countdown_timer")
+    ? "mb-2 w-5/6 sm:mr-1 sm:w-auto md:mr-0 md:w-full xl:mr-1 xl:w-auto btn btn-secondary"
+    : "mb-2 w-5/6 sm:mr-1 sm:w-auto btn btn-secondary";
+});
+
+const isHomePage = computed(() => {
+  return route.name === "index";
+});
+</script>
+
+<template>
+  <div class="flex w-full flex-col">
+    <div class="container flex-1 mx-auto">
+      <div
+        v-for="conference in pastEvents"
+        :key="conference.id"
+        class="flex flex-col items-start md:flex-row py-8"
+      >
+        <div class="flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden">
+          <img
+            class="flex-1 self-center mx-auto w-full"
+            :src="conference.photo"
+          />
+        </div>
+        <div
+          class="flex flex-col w-full justify-center items-center self-center text-center pt-3 md:w-2/3 md:px-6 md:text-left md:justify-start md:items-start"
+        >
+          <div class="w-full border-1 border-b border-color-accent-2">
+            <nuxt-link
+              :to="`/past-events/${conference.id}`"
+              class="no-underline"
+            >
+              <h2
+                class="text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment"
+              >
+                {{ conference.name }}
+              </h2>
+            </nuxt-link>
+            <p
+              class="text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg"
+            >
+              {{ formatDate(conference.start_date) }}
+              <span v-if="!isSingleDayEvent(conference)">
+                - {{ formatDate(conference.end_date) }}</span
+              >
+            </p>
+          </div>
+          <div class="flex flex-col md:flex-row w-full mt-4">
+            <div class="mt-2 mr-0 md:mr-4 flex-col sm:flex-auto sm:flex-row">
+              <button :class="buttonClass" @click="goEventPage(conference)">
+                View Info
+              </button>
+              <!-- view or preview archive -->
+              <a
+                v-if="showViewArchiveButton(conference)"
+                :href="getViewArchiveUrl(conference)"
+                :target="
+                  /^http/.test(getViewArchiveUrl(conference))
+                    ? '_blank'
+                    : '_self'
+                "
+              >
+                <button :class="buttonClass">
+                  {{ getViewArchiveButtonText(conference) }}
+                </button>
+              </a>
+
+              <!-- login -->
+              <button
+                v-if="
+                  isHomePage &&
+                  !isLoggedIn &&
+                  !globalConfigValue('townhall_registration_enabled')
+                "
+                :class="buttonClass"
+                @click="setConferenceToLoginTo(conference)"
+              >
+                Log In
+              </button>
+
+              <!-- register -->
+              <a
+                v-if="showConferenceRegButton(conference)"
+                :href="getConferenceRegUrl(conference)"
+                :target="
+                  /^http/.test(getConferenceRegUrl(conference))
+                    ? '_blank'
+                    : '_self'
+                "
+              >
+                <button :class="buttonClass">
+                  {{ getConferenceRegText(conference) }}
+                </button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <CommonModal
+      :visible="loginModalVisible"
+      @trigger="loginModalVisible = false"
+    >
+      <template #modal-body>
+        <CommonLoginFullWidth :conference="conferenceToLoginTo" />
+      </template>
+    </CommonModal>
+  </div>
+</template>

package/dist/runtime/components/events/UpcomingEvents.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
+import { Conference } from "../../models/conference";
+
+const router = useRouter();
+
+// data
+const { upcomingEvents } = storeToRefs(useConferencesStore());
+const { isLoggedIn } = storeToRefs(useAuthStore());
+const loginModalVisible = ref<boolean>(false);
+const conferenceToLoginTo = ref<Conference | null>(null);
+
+// methods
+const { pagesConfigValue, globalConfigValue } = storeToRefs(
+  useTemplateConfigsStore()
+);
+const { formatDate } = useDateFormat();
+const {
+  isSingleDayEvent,
+  showConferenceViewButton,
+  getConferenceWebcastUrl,
+  getConferenceWebcastButtonText,
+  getConferenceRegUrl,
+  getConferenceRegText,
+  showConferenceRegButton,
+} = useConferenceHelpers(upcomingEvents);
+const goEventPage = (conference: Conference) => {
+  router.push(`/upcoming-events/${conference.id}`);
+};
+const setConferenceToLoginTo = (conference: Conference) => {
+  conferenceToLoginTo.value = conference;
+  loginModalVisible.value = true;
+};
+
+// computed
+const buttonClass = computed(() => {
+  return pagesConfigValue.value("main.countdown_timer")
+    ? "mb-2 w-5/6 sm:mr-1 sm:w-auto md:mr-0 md:w-full xl:mr-1 xl:w-auto btn btn-secondary"
+    : "mb-2 w-5/6 sm:mr-1 sm:w-auto btn btn-secondary";
+});
+</script>
+
+<template>
+  <div class="flex w-full flex-col">
+    <div class="container flex-1 mx-auto">
+      <div
+        v-for="conference in upcomingEvents"
+        :key="conference.id"
+        class="flex flex-col items-start md:flex-row py-8"
+      >
+        <div class="flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden">
+          <img
+            class="flex-1 self-center mx-auto w-full"
+            :src="conference.photo"
+          />
+        </div>
+
+        <div
+          class="flex flex-col w-full justify-center items-center self-center text-center pt-3 md:w-2/3 md:px-6 md:text-left md:justify-start md:items-start"
+        >
+          <div class="w-full border-1 border-b border-color-accent-2">
+            <nuxt-link
+              :to="`/upcoming-events/${conference.id}`"
+              class="no-underline"
+            >
+              <h2
+                class="text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment"
+              >
+                {{ conference.name }}
+              </h2>
+            </nuxt-link>
+            <p
+              class="text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg"
+            >
+              {{ formatDate(conference.start_date) }}
+              <span v-if="!isSingleDayEvent(conference)">
+                - {{ formatDate(conference.end_date) }}</span
+              >
+            </p>
+          </div>
+          <div class="flex flex-col md:flex-row w-full mt-4">
+            <div class="mt-2 mr-0 md:mr-4 flex-col xl:flex-auto xl:flex-row">
+              <button :class="buttonClass" @click="goEventPage(conference)">
+                View Info
+              </button>
+              <a
+                v-if="showConferenceViewButton(conference)"
+                :href="getConferenceWebcastUrl(conference)"
+              >
+                <button :class="buttonClass">
+                  {{ getConferenceWebcastButtonText(conference) }}
+                </button>
+              </a>
+              <button
+                v-if="
+                  !isLoggedIn &&
+                  !globalConfigValue('townhall_registration_enabled')
+                "
+                :class="buttonClass"
+                @click="setConferenceToLoginTo(conference)"
+              >
+                Log In
+              </button>
+              <a
+                :href="getConferenceRegUrl(conference)"
+                :target="
+                  /^http/.test(getConferenceRegUrl(conference))
+                    ? '_blank'
+                    : '_self'
+                "
+              >
+                <button
+                  v-if="showConferenceRegButton(conference)"
+                  :class="buttonClass"
+                >
+                  {{ getConferenceRegText(conference) }}
+                </button>
+              </a>
+            </div>
+            <div
+              v-if="pagesConfigValue('main.countdown_timer')"
+              class="text-right mt-3 md:mt-2"
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+              ></CommonCountdownTimer>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <CommonModal
+      :visible="loginModalVisible"
+      @trigger="loginModalVisible = false"
+    >
+      <template #modal-body>
+        <CommonLoginFullWidth :conference="conferenceToLoginTo" />
+      </template>
+    </CommonModal>
+  </div>
+</template>

package/dist/runtime/components/forms/ErrorField.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { PropType } from "vue";
+
+type Props = {
+  errors: Array<string>;
+};
+
+const props = defineProps<Props>();
+
+const { errors } = toRefs(props);
+</script>
+
+<template>
+  <div>
+    <div v-if="errors" class="my-1 text-red-dark">
+      <div v-for="error in errors">{{ error }}</div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/forms/Message.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  success?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  success: true,
+});
+
+const { success } = toRefs(props);
+
+const errorClass = computed(() => {
+  return "bg-red-100 border border-red-400 text-red-600 font-bold px-4 py-3 mb-4 rounded relative";
+});
+
+const successClass = computed(() => {
+  return "bg-green-100 border border-green-400 text-green-600 font-bold px-4 py-3 mb-4 rounded relative";
+});
+</script>
+
+<template>
+  <div :class="success ? successClass : errorClass">
+    <slot class="pb-0" />
+  </div>
+</template>

package/dist/runtime/components/forms/SearchInput.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import CloseIcon from "../../assets/svg/close-icon.svg";
+
+const value = ref<string>("");
+
+const emit = defineEmits<{
+  (e: "onChange", value: string): void;
+  (e: "clear"): void;
+}>();
+
+const clear = () => {
+  value.value = "";
+  emit("clear");
+};
+</script>
+
+<template>
+  <div class="relative">
+    <input
+      v-model="value"
+      type="text"
+      class="w-full pl-2 pr-5 py-3"
+      placeholder="Search..."
+      @input="emit('onChange', value)"
+    />
+    <span class="pin-r absolute mt-3 mr-5 cursor-pointer" @click="clear">
+      <close-icon class="fill-current text-black" />
+    </span>
+  </div>
+</template>

package/dist/runtime/components/forms/SupportForm.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { get } from "lodash";
+
+const form = ref({
+  name: "",
+  email: "",
+  phone: "",
+  message: "",
+});
+const submitted = ref<boolean>(false);
+const errors = ref<[]>([]);
+
+const supportStore = useSupportStore();
+
+const handleForm = () => {
+  errors.value = [];
+  supportStore
+    .submit(form.value)
+    .then(() => {
+      submitted.value = true;
+    })
+    .catch((error) => {
+      errors.value = get(error.response.data, "errors", {});
+      errors.value.response = [
+        "Error: " + get(error.response.data, "message", ""),
+      ];
+    });
+};
+
+const acceptNumber = () => {
+  const x = form.value.phone
+    .replace(/\D/g, "")
+    .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+  form.value.phone = !x[2]
+    ? x[1]
+    : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
+};
+</script>
+
+<template>
+  <section>
+    <form v-if="!submitted" @submit.prevent="handleForm">
+      <div class="font-bold mb-4">
+        To contact support, please fill out the form below.
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1">Name</label>
+
+        <CommonTextInput
+          v-model="form.name"
+          placeholder="Name"
+          :required="true"
+          type="text"
+        />
+
+        <CommonErrorField :errors="errors['name']" />
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1">Email</label>
+
+        <CommonTextInput
+          v-model="form.email"
+          placeholder="you@company.com"
+          :required="true"
+          type="email"
+        />
+
+        <CommonErrorField :errors="errors['email']" />
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1">Phone</label>
+
+        <CommonTextInput
+          v-model="form.phone"
+          placeholder="Phone"
+          :required="false"
+          type="text"
+          @input="acceptNumber"
+        />
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1"
+          >Message</label
+        >
+
+        <CommonTextArea v-model="form.message" />
+
+        <CopmmonErrorField :errors="errors['message']" />
+      </div>
+
+      <div class="mb-3">
+        <CommonErrorField :errors="errors['response']" />
+      </div>
+      <button class="btn btn-secondary" type="submit">Submit</button>
+    </form>
+
+    <!-- Submitted Message -->
+    <div v-if="submitted" class="text-center my-12">
+      <div class="text-2xl font-bold text-grey-darkest mb-2">Thank you.</div>
+      <div class="text-lg font-semibold text-grey-darker">
+        Your message has been received.
+      </div>
+    </div>
+  </section>
+</template>

package/dist/runtime/components/forms/TextArea.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+type Props = {
+  modelValue: string;
+};
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string): void;
+}>();
+
+const props = defineProps<Props>();
+
+const onInput = (e) => {
+  emit("update:modelValue", e.target.value);
+};
+</script>
+
+<template>
+  <span>
+    <textarea
+      :value="props.modelValue"
+      class="form-input"
+      rows="4"
+      @change="onInput"
+    ></textarea>
+  </span>
+</template>