@icvdeveloper/common-module 1.4.13 → 2.0.0

package/dist/runtime/components/registration/AlreadyRegisteredModal.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+import { storeToRefs } from 'pinia';
+import { DateTime } from 'luxon';
+import { useUserStore } from '../../store/user';
+import { useConferencesStore } from '../../store';
+import { useEvents } from '../../composables/useEvents';
+import type { Conference } from '../../models/conference';
+import { useConferenceHelpers } from '../../composables';
+
+type Props = {
+  conference: Conference,
+  group: any,
+  show?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false
+});
+
+const { conference, group, show } = toRefs(props);
+
+const { currentUser } = storeToRefs(useUserStore());
+
+const { getConferenceStatusLabel } = useConferenceHelpers(conference);
+
+// emits
+const emit = defineEmits<{
+  (event: "close"): void;
+}>();
+
+// computed
+const registeredConferences = (): Conference[] => {
+  return useConferencesStore().getRegisteredConferences();
+};
+
+// methods
+const formatDateTime = (_value: string, _format: string = 'LLL') => {
+  return DateTime.fromISO(_value).toFormat(_format);
+};
+</script>
+
+<template>
+  <CommonModal
+    v-if="show"
+    @click="emit('close')"
+    @trigger="emit('close')"
+  >
+    <template #modal-title>
+      <h3>You're already registered for this event.</h3>
+    </template>
+
+    <template #modal-body>
+      <div class="pt-5">
+        <p class="mb-0">
+          {{ currentUser.name }}
+        </p>
+        <p class="mb-0">
+          Thank you for registering for the:
+        </p>
+        <h4>{{ group.name }}</h4>
+
+        <p class="mb-1 mt-3">
+          You are registered into these Events. Click to go to any live or archived event.
+        </p>
+
+        <div class="py-5 border border-gray-600">
+          <div
+            v-for="(conf, index) in registeredConferences()"
+            id="list-striped"
+            :key="index"
+            class="py-2 px-3 flex justify-between"
+            @click="useEvents().getEventPage(conf)"
+          >
+            <div>
+              {{ conf.name }}
+            </div>
+            <div>
+              {{ formatDateTime(conf.start_date as string, 'MMMM Do') }} <span>{{ getConferenceStatusLabel(conf) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </CommonModal>
+</template>
+
+
+<style>
+#list-striped {
+  cursor: pointer;
+}
+#list-striped:nth-of-type(odd) {
+  background-color: rgb(240, 240, 240);
+}
+#list-striped:hover {
+  background-color: rgb(230, 230, 230);
+}
+</style>

package/dist/runtime/components/registration/PaymentForm.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { ref, toRefs, onMounted } from 'vue';
+
+type Props = {
+  total: number,
+  value: any,
+  errors?: {}
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  errors: () => {
+    return {}
+  }
+});
+
+// TODO - is 'value' used?
+const { total, value, errors } = toRefs(props);
+
+// data
+const paymentInputs = ref<{}>({});
+
+// emits
+// TODO - set value type
+const emit = defineEmits<{
+  (event: 'input', value: any): void;
+}>();
+
+// computed
+const totalFormatted = () => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2
+  })
+    .format(total.value/100);
+};
+
+const monthArray = ():[{ 'name': string, 'value': number}] => {
+  return [
+    { name: '01 - January', value: 1 },
+    { name: '02 - February', value: 2 },
+    { name: '03 - March', value: 3 },
+    { name: '04 - April', value: 4 },
+    { name: '05 - May', value: 5 },
+    { name: '06 - June', value: 6 },
+    { name: '07 - July', value: 7 },
+    { name: '08 - August', value: 8 },
+    { name: '09 - September', value: 9 },
+    { name: '10 - October', value: 10 },
+    { name: '11 - November', value: 11 },
+    { name: '12 - December', value: 12 },
+  ];
+};
+
+const yearArray = () => {
+  const startingYear = new Date().getFullYear();
+  const returnArray = [];
+  for(let i = startingYear; i <= (startingYear + 10); i++) {
+    returnArray.push({name: i, value: i});
+  }
+  return returnArray;
+};
+
+watch(paymentInputs.value, (newValue, oldValue) => {
+  emit('input', newValue);
+});
+
+onMounted(() => {
+  paymentInputs.value.cc_exp_month = 1;
+  paymentInputs.value.cc_exp_year = new Date().getFullYear();
+});
+</script>
+
+<template>
+  <!-- Payment Form -->
+  <div class="row mb-5 border border-gray-400 rounded p-4">
+    <div class="py-3 px-3 flex bg-gray-600 rounded text-white font-semibold">
+      <div class="flex-1">
+        Payment Information
+      </div>
+      <div class="flex-1 text-right">
+        {{ totalFormatted }}
+      </div>
+    </div>
+
+    <div class="row flex flex-col mb-2">
+      <div class="flex-1 my-2">
+        <div>
+          <label class="block font-semibold text-gray-800 mb-1">
+            Card Number
+          </label>
+          <input
+            v-model="paymentInputs['cc_number']"
+            type="text"
+            class="form-input"
+          >
+          <ErrorField :errors="errors['cc_number']" />
+          <ErrorField :errors="errors['payment']" />
+        </div>                        
+      </div>
+      <div class="flex flex-1 my-2">
+        <div class="flex-1 mx-1">
+          <label class="block font-semibold text-gray-800 mb-1">
+            Exp. Month
+          </label>
+          <SelectDropDown 
+            v-model="paymentInputs['cc_exp_month']"
+            :options="monthArray"
+          />
+          <ErrorField :errors="errors['cc_exp_month']" />
+        </div>
+        <div class="flex-1 mx-1">
+          <label class="block font-semibold text-gray-800 mb-1">
+            Exp. Year
+          </label>
+          <SelectDropDown
+            v-model="paymentInputs['cc_exp_year']"
+            :options="yearArray"
+          />
+          <ErrorField :errors="errors['cc_exp_year']" />
+        </div>
+        <div class="flex-1 mx-1">
+          <label class="block font-semibold text-gray-800 mb-1">
+            CVC/CVV
+          </label>
+          <input
+            v-model="paymentInputs['cc_cvc']"
+            type="text"
+            class="form-input"
+          >
+          <ErrorField :errors="errors['cc_cvc']" />
+        </div>                
+      </div>           
+    </div>
+  </div>
+</template>

package/dist/runtime/components/registration/RegistrationForm.vue

@@ -0,0 +1,417 @@
+<script lang="ts" setup>
+import { ref, toRefs, onMounted, computed } from 'vue';
+import { useRouter } from '#vue-router';
+import { storeToRefs } from 'pinia';
+import { get, debounce } from 'lodash-es';
+import { useApi } from '../../composables';
+import { useAuthStore } from '../../store';
+import { useTemplateConfigsStore } from '../../store';
+import type { IFetchError } from 'ofetch'
+import type { Conference } from '../../models/conference';
+import type { Group, RegistrationForm } from '../../models/group';
+
+type Props = {
+  content: string;
+  conference?: Conference | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  conference: null
+});
+
+const { content } = toRefs(props);
+const { globalConfigValue } = useTemplateConfigsStore();
+const { user } = storeToRefs(useAuthStore());
+const router = useRouter();
+
+// data
+const group = ref<Group>();
+const registrationFormObject = ref<RegistrationForm>();
+const formInputs = ref<{[key: string]: string}>({});
+const title = ref<string>('');
+const formComplete = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const errors = ref<{[key: string]: []}>({});
+const showLogin = ref<boolean>(false);
+const stripeComponent = ref();
+
+// computed
+const regButtonEnabled = computed((): boolean => {
+  return globalConfigValue('reg_button_enabled') === true;
+});
+
+const regExternalUrl = computed((): string => {
+  const extRegUrl = globalConfigValue('external_reg_url');
+  if (extRegUrl) return extRegUrl;
+  return '';
+});
+
+const showCheckout = computed((): boolean => {
+  if (group.value && group.value.price != 0 && group.value.enabled) {
+    return true;
+  }
+  return false;
+});
+
+const isTownhallRegistration = computed((): boolean => {
+  return globalConfigValue('townhall_registration_enabled', false);
+});
+
+const isLoggedIn = computed(():boolean => {
+  return user.value != null;
+});
+
+const userAcctError = computed((): string => {
+  if (group.value.type == 'online') {
+    return 'An account with this email already exists. Please log in to continue your registration.';
+  } else if (group.value.type == 'media') {
+    return 'An account with this email already exists. Please login to continue your purchase, or continue your purchase as a guest.';
+  } else {
+    return '';
+  }
+});
+
+const regButtonAlias = computed((): string => {
+  let returnText = "Register";
+  const aliasText = globalConfigValue('reg_button_alias', '');
+  if (aliasText.length != 0) returnText = aliasText;
+  return returnText;
+});
+
+// methods
+const debounceEmail = debounce(() => {
+  const request = useApi();
+  request(`groups/${group.value.id}/check-email`,
+  {
+    method: 'POST',
+    query: {
+      email: formInputs.value.email
+    }
+  })
+  .then((response: any) => {
+    if (response.data.registered === true) {
+        showLogin.value = true;
+    }
+  })
+  .catch(error => {
+    console.log(error);
+  });
+}, 500);
+
+const closeUserAcctError = (): void => {
+  if (group.value.type == 'media') {
+    errors.value['user'] = [];
+  };
+  showLogin.value = false;
+};
+
+const getRegistrationFormData = (_group: string): void => {
+  const request = useApi();
+  request(`groups/${_group}?with=registration_form.fields,merchant`)
+  // TODO - define type
+  .then((response: any) => {
+    group.value = response.data as Group;
+      registrationFormObject.value = group.value.registration_form;
+
+      title.value = `Registration - ${group.value.name}`;
+
+      if(registrationFormObject.value != undefined && registrationFormObject.value.fields) {
+        registrationFormObject.value.fields.map((field: any) => {
+          // TODO - define type
+          let tmpValue: any = '';
+
+          if (field.type == 'checkbox') {
+            tmpValue = [];
+          }
+
+          if (field.type == 'hidden') {
+            tmpValue = field.value;
+          }
+
+          formInputs.value[field.name] = tmpValue;
+        });
+    }
+  })
+};
+
+const shouldRenderField = (field: any): boolean => {
+  if ((isLoggedIn.value && field.name === 'password') || (isLoggedIn.value && field.name === 'email')) {
+    return false;
+  }
+  return true;
+};
+
+const getTextInputType = (_field_object: any): string => {
+  if (_field_object.type == 'password') {
+    return 'password';
+  } else if (_field_object.validation.email) {
+    return 'email';
+  } else if (_field_object.validation.numeric) {
+    return 'number';
+  } else {
+    return 'text';
+  }
+};
+
+const getPlaceholder = (_placeholder: string | null): string => {
+  if (_placeholder != null) return _placeholder;
+  return '';
+};
+
+const handleForm = (): void => {
+  if (showCheckout.value) {
+    loading.value = true;
+    stripeComponent.value.payWithStripe();
+  } else {
+    register();
+  }
+};
+
+const register = (ccToken: string = '') => {
+  loading.value = true;
+  errors.value = {};
+  console.log('formInputs', formInputs.value);
+  const inputs = {
+    method: 'POST',
+    body: {
+      ...formInputs.value
+    }
+  };
+  if (ccToken.length != 0) {
+    inputs.body.cc_token = ccToken;
+  }
+  if (isLoggedIn.value) {
+    inputs.body.email = user.value!.email;
+  }
+
+  const request = useApi();
+
+  request(`groups/${group.value.id}/registration`, inputs)
+  .then((response: any) => {
+    if(isLoggedIn.value) {
+      router.push('/');
+    }
+    formComplete.value = true;
+    user.value = response;
+  })
+  .catch((error: IFetchError) => {
+    errors.value = get(error?.response?._data, 'errors', {});
+  })
+  .finally(() => {
+    loading.value = false;
+  });
+};
+
+onMounted(() => {
+  getRegistrationFormData(content.value);
+});
+</script>
+
+<template>
+  <div
+    v-if="group != undefined && Object.keys(group).length > 0"
+    id="page-registration"
+  >
+    <div class="px-2">
+      <!-- Registration Form -->
+      <div
+        v-if="!formComplete && regButtonEnabled && regExternalUrl.length == 0"
+        class="mx-auto text-left max-form-width"
+      >
+        <h3
+          v-if="group.name"
+          class="py-8 font-light"
+        >
+          Please complete the registration form below for {{ group.name }}.
+        </h3>
+        <form
+          class="w-full mx-auto"
+          @submit.prevent="handleForm"
+        >
+          <template v-for="field in registrationFormObject.fields">
+            <div
+              v-if="shouldRenderField(field)"
+              :key="field.name"
+              class="row mb-3"
+            >
+              <label
+                v-if="field.type != 'hidden'"
+                class="block body-color-1 mb-1"
+              >
+                {{ field.label }}
+              </label>
+
+              <!-- Input / Password -->
+              <span v-if="['text', 'password'].indexOf(field.type) >= 0">
+                <span v-if="field.name === 'email'">
+                  <CommonTextInput
+                    v-model="formInputs[field.name]"
+                    :placeholder="getPlaceholder(field.placeholder)"
+                    :required="field.validation.required"
+                    :type="getTextInputType(field)"
+                    @update:model-value="debounceEmail"
+                  />
+                </span>
+
+                <span v-else>
+                  <CommonTextInput
+                    v-model="formInputs[field.name]"
+                    :placeholder="getPlaceholder(field.placeholder)"
+                    :required="field.validation.required"
+                    :type="getTextInputType(field)"
+                  />
+                </span>
+              </span>
+
+              <!-- TextArea -->
+              <span v-if="field.type == 'textarea'">
+                <CommonTextArea v-model="formInputs[field.name]" />
+              </span>
+
+              <!-- Select -->
+              <span v-if="field.type == 'select'">
+                <CommonSelectDropDown
+                  v-model="formInputs[field.name]"
+                  :options="field.options"
+                  :first-disabled="true"
+                />
+              </span>
+
+              <!-- Checkboxes -->
+              <span v-if="field.type == 'checkbox'">
+                <CommonCheckboxGroup
+                  v-model="formInputs[field.name]"
+                  :options="field.options"
+                />
+              </span>
+
+              <!-- Radio Buttons -->
+              <span v-if="field.type == 'radiogroup'">
+                <CommonRadioGroup
+                  v-model="formInputs[field.name]"
+                  :options="field.options"
+                />
+              </span>
+
+              <!-- Hidden -->
+              <span v-if="field.type == 'hidden'">
+                <input
+                  v-model="formInputs[field.name]"
+                  type="hidden"
+                >
+              </span>
+
+              <!-- Error Field -->
+              <CommonErrorField
+                v-if="errors[field.name]"
+                :errors="errors[field.name]"
+              />
+              <CommonErrorField
+                v-if="field.name == 'email' && (errors.user != undefined && errors.user.length)"
+                :errors="errors.user"
+              />
+            </div>
+          </template>
+          <!-- Payment Form -->
+          <!-- TODO - update Stripe integration -->
+          <CommonStripePaymentForm
+            v-if="showCheckout"
+            ref="stripeComponent"
+            :stripe-key="group?.merchant?.account_id as string"
+            :price="group.price as number"
+            :errors="errors"
+            @token-generated="register"
+            @on-error="loading = false"
+          />
+
+          <!-- error field when email field/error is hidden -->
+          <CommonErrorField
+            v-if="isLoggedIn && errors.user.length"
+            class="mt-3"
+            :errors="errors.user"
+          />
+
+          <button
+            class="btn btn-primary my-2"
+            type="submit"
+            :disabled="loading"
+          >
+            <span v-if="!loading">Submit</span>
+            <span v-else>Processing</span>
+          </button>
+        </form>
+      </div>
+      <!-- End Registration Form -->
+
+      <!-- If Registration External URL -->
+      <div
+        v-if="regButtonEnabled && regExternalUrl.length != 0"
+        class="px-2"
+      >
+        <a
+          :href="regExternalUrl"
+          :target="/^http/.test(regExternalUrl) ? '_blank' : '_self'"
+        >
+          <button
+            class="btn btn-primary my-2"
+            type="submit"
+          >
+            {{ regButtonAlias }}
+          </button>
+        </a>
+      </div>
+
+      <!-- If Registration disabled -->
+      <div
+        v-if="!regButtonEnabled || !group"
+        class="px-2 md:px-4"
+      >
+        <div class="flex justify-around m-2 border-b border-gray-400 py-12 text-lg">
+          Sorry! There are no registration options available at this time.
+        </div>
+      </div>
+
+      <br>
+
+      <div
+        v-if="user && formComplete"
+        class="w-full mx-auto max-form-width"
+      >
+        <template v-if="user.name">
+          <h2 class="mb-4">
+            {{ user.name }}
+          </h2>
+        </template>
+        <CommonDynamicHtml
+          v-if="group.registration_message"
+          :template="group.registration_message"
+        />
+        <CommonLoginFullWidth
+          v-else-if="!user"
+          title="Thank you for registering. Please log in to continue to your event."
+        />
+        <span v-else>
+          You are now registered for <span class="font-bold"><i>{{ group.name }}</i></span>.
+        </span>
+      </div>
+    </div>
+
+    <CommonModal
+      v-if="showLogin"
+      @trigger="closeUserAcctError"
+    >
+      <template #modal-body>
+        <div class="py-5">
+          <CommonLoginFullWidth
+            :title="userAcctError"
+            :center-text="false"
+            :allow-guest="group.type == 'media'"
+            @loggingin="errors={}"
+            @loggedin="showLogin=false"
+            @close-login="closeUserAcctError"
+          />
+        </div>
+      </template>
+    </CommonModal>
+  </div>
+</template>