@asd20/ui-next 2.23.5 → 2.24.0

package/src/components/organisms/Asd20PublicFormModal/index.vue

@@ -0,0 +1,486 @@
+<template>
+  <asd20-modal
+    :open="open"
+    :title="modalTitle"
+    icon="contact"
+    dismissable
+    class="asd20-public-form-modal"
+    @dismiss="dismiss"
+  >
+    <asd20-viewport scrollable>
+      <div
+        v-if="loadingDefinition"
+        class="asd20-public-form-modal__state"
+        role="status"
+        aria-live="polite"
+      >
+        <asd20-spinner size="sm" />
+        <span>Loading form…</span>
+      </div>
+
+      <div
+        v-else-if="definitionError"
+        ref="definitionError"
+        class="asd20-public-form-modal__feedback"
+        role="alert"
+        tabindex="-1"
+      >
+        {{ definitionError }}
+      </div>
+
+      <div
+        v-else-if="submissionSuccess"
+        class="asd20-public-form-modal__success"
+        role="status"
+        aria-live="polite"
+      >
+        {{ formDefinition.successMessage }}
+      </div>
+
+      <form
+        v-else-if="formDefinition"
+        novalidate
+        @submit.prevent="validateBeforeCaptcha"
+      >
+        <p
+          v-if="formDefinition.introduction"
+          class="asd20-public-form-modal__introduction"
+        >
+          {{ formDefinition.introduction }}
+        </p>
+
+        <div
+          v-if="errorEntries.length"
+          ref="errorSummary"
+          class="asd20-public-form-modal__error-summary"
+          role="alert"
+          tabindex="-1"
+        >
+          <p>Please correct the following fields:</p>
+          <ul>
+            <li
+              v-for="entry in errorEntries"
+              :key="entry.name"
+            >
+              <a
+                :href="`#${fieldId(entry.name)}`"
+                @click.prevent="focusField(entry.name)"
+              >{{ entry.messages[0] }}</a>
+            </li>
+          </ul>
+        </div>
+
+        <asd20-public-form-field
+          v-for="field in formDefinition.fields"
+          :key="field.name"
+          :field="field"
+          :input-id="fieldId(field.name)"
+          :model-value="values[field.name]"
+          :errors="validationErrors[field.name] || []"
+          @update:modelValue="updateValue(field.name, $event)"
+        />
+
+        <div
+          class="asd20-public-form-modal__honeypot"
+          aria-hidden="true"
+        >
+          <label :for="honeypotId">Website</label>
+          <input
+            :id="honeypotId"
+            v-model="honeypot"
+            type="text"
+            name="website"
+            tabindex="-1"
+            autocomplete="off"
+          />
+        </div>
+
+        <div
+          v-if="hasFallbackContact"
+          class="asd20-public-form-modal__fallback"
+        >
+          <p>
+            If you cannot submit this form, use one of these contact options:
+          </p>
+          <a
+            v-if="formDefinition.fallbackContact.email"
+            :href="`mailto:${formDefinition.fallbackContact.email}`"
+          >{{ formDefinition.fallbackContact.email }}</a>
+          <a
+            v-if="formDefinition.fallbackContact.phone"
+            :href="fallbackPhoneHref"
+          >{{ formDefinition.fallbackContact.phone }}</a>
+        </div>
+
+        <div
+          class="asd20-public-form-modal__submit"
+          aria-live="polite"
+        >
+          <template v-if="!sending">
+            <recaptcha
+              v-if="captchaEnabled"
+              :sitekey="captchaSitekey"
+              :load-recaptcha-script="loadRecaptchaScript"
+              size="invisible"
+              @verify="captchaVerified"
+              @error="captchaFailed"
+              @expired="captchaExpired"
+            >
+              <asd20-button
+                :label="formDefinition.submitLabel"
+                horizontal
+                centered
+                bordered
+                @click="validateBeforeCaptcha"
+              />
+            </recaptcha>
+            <asd20-button
+              v-else
+              :label="formDefinition.submitLabel"
+              horizontal
+              centered
+              bordered
+              @click="submitForm('')"
+            />
+          </template>
+          <asd20-spinner
+            v-else
+            size="sm"
+          />
+        </div>
+
+        <div
+          v-if="feedbackMessage"
+          ref="feedback"
+          class="asd20-public-form-modal__feedback"
+          :role="feedbackRole"
+          tabindex="-1"
+        >
+          {{ feedbackMessage }}
+        </div>
+      </form>
+    </asd20-viewport>
+  </asd20-modal>
+</template>
+
+<script>
+import Asd20Button from '../../atoms/Asd20Button'
+import Asd20Spinner from '../../atoms/Asd20Spinner'
+import Asd20Viewport from '../../atoms/Asd20Viewport'
+import Asd20Modal from '../../molecules/Asd20Modal'
+import Asd20PublicFormField from '../../molecules/Asd20PublicFormField'
+import Recaptcha from '../../utils/Recaptcha'
+import {
+  createPublicFormValues,
+  normalizePublicFormDefinition,
+  validatePublicFormValues,
+} from '../../../helpers/publicFormDefinition'
+import {
+  fetchPublicFormDefinition,
+  normalizeFormId,
+  submitPublicForm,
+} from '../../../helpers/publicForms'
+import createComponentInstanceId from '../../../utils/createComponentInstanceId'
+
+const DEFAULT_CAPTCHA_SITEKEY = '6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX'
+
+export default {
+  name: 'Asd20PublicFormModal',
+  components: {
+    Asd20Button,
+    Asd20Modal,
+    Asd20PublicFormField,
+    Asd20Spinner,
+    Asd20Viewport,
+    Recaptcha,
+  },
+  props: {
+    open: { type: Boolean, default: false },
+    formId: { type: String, required: true },
+    definition: { type: Object, default: null },
+    endpoint: { type: String, default: '' },
+    functionsEndpoint: { type: String, default: '' },
+    captchaEnabled: { type: Boolean, default: true },
+    captchaSitekey: { type: String, default: DEFAULT_CAPTCHA_SITEKEY },
+    loadRecaptchaScript: { type: Boolean, default: true },
+    schemaClient: { type: Function, default: null },
+    submissionClient: { type: Function, default: null },
+  },
+  emits: ['dismiss', 'submitted', 'update:open'],
+  data() {
+    const instanceId = createComponentInstanceId('asd20-public-form')
+    return {
+      instanceId,
+      honeypotId: `${instanceId}-website`,
+      formDefinition: null,
+      values: {},
+      honeypot: '',
+      validationErrors: {},
+      validationAttempted: false,
+      loadingDefinition: false,
+      definitionError: '',
+      feedbackMessage: '',
+      feedbackRole: 'alert',
+      sending: false,
+      submissionSuccess: false,
+      loadSequence: 0,
+    }
+  },
+  computed: {
+    modalTitle() {
+      return this.formDefinition?.title || 'Public Form'
+    },
+    errorEntries() {
+      if (!this.formDefinition) return []
+      return this.formDefinition.fields
+        .filter(field => this.validationErrors[field.name]?.length)
+        .map(field => ({
+          name: field.name,
+          messages: this.validationErrors[field.name],
+        }))
+    },
+    hasFallbackContact() {
+      const fallback = this.formDefinition?.fallbackContact
+      return Boolean(fallback?.email || fallback?.phone)
+    },
+    fallbackPhoneHref() {
+      const phone = this.formDefinition?.fallbackContact?.phone || ''
+      return `tel:${phone.replace(/[^+\d]/g, '')}`
+    },
+  },
+  watch: {
+    open: {
+      immediate: true,
+      handler(value) {
+        if (value) this.prepareForm()
+        else this.loadSequence += 1
+      },
+    },
+    definition: {
+      deep: true,
+      handler() {
+        if (this.open) this.prepareForm()
+      },
+    },
+    formId() {
+      if (this.open) this.prepareForm()
+    },
+  },
+  methods: {
+    resolveRuntimeConfig() {
+      return (
+        this.$config ||
+        this.$?.appContext?.config?.globalProperties?.$config ||
+        {}
+      )
+    },
+    clientOptions() {
+      return {
+        endpoint: this.endpoint,
+        functionsEndpoint: this.functionsEndpoint,
+        runtimeConfig: this.resolveRuntimeConfig(),
+      }
+    },
+    async prepareForm() {
+      const sequence = ++this.loadSequence
+      this.loadingDefinition = true
+      this.definitionError = ''
+      this.feedbackMessage = ''
+      this.submissionSuccess = false
+      this.validationErrors = {}
+      this.validationAttempted = false
+      this.honeypot = ''
+
+      try {
+        const expectedId = normalizeFormId(this.formId)
+        const rawDefinition = this.definition
+          ? this.definition
+          : await (this.schemaClient || fetchPublicFormDefinition)(
+              expectedId,
+              this.clientOptions()
+            )
+        const normalized = normalizePublicFormDefinition(rawDefinition)
+        if (normalized.id !== expectedId)
+          throw new Error(
+            'The public form definition does not match the request.'
+          )
+        if (sequence !== this.loadSequence) return
+
+        this.formDefinition = normalized
+        this.values = createPublicFormValues(normalized)
+      } catch (_error) {
+        if (sequence !== this.loadSequence) return
+        this.formDefinition = null
+        this.definitionError =
+          'This form could not be loaded. Please try again later or use another contact option on this page.'
+        this.$nextTick(() => this.$refs.definitionError?.focus?.())
+      } finally {
+        if (sequence === this.loadSequence) this.loadingDefinition = false
+      }
+    },
+    fieldId(name) {
+      return `${this.instanceId}-${name}`
+    },
+    updateValue(name, value) {
+      this.values[name] = value
+      if (this.validationAttempted) this.validate(false)
+    },
+    validate(focusSummary = true) {
+      if (!this.formDefinition) return false
+      const result = validatePublicFormValues(this.formDefinition, this.values)
+      this.values = result.values
+      this.validationErrors = result.errors
+      this.validationAttempted = true
+
+      if (!result.valid && focusSummary) {
+        this.$nextTick(() => this.$refs.errorSummary?.focus?.())
+      }
+      return result.valid
+    },
+    validateBeforeCaptcha(event) {
+      if (this.sending || !this.validate()) {
+        event?.preventDefault?.()
+        return false
+      }
+      return true
+    },
+    focusField(name) {
+      document.getElementById(this.fieldId(name))?.focus?.()
+    },
+    captchaVerified(token) {
+      if (token) this.submitForm(token)
+    },
+    captchaFailed() {
+      this.showFeedback(
+        'The verification service could not start. Please try again or use the contact options below.'
+      )
+    },
+    captchaExpired() {
+      this.showFeedback(
+        'The verification expired. Please submit the form again.'
+      )
+    },
+    failureMessage(error) {
+      const status = Number(error?.response?.status || 0)
+      const serverMessage = error?.response?.data?.error
+      if (status === 400 && typeof serverMessage === 'string')
+        return serverMessage
+      if (status === 403)
+        return 'The verification was not accepted. Please try again.'
+      if (status === 429) {
+        return 'Too many submissions were received recently. Please wait and try again, or use the contact options below.'
+      }
+      if (status === 502) {
+        return 'The form could not be delivered right now. Please try again later or use the contact options below.'
+      }
+      if (status === 503) {
+        return 'This form is temporarily unavailable. Please use the contact options below.'
+      }
+      return 'Something went wrong while submitting the form. Please try again later or use the contact options below.'
+    },
+    showFeedback(message, role = 'alert') {
+      this.feedbackMessage = message
+      this.feedbackRole = role
+      this.$nextTick(() => this.$refs.feedback?.focus?.())
+    },
+    async submitForm(captchaToken = '') {
+      if (this.sending || !this.validate()) return
+      if (this.captchaEnabled && !captchaToken) {
+        this.showFeedback('Verification is required before submitting this form.')
+        return
+      }
+
+      this.sending = true
+      this.feedbackMessage = ''
+      try {
+        const payload = {
+          ...this.values,
+          website: this.honeypot,
+          captchaToken,
+        }
+        await (this.submissionClient || submitPublicForm)(
+          this.formDefinition.id,
+          payload,
+          this.clientOptions()
+        )
+        this.submissionSuccess = true
+        this.$emit('submitted', {
+          formId: this.formDefinition.id,
+          definitionVersion: this.formDefinition.version,
+        })
+      } catch (error) {
+        this.showFeedback(this.failureMessage(error))
+      } finally {
+        this.sending = false
+      }
+    },
+    dismiss() {
+      this.$emit('dismiss')
+      this.$emit('update:open', false)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../../design/component-stack' as *;
+
+.asd20-public-form-modal {
+  & :deep(.asd20-modal__content .asd20-viewport) {
+    padding: space(1);
+  }
+
+  &__state,
+  &__submit {
+    align-items: center;
+    display: flex;
+    gap: space(0.25);
+    justify-content: center;
+    min-height: space(2);
+  }
+
+  &__error-summary,
+  &__feedback,
+  &__success {
+    font-weight: 600;
+    margin: space(0.5) 0;
+  }
+
+  &__error-summary {
+    border: 2px solid asd20-swatch('emergency', -1);
+    padding: space(0.5);
+
+    p {
+      margin-top: 0;
+    }
+  }
+
+  &__success {
+    font-size: 1.1rem;
+    text-align: center;
+  }
+
+  &__fallback {
+    display: flex;
+    flex-direction: column;
+    margin: space(0.5) 0;
+
+    p {
+      margin-bottom: space(0.125);
+    }
+  }
+
+  &__feedback {
+    text-align: center;
+  }
+
+  &__honeypot {
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+  }
+}
+</style>