@shopware/cms-base-layer 0.0.0-canary-20250116171244

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-2023 Shopware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,144 @@
+# shopware/frontends - cms-base
+
+[![](https://img.shields.io/npm/v/@shopware/cms-base-layer?color=blue&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCA0ODggNTUzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDM5LjA0MSAxMjkuNTkzTDI1OC43NjkgMzEuMzA3NkMyNDQuOTE1IDIzLjc1NDEgMjI4LjExNiAyNC4wMDkzIDIxNC40OTcgMzEuOTgwMkw0Ny4yNjkgMTI5Ljg1OEMzMy40NzYzIDEzNy45MzEgMjUgMTUyLjcxMyAyNSAxNjguNjk1VjM4OC40NjZDMjUgNDA0LjczMiAzMy43Nzg1IDQxOS43MzIgNDcuOTYwMiA0MjcuNjk5TDIxNS4xNzggNTIxLjYzNkMyMjguNDUxIDUyOS4wOTIgMjQ0LjU5MyA1MjkuMzMyIDI1OC4wODIgNTIyLjI3NEw0MzguMzY0IDQyNy45MzRDNDUzLjIwMSA0MjAuMTcgNDYyLjUgNDA0LjgwOSA0NjIuNSAzODguMDYzVjE2OS4xMDJDNDYyLjUgMTUyLjYzMiA0NTMuNTAyIDEzNy40NzcgNDM5LjA0MSAxMjkuNTkzWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXJfMTUzXzY5MjY1KSIgc3Ryb2tlLXdpZHRoPSI1MCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzE1M182OTI2NSIgeDE9Ii0xNi4yOTg5IiB5MT0iMTY1LjM0OSIgeDI9IjI3Ni40MTIiIHkyPSItODkuMzIzNCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDA4NUZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0MwRTJGNSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==)](https://npmjs.com/package/@shopware/cms-base-layer)
+[![](https://img.shields.io/github/package-json/v/shopware/frontends?color=blue&filename=packages%2Fcms-base%2Fpackage.json&label=cms-base%40monorepo&logo=github)](https://github.com/shopware/frontends/tree/main/packages/cms-base)
+[![](https://img.shields.io/github/issues/shopware/frontends/cms-base?label=cms-base%20issues&logo=github)](https://github.com/shopware/frontends/issues?q=is%3Aopen+is%3Aissue+label%3Acms-base)
+[![](https://img.shields.io/github/license/shopware/frontends?color=blue)](#)
+
+Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://frontends.shopware.com/framework/styling.html) using atomic css syntax (UnoCss / Tailwind).
+
+It is useful for projects that want to use the CMS components but design their own layout.
+
+## Features
+
+- Vue components for [Shopping Experiences](https://www.shopware.com/en/products/shopping-experiences/) CMS
+- CMS sections, blocks and elements styled using [Tailwind CSS](https://tailwindcss.com/) classes
+- 🚀 Empowered by [@shopware/composables](https://www.npmjs.com/package/@shopware/composables)
+
+## Setup
+
+Install npm package:
+
+<!-- automd:pm-install name="@shopware/cms-base-layer" dev -->
+
+```sh
+# ✨ Auto-detect
+npx nypm install -D @shopware/cms-base-layer
+
+# npm
+npm install -D @shopware/cms-base-layer
+
+# yarn
+yarn add -D @shopware/cms-base-layer
+
+# pnpm
+pnpm install -D @shopware/cms-base-layer
+
+# bun
+bun install -D @shopware/cms-base-layer
+```
+
+<!-- /automd -->
+
+Then, register the Nuxt layer in `nuxt.config.ts` file:
+
+<!-- automd:file src="templates/vue-blank/nuxt.config.ts" code -->
+
+```ts [nuxt.config.ts]
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
+  shopware: {
+    endpoint: "https://demo-frontends.shopware.store/store-api/",
+    accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
+  },
+  modules: ["@shopware/nuxt-module"],
+  /**
+   * Commented because of the StackBlitz error
+   * Issue: https://github.com/shopware/frontends/issues/88
+   */
+  typescript: {
+    // typeCheck: true,
+    strict: true,
+  },
+  telemetry: false,
+});
+```
+
+<!-- /automd -->
+
+## Basic usage
+
+Since all CMS components are registered in your Nuxt application, you can now start using them in your template (no imports needed):
+
+```js
+/* Vue component */
+
+// response object can be a Product|Category|Landing Page response from Shopware 6 store-api containing a layout (cmsPage object) built using  Shopping Experiences
+<template>
+    <CmsPage v-if="response.cmsPage" :content="response.cmsPage"/>
+</template>
+```
+
+> You can use default styling by installing/importing Tailwind CSS stylesheet in your project.
+
+See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) how to use `cms-base` package in your project based on Nuxt v3.
+
+## 📘 Available components
+
+The list of available blocks and elements is [here](https://frontends.shopware.com/packages/cms-base.html#available-components).
+
+## 🔄 Overwriting components
+
+The procedure is:
+
+- find a component in component's [list](https://frontends.shopware.com/packages/cms-base.html#available-components), using a [Vue devtools](https://devtools.vuejs.org/) or browsing the github [repository](https://github.com/shopware/frontends/tree/main/packages/cms-base-layer/components)
+- take its name
+- create a file with the same name and place it into `~/components` dir in your nuxt project (or wherever according your nuxt config)
+
+✅ Thanks to this, nuxt will take the component registered in your app instead of the one registered by this nuxt layer.
+
+### Internal components
+
+❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.**
+
+There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with `Sw` prefix, like [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/SwProductCard.vue).
+
+An example: some components use `SwSharedPrice.vue` to show prices with corresponding currency for products in many places like product card, product details page and so on. In order to change the way how the price is displayed consistently - create a one component with a name `SwSharedPrice.vue` and that's it. The new component will be used everywhere where is "imported" (autoimported actually).
+
+### ⚠️ `<RouterLink/>` components used
+
+Some components use `RouterLink` component internally, available in [Vue Router](https://github.com/vuejs/router).
+In order to parse CMS components correctly and avoid missing component warning, it's **highly recommended** to have **Vue Router installed** or **Nuxt router enabled** in your application.
+
+## TypeScript support
+
+All components are fully typed with TypeScript.
+
+No additional packages needed to be installed.
+
+## Links
+
+- [📘 Documentation](https://frontends.shopware.com)
+
+- [👥 Community](https://shopwarecommunity.slack.com) (`#composable-frontends`)
+
+<!-- AUTO GENERATED CHANGELOG -->
+
+## Changelog
+
+Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
+
+### Latest changes: 0.0.0-canary-20250116171244
+
+### Minor Changes
+
+- [#1602](https://github.com/shopware/frontends/pull/1602) [`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed) Thanks [@patzick](https://github.com/patzick)! - Switch from `@shopware-pwa/helpers-next` to `@shopware/helpers` package.
+
+- [#1602](https://github.com/shopware/frontends/pull/1602) [`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed) Thanks [@patzick](https://github.com/patzick)! - Switch from `@shopware-pwa/cms-base` to `@shopware/cms-base-layer` package.
+
+### Patch Changes
+
+- Updated dependencies [[`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed), [`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed)]:
+  - @shopware/composables@0.0.0-canary-20250116171244
+  - @shopware/helpers@0.0.0-canary-20250116171244

package/components/SwCategoryNavigation.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+const props = withDefaults(
+  defineProps<{
+    activeCategory: Schemas["Category"];
+    elements: Schemas["Category"][];
+    level: number;
+  }>(),
+  {
+    level: 0,
+  },
+);
+
+function getHighlightCategory(navigationElement: Schemas["Category"]) {
+  return (
+    (props.activeCategory?.path || "").includes(navigationElement.id) ||
+    navigationElement.id === props.activeCategory?.id
+  );
+}
+</script>
+<template>
+  <ul v-if="props.elements?.length" class="list-none m-0 px-5">
+    <li
+      v-for="(navigationElement, index) in props.elements"
+      :key="index"
+      :class="{
+        'border-b border-gray-200': props.level === 0,
+      }"
+    >
+      <SwCategoryNavigationLink
+        :navigation-element="navigationElement"
+        :is-highlighted="getHighlightCategory(navigationElement)"
+        :is-active="navigationElement.id === props.activeCategory?.id"
+      />
+      <SwCategoryNavigation
+        v-if="navigationElement.children"
+        :elements="navigationElement.children"
+        :active-category="props.activeCategory"
+        :level="props.level + 1"
+      />
+    </li>
+  </ul>
+</template>

package/components/SwCategoryNavigationLink.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {
+  buildUrlPrefix,
+  getCategoryRoute,
+  getTranslatedProperty,
+  urlIsAbsolute,
+} from "@shopware/helpers";
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { useUrlResolver } from "#imports";
+import type { Schemas } from "#shopware";
+
+interface Props {
+  navigationElement: Schemas["Category"];
+  isActive?: boolean;
+  isHighlighted?: boolean;
+}
+
+const props = defineProps<Props>();
+const { getUrlPrefix } = useUrlResolver();
+const url = computed(() => {
+  return buildUrlPrefix(
+    getCategoryRoute(props.navigationElement),
+    getUrlPrefix(),
+  );
+});
+</script>
+<template>
+  <div
+    class="flex items-center py-2 px-5 text-base rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 my-2"
+  >
+    <RouterLink
+      v-if="!urlIsAbsolute(url.path)"
+      :to="url"
+      :class="[
+        props.isHighlighted ? 'font-bold' : 'font-normal',
+        props.isActive ? 'text-indigo-600' : 'text-gray-900',
+      ]"
+    >
+      <span>{{ getTranslatedProperty(navigationElement, "name") }}</span>
+    </RouterLink>
+    <a
+      v-else
+      :href="url.path"
+      :class="[
+        props.isHighlighted ? 'font-bold' : 'font-normal',
+        props.isActive ? 'text-indigo-600' : 'text-gray-900',
+      ]"
+      :target="
+        navigationElement.externalLink || navigationElement.linkNewTab
+          ? '_blank'
+          : ''
+      "
+      ><span>{{ getTranslatedProperty(navigationElement, "name") }}</span></a
+    >
+  </div>
+</template>

package/components/SwContactForm.vue

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { ApiClientError } from "@shopware/api-client";
+import type { ApiError } from "@shopware/api-client";
+import type { CmsElementForm } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { useVuelidate } from "@vuelidate/core";
+import { email, minLength, required } from "@vuelidate/validators";
+import { defu } from "defu";
+import { computed, reactive, ref } from "vue";
+import {
+  useCmsElementConfig,
+  useNavigationContext,
+  useSalutations,
+  useShopwareContext,
+} from "#imports";
+
+const props = defineProps<{
+  content: CmsElementForm;
+}>();
+
+type Translations = {
+  form: {
+    salutation: string;
+    salutationPlaceholder: string;
+    firstName: string;
+    firstNamePlaceholder: string;
+    lastName: string;
+    lastNamePlaceholder: string;
+    email: string;
+    emailPlaceholder: string;
+    phone: string;
+    phonePlaceholder: string;
+    subject: string;
+    subjectPlaceholder: string;
+    comment: string;
+    commentPlaceholder: string;
+    privacy: string;
+    dataProtection: string;
+    submit: string;
+    messages: {
+      contactFormSuccess: string;
+    };
+  };
+};
+
+let translations: Translations = {
+  form: {
+    salutation: "Salutation",
+    salutationPlaceholder: "Enter salutation...",
+    firstName: "First name",
+    firstNamePlaceholder: "Enter first name...",
+    lastName: "Last name",
+    lastNamePlaceholder: "Enter last name...",
+    email: "Email address",
+    emailPlaceholder: "Enter email address...",
+    phone: "Phone number",
+    phonePlaceholder: "Enter phone number...",
+    subject: "Subject",
+    subjectPlaceholder: "Enter subject...",
+    comment: "Comment",
+    commentPlaceholder: "Enter comment...",
+    privacy: "Privacy",
+    dataProtection: "I have read the data protection information.",
+    submit: "Submit",
+    messages: {
+      contactFormSuccess:
+        "We have received your contact request and will process it as soon as possible.",
+    },
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const loading = ref<boolean>();
+const formSent = ref<boolean>(false);
+
+type ErrorMessages = ApiClientError<{
+  errors: ApiError[];
+}>;
+
+const errorMessages = ref<ErrorMessages[]>([]);
+
+const { getSalutations } = useSalutations();
+const { foreignKey } = useNavigationContext();
+const { apiClient } = useShopwareContext();
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const getConfirmationText = computed(
+  () =>
+    getConfigValue("confirmationText") ??
+    translations.form.messages.contactFormSuccess,
+);
+const getFormTitle = computed(() => getConfigValue("title") || "Contact");
+const state = reactive({
+  salutationId: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+  subject: "",
+  comment: "",
+  phone: "",
+  checkbox: false,
+});
+
+const rules = computed(() => ({
+  email: {
+    required,
+    email,
+  },
+  firstName: {
+    required,
+    minLength: minLength(3),
+  },
+  lastName: {
+    required,
+    minLength: minLength(3),
+  },
+  salutationId: {
+    required,
+  },
+  phone: {
+    required,
+    minLength: minLength(3),
+  },
+  subject: {
+    required,
+    minLength: minLength(3),
+  },
+  comment: {
+    required,
+    minLength: minLength(10),
+  },
+  checkbox: {
+    required,
+    isTrue: (value: boolean) => value === true,
+  },
+}));
+
+const $v = useVuelidate(rules, state);
+const invokeSubmit = async () => {
+  $v.value.$touch();
+  const valid = await $v.value.$validate();
+  if (valid) {
+    loading.value = true;
+    try {
+      await apiClient.invoke("sendContactMail post /contact-form", {
+        body: {
+          ...state,
+          navigationId: foreignKey.value,
+        },
+      });
+      formSent.value = true;
+    } catch (e) {
+      if (e instanceof ApiClientError) {
+        errorMessages.value = e.details.errors;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+};
+</script>
+<template>
+  <form class="w-full relative" @submit.prevent="invokeSubmit">
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center z-10 bg-white/50"
+    >
+      <div
+        class="h-15 w-15 i-carbon-progress-bar-round animate-spin c-gray-500"
+      />
+    </div>
+    <h3 class="pb-3 mb-10 border-b border-gray-300">
+      {{ getFormTitle }}
+    </h3>
+    <template v-if="!formSent">
+      <div class="grid grid-cols-12 gap-5">
+        <div class="col-span-4">
+          <label for="salutation">{{ translations.form.salutation }} *</label>
+          <select
+            id="salutation"
+            v-model="state.salutationId"
+            name="salutation"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.salutationId.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            @blur="$v.salutationId.$touch()"
+          >
+            <option disabled selected value="">
+              {{ translations.form.salutationPlaceholder }}
+            </option>
+            <option
+              v-for="salutation in getSalutations"
+              :key="salutation.id"
+              :value="salutation.id"
+            >
+              {{ salutation.displayName }}
+            </option>
+          </select>
+          <span
+            v-if="$v.salutationId.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.salutationId.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-4">
+          <label for="first-name">{{ translations.form.firstName }} *</label>
+          <input
+            id="first-name"
+            v-model="state.firstName"
+            name="first-name"
+            type="text"
+            autocomplete="given-name"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.firstName.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.firstNamePlaceholder"
+            @blur="$v.firstName.$touch()"
+          />
+          <span
+            v-if="$v.firstName.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.firstName.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-4">
+          <label for="last-name">{{ translations.form.lastName }} *</label>
+          <input
+            id="last-name"
+            v-model="state.lastName"
+            name="last-name"
+            type="text"
+            autocomplete="family-name"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.lastName.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.lastNamePlaceholder"
+            @blur="$v.lastName.$touch()"
+          />
+          <span
+            v-if="$v.lastName.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.lastName.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-6">
+          <label for="email-address">{{ translations.form.email }} *</label>
+          <input
+            id="email-address"
+            v-model="state.email"
+            name="email"
+            type="email"
+            autocomplete="email"
+            :class="[
+              $v.email.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :placeholder="translations.form.emailPlaceholder"
+            @blur="$v.email.$touch()"
+          />
+          <span
+            v-if="$v.email.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.email.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-6">
+          <label for="phone">{{ translations.form.phone }} *</label>
+          <input
+            id="phone"
+            v-model="state.phone"
+            name="phone"
+            type="text"
+            autocomplete="phone"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.phone.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.phonePlaceholder"
+            @blur="$v.phone.$touch()"
+          />
+          <span
+            v-if="$v.phone.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.phone.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-12">
+          <label for="subject">{{ translations.form.subject }} *</label>
+          <input
+            id="subject"
+            v-model="state.subject"
+            name="subject"
+            type="text"
+            autocomplete="subject"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.subject.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.subjectPlaceholder"
+            @blur="$v.subject.$touch()"
+          />
+          <span
+            v-if="$v.subject.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.subject.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-12">
+          <label for="comment">{{ translations.form.comment }} *</label>
+          <textarea
+            id="comment"
+            v-model="state.comment"
+            name="comment"
+            type="text"
+            autocomplete="comment"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.comment.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.commentPlaceholder"
+            rows="5"
+            @blur="$v.comment.$touch()"
+          />
+          <span
+            v-if="$v.comment.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.comment.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-12">
+          <label>{{ translations.form.privacy }} *</label>
+          <div class="flex gap-3 items-start">
+            <input
+              id="privacy"
+              v-model="state.checkbox"
+              name="privacy"
+              type="checkbox"
+              class="mt-1 focus:ring-indigo-500 h-4 w-4 border text-indigo-600 rounded"
+              :class="[
+                $v.checkbox.$error ? 'border-red-600' : 'border-gray-300',
+              ]"
+            />
+            <div>
+              <label
+                :class="[$v.checkbox.$error ? 'text-red-600' : '']"
+                for="privacy"
+              >
+                {{ translations.form.dataProtection }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end mt-10">
+        <button
+          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-75"
+          type="submit"
+        >
+          {{ translations.form.submit }}
+        </button>
+      </div>
+    </template>
+    <template v-else>
+      <p class="py-10 text-lg text-center">{{ getConfirmationText }}</p>
+    </template>
+  </form>
+</template>