@icvdeveloper/common-module 1.4.14 → 2.1.0

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"
+          >
+          <CommonErrorField :errors="errors['cc_number']" />
+          <CommonErrorField :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>
+          <CommonSelectDropDown
+            v-model="paymentInputs['cc_exp_month']"
+            :options="monthArray"
+          />
+          <CommonErrorField :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>
+          <CommonSelectDropDown
+            v-model="paymentInputs['cc_exp_year']"
+            :options="yearArray"
+          />
+          <CommonErrorField :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"
+          >
+          <CommonErrorField :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>

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

@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+import { storeToRefs } from 'pinia';
+import { get } from 'lodash-es';
+import { useUserStore } from '../../store/user';
+import { useTemplateConfigsStore } from '../../store/templateConfigs';
+import type { Group } from '../../models/group';
+
+type Props = {
+  content: any[];
+};
+
+const props = defineProps<Props>();
+
+const { content } = toRefs(props);
+
+const { globalConfigValue } = useTemplateConfigsStore();
+const { currentUser } = storeToRefs(useUserStore());
+
+const emit = defineEmits<{
+  (event: "setRegForm", value: string): void;
+}>();
+
+// computed
+const hasGroups = (): boolean => {
+  return content.value.length > 0;
+};
+
+const regButtonEnabled = (): boolean => {
+  return globalConfigValue("reg_button_enabled");
+}
+
+const regExternalUrl = (): string => {
+  const extRegUrl = globalConfigValue("external_reg_url");
+  if (extRegUrl.length > 0) return extRegUrl;
+  return '';
+};
+
+const regButtonAlias = (): string => {
+  let returnText = "Register";
+  const aliasText = globalConfigValue("reg_button_alias");
+  if (aliasText.length > 0) returnText = aliasText;
+  return returnText;
+};
+
+// methods
+const getRegisterText = (_group: Group): string => {
+  return _group.price as number > 0 ? "Buy Now" : "Register";
+};
+
+const formatCurrency = (_value: number): string => {
+    const val: number = _value / 100;
+    return val
+        .toLocaleString('en-US', {currency: 'USD', style: 'currency'})
+        .substring(1);
+};
+
+const setRegForm = (_code: string) => {
+  emit("setRegForm", _code);
+};
+
+const checkAlreadyRegistered = (_group_id: number): boolean => {
+  let hasGroups: boolean = false;
+  if (get(currentUser.value, 'group_ids', false) != false) {
+    const groupIds: number[] = currentUser.value.group_ids as number[];
+    hasGroups = groupIds.includes(_group_id);
+  }
+  return hasGroups;
+};
+</script>
+
+<template>
+  <div class="px-2">
+    <!-- If the conference has one or more groups -->
+    <template v-if="hasGroups() && regButtonEnabled() && regExternalUrl().length == 0">
+      <div
+        v-for="(group, index) in content"
+        :key="group.id"
+        class="flex flex-col justify-around p-6 m-2 text-center"
+        :class="index != content.length - 1 ? 'border-b border-gray-400' : ''"
+      >
+        <div class="flex flex-1 flex-col py-2">
+          <div class="flex-1 mb-2 text-xl font-bold">
+            {{ group.name }}
+          </div>
+          <div class="flex-1">
+            {{ group.description }}
+          </div>
+        </div>
+
+        <div class="flex flex-col grow-0 items-center justify-between">
+          <div
+            v-if="group.price"
+            class="text-lg mb-2"
+          >
+            {{ formatCurrency(group.price) }}
+          </div>
+          <button
+            v-if="group.type == 'media' || !checkAlreadyRegistered(group.id)"
+            class="btn btn-primary"
+            @click="setRegForm(group.code)"
+          >
+            {{ getRegisterText(group) }}
+          </button>
+          <span
+            v-else
+            class="text-red"
+          >
+            You are already registered for this access level for this event.
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <!-- If the conference does not have any groups, or reg disabled -->
+    <div
+      v-if="!hasGroups() || !regButtonEnabled()"
+      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>
+
+    <!-- If Registration External URL -->
+    <div
+      v-if="regButtonEnabled() && regExternalUrl().length > 0"
+      class="px-2 text-center"
+    >
+      <a
+        :href="regExternalUrl"
+        :target="/^http/.test(regExternalUrl()) ? '_blank' : '_self'"
+      >
+        <button
+          class="btn btn-primary my-2"
+          type="submit"
+        >
+          {{ regButtonAlias }}
+        </button>
+      </a>
+    </div>
+    <br>
+  </div>
+</template>
+
+<style></style>