opnform-host-nginx/client/pages/templates/[slug].vue

<template>
  <div class="flex flex-col min-h-full">
    <breadcrumb
      v-if="template"
      :path="breadcrumbs"
    >
      <template #left>
        <div
          v-if="canEditTemplate"
          class="ml-5"
        >
          <v-button
            color="gray"
            size="small"
            @click.prevent="showFormTemplateModal = true"
          >
            Edit Template
          </v-button>
          <form-template-modal
            v-if="form"
            :form="form"
            :template="template"
            :show="showFormTemplateModal"
            @close="showFormTemplateModal = false"
          />
        </div>
      </template>
      <template #right>
        <v-button
          v-if="canEditTemplate"
          v-track.copy_template_button_clicked
          size="small"
          color="white"
          class="mr-5"
          @click.prevent="copyTemplateUrl"
        >
          Copy Template URL
        </v-button>
        <v-button
          v-track.use_template_button_clicked
          size="small"
          class="mr-5"
          :to="createFormWithTemplateUrl"
        >
          Use this template
        </v-button>
      </template>
    </breadcrumb>

    <p
      v-if="template === null || !template"
      class="text-center my-4"
    >
      We could not find this template.
    </p>
    <template v-else>
      <section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
          <div
            class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row"
          >
            <div
              class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm"
            >
              <img
                class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
                :src="template.image_url"
                alt="Template cover image"
                width="500px"
                height="380px"
              >
            </div>

            <div class="flex-1 text-center md:text-left relative">
              <h1
                class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
              >
                {{ template.name }}
              </h1>
              <p class="mt-2 text-lg font-normal text-gray-600">
                {{ cleanQuotes(template.short_description) }}
              </p>
              <template-tags
                :template="template"
                :display-all="true"
                class="flex flex-wrap items-center justify-center gap-3 mt-4 md:justify-start"
              />
            </div>
          </div>
        </div>
      </section>

      <section class="relative px-4 mx-auto sm:px-6 lg:px-8 -mt-[210px]">
        <div class="max-w-7xl">
          <div
            class="max-w-2xl p-4 mx-auto bg-white shadow-lg sm:p-6 lg:p-8 rounded-xl ring-1 ring-inset ring-gray-200 isolate"
          >
            <p class="text-sm font-medium text-center text-gray-500 -mt-2 mb-2">
              Template Preview
            </p>
            <open-complete-form
              ref="open-complete-form"
              :form="form"
              :creating="true"
              class="mb-4 p-4 bg-gray-50 border border-gray-200 border-dashed rounded-lg"
            />
          </div>
        </div>

        <div class="absolute bottom-0 translate-y-full inset-x-0">
          <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl -mt-[20px]">
            <div class="flex items-center justify-center">
              <v-button
                v-track.use_template_button_clicked
                class="mx-auto w-full max-w-[300px]"
                :to="createFormWithTemplateUrl"
              >
                Use this template
              </v-button>
            </div>
            <div class="flex items-center justify-center">
              <div class="text-left mx-auto text-gray-500 text-xs mt-4">
                ✓ Core features 100% free<br>
                ✓ No credit card required<br>
                ✓ No submissions limit on Free plan
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="pt-20 pb-12 bg-white sm:pb-16">
        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
          <div
            class="max-w-2xl mx-auto mt-16 space-y-12 sm:mt-16 sm:space-y-16"
          >
            <div
              class="nf-text"
              v-html="template.description"
            />

            <template v-if="template.questions.length > 0">
              <hr class="mt-12 border-gray-200">
              <div>
                <div class="text-center">
                  <h3
                    class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
                  >
                    Frequently asked questions
                  </h3>
                  <p class="mt-2 text-base font-normal text-gray-600">
                    Everything you need to know about this template.
                  </p>
                </div>
                <dl class="mt-12 space-y-10">
                  <div
                    v-for="(ques, ques_key) in template.questions"
                    :key="ques_key"
                    class="space-y-4"
                  >
                    <dt class="font-semibold text-gray-900 dark:text-gray-100">
                      {{ ques.question }}
                    </dt>
                    <dd
                      class="mt-2 leading-6 text-gray-600 dark:text-gray-400"
                      v-html="ques.answer"
                    />
                  </div>
                </dl>
              </div>
            </template>
          </div>
        </div>
      </section>

      <section
        v-if="relatedTemplates && relatedTemplates.length > 0"
        class="py-12 bg-white border-t border-gray-200 sm:py-16"
      >
        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
          <div class="flex items-center justify-between">
            <h4
              class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
            >
              Related templates
            </h4>
            <v-button
              :to="{ name: 'templates' }"
              color="white"
              size="small"
              :arrow="true"
            >
              View All
            </v-button>
          </div>

          <div
            class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-y-12"
          >
            <single-template
              v-for="related in relatedTemplates"
              :key="related.id"
              :template="related"
            />
          </div>
        </div>
      </section>

      <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
          <div class="text-center">
            <h4
              class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
            >
              How OpnForm works
            </h4>
          </div>

          <div class="grid grid-cols-1 mt-12 md:grid-cols-2 gap-x-8 gap-y-12">
            <div
              class="flex flex-col items-center gap-4 text-center lg:items-start sm:text-left sm:items-start xl:flex-row"
            >
              <div
                class="inline-flex items-center justify-center w-10 h-10 text-base font-bold bg-white rounded-full shadow-sm ring-1 ring-inset ring-gray-200 text-blue-500 shrink-0"
              >
                1
              </div>
              <div>
                <h5 class="text-base font-bold leading-tight text-gray-900">
                  Copy the template and change it the way you like
                </h5>
                <p class="mt-2 text-sm font-normal text-gray-600">
                  <NuxtLink :to="createFormWithTemplateUrl">
                    Click here to copy this template
                  </NuxtLink>
                  and start customizing it. Change the questions, add new ones,
                  choose colors and more.
                </p>
              </div>
            </div>

            <div
              class="flex flex-col items-center gap-4 text-center lg:items-start sm:text-left sm:items-start xl:flex-row"
            >
              <div
                class="inline-flex items-center justify-center w-10 h-10 text-base font-bold bg-white rounded-full shadow-sm ring-1 ring-inset ring-gray-200 text-blue-500 shrink-0"
              >
                2
              </div>
              <div>
                <h5 class="text-base font-bold leading-tight text-gray-900">
                  Embed the form or share it via a link
                </h5>
                <p class="mt-2 text-sm font-normal text-gray-600">
                  You can directly share your form link, or embed the form on
                  your website. It's magic! 🪄
                </p>
              </div>
            </div>
          </div>

          <!-- add video here -->
          <!--          <div class="max-w-5xl mx-auto mt-12 shadow-sm rounded-xl bg-blue-50 aspect-video" />-->
        </div>
      </section>
    </template>

    <open-form-footer class="mt-8 border-t" />
  </div>
</template>

<script setup>
import { computed } from "vue"
import OpenCompleteForm from "../../components/open/forms/OpenCompleteForm.vue"
import Breadcrumb from "~/components/global/Breadcrumb.vue"
import SingleTemplate from "../../components/pages/templates/SingleTemplate.vue"
import { fetchTemplate } from "~/stores/templates.js"
import FormTemplateModal from "~/components/open/forms/components/templates/FormTemplateModal.vue"

defineRouteRules({
  swr: 3600,
})

const { copy } = useClipboard()
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()

const route = useRoute()
const slug = computed(() => route.params.slug)

const template = computed(() => templatesStore.getByKey(slug.value))
const form = computed(() => template.value.structure)

// Fetch the template
if (!template.value) {
  const { data } = await fetchTemplate(slug.value)
  templatesStore.save(data.value)
}

// Fetch related templates
const { data: relatedTemplatesData } = await useAsyncData(
  "related-templates",
  () => {
    return Promise.all(
      template.value.related_templates.map((slug) => {
        if (templatesStore.getByKey(slug)) {
          return Promise.resolve(templatesStore.getByKey(slug))
        }
        return fetchTemplate(slug).then((res) => res.data.value)
      }),
    )
  },
)
templatesStore.save(relatedTemplatesData.value)
templatesStore.initTypesAndIndustries()

// State
const showFormTemplateModal = ref(false)

// Computed
const breadcrumbs = computed(() => {
  if (!template.value) {
    return [{ route: { name: "templates" }, label: "Templates" }]
  }
  return [
    { route: { name: "templates" }, label: "Templates" },
    { label: template.value.name },
  ]
})
const relatedTemplates = computed(() =>
  templatesStore.getByKey(template?.value?.related_templates),
)
const canEditTemplate = computed(
  () =>
    authStore.check &&
    template.value &&
    template.value?.from_prod !== true &&
    (authStore.user.admin ||
      authStore.user.template_editor ||
      template.value.creator_id === authStore.user.id),
)
const createFormWithTemplateUrl = computed(() => {
  return {
    name: authStore.check ? "forms-create" : "forms-create-guest",
    query: { template: template?.value?.slug },
  }
})

// methods
const cleanQuotes = (str) => {
  // Remove starting and ending quotes if any
  return str ? str.replace(/^"/, "").replace(/"$/, "") : ""
}

const copyTemplateUrl = () => {
  copy(template.value.share_url)
  useAlert().success("Copied!")
}

useOpnSeoMeta({
  title: () => {
    if (!template.value || !template.value) return "Form Template"
    return template.value.name
  },
  description() {
    if (!template.value || !template.value) return null
    // take the first 140 characters of the description
    return (
      template.value.short_description?.substring(0, 140) +
      "... | Customize any template and create your own form in minutes."
    )
  },
  ogImage() {
    if (!template.value || !template.value) return null
    return template.value.image_url
  },
  robots: () => {
    if (!template.value || !template.value) return null
    return template.value.publicly_listed ? null : "noindex"
  },
})
</script>

<style lang="scss">
.nf-text {
  @apply space-y-4;
  h2 {
    @apply text-sm font-normal tracking-widest text-gray-500 uppercase;
  }

  p {
    @apply font-normal leading-7 text-gray-900 dark:text-gray-100;
  }

  ol {
    @apply list-decimal list-inside;
  }

  ul {
    @apply list-disc list-inside;
  }
}

.aspect-video {
  aspect-ratio: 16/9;
}
</style>