Add withdrawal form

content/contact/3-inquiries/1-withdrawal.de.md

@@ -0,0 +1,7 @@
+---
+title: "Widerruf"
+faIcon: "fa-solid fa-file-signature"
+weight: 1
+---
+
+Wenn du ein Produkt der Skymatic GmbH gekauft hast und dein Widerrufsrecht ausüben möchtest, nutze bitte unser [Widerrufsformular](/de/withdrawal/).

content/contact/3-inquiries/1-withdrawal.en.md

@@ -0,0 +1,7 @@
+---
+title: "Right of Withdrawal"
+faIcon: "fa-solid fa-file-signature"
+weight: 1
+---
+
+If you have purchased a Skymatic GmbH product and wish to exercise your right of withdrawal, please use our [Withdrawal Form](/withdrawal/).

content/contact/3-inquiries/1-press.de.md → content/contact/3-inquiries/2-press.de.md

@@ -1,7 +1,7 @@
 ---
 title: "Presse"
 faIcon: "fa-solid fa-newspaper"
-weight: 1
+weight: 2
 ---
 
 Bei pressebezogenen Fragen findest du in unserer <a href="/de/presskit/">Pressemappe</a> einige grundlegende Informationen, Materialien und den richtigen Ansprechpartner.

content/contact/3-inquiries/1-press.en.md → content/contact/3-inquiries/2-press.en.md

@@ -1,7 +1,7 @@
 ---
 title: "Press"
 faIcon: "fa-solid fa-newspaper"
-weight: 1
+weight: 2
 ---
 
 For press-related questions check out our <a href="/presskit/">Press Kit</a>, which will provide you with some basic information, assets and the right contact person.

content/contact/3-inquiries/2-enterprise.de.md → content/contact/3-inquiries/3-enterprise.de.md

@@ -1,7 +1,7 @@
 ---
 title: "Enterprise"
 faIcon: "fa-solid fa-briefcase"
-weight: 2
+weight: 3
 ---
 
 Wir sind offen für <a href="/de/coop/">Kooperationen</a> und bieten eine Vielzahl von <a href="/de/enterprise/">B2B-Dienstleistungen</a> an, darunter auch White-Labeling.

content/contact/3-inquiries/2-enterprise.en.md → content/contact/3-inquiries/3-enterprise.en.md

@@ -1,7 +1,7 @@
 ---
 title: "Enterprise"
 faIcon: "fa-solid fa-briefcase"
-weight: 2
+weight: 3
 ---
 
 We're open to <a href="/coop/">cooperations</a> and offer a variety of <a href="/enterprise/">B2B services</a>, including white labeling.

content/contact/3-inquiries/3-jobs.de.md → content/contact/3-inquiries/4-jobs.de.md

@@ -1,7 +1,7 @@
 ---
 title: "Jobs"
 faIcon: "fa-solid fa-user-plus"
-weight: 3
+weight: 4
 ---
 
 Cryptomator wird in erster Linie vom {{< extlink "https://skymatic.de/team/" "Skymatic-Team" >}} gewartet. Wenn du glaubst, dass du zu uns passt, kannst du dich gerne {{< extlink "https://skymatic.de/jobs/" "bei Skymatic bewerben" >}}.

content/contact/3-inquiries/3-jobs.en.md → content/contact/3-inquiries/4-jobs.en.md

@@ -1,7 +1,7 @@
 ---
 title: "Jobs"
 faIcon: "fa-solid fa-user-plus"
-weight: 3
+weight: 4
 ---
 
 Cryptomator is primarily maintained by the {{< extlink "https://skymatic.de/en/team/" "Skymatic Team" >}}. If you think you fit in, feel free to {{< extlink "https://skymatic.de/en/jobs/" "apply to Skymatic" >}}.

content/withdrawal.de.html

@@ -0,0 +1,5 @@
+---
+title: "Widerruf"
+description: "Mit diesem Formular kannst du dein Widerrufsrecht für den Kauf eines Produkts der Skymatic GmbH ausüben. Gib einfach deinen Namen, deine E-Mail-Adresse und deine Bestellnummer an — um den Rest kümmern wir uns."
+type: withdrawal
+---

content/withdrawal.en.html

@@ -0,0 +1,5 @@
+---
+title: "Withdrawal"
+description: "Use this form to exercise your right of withdrawal for a Skymatic GmbH purchase. Just provide your name, email, and order number, and we'll take care of the rest."
+type: withdrawal
+---

i18n/de.yaml

@@ -1228,6 +1228,32 @@
 - id: contact_sales_step_3_description
   translation: "Du erhältst innerhalb eines Werktages eine detaillierte Antwort von unserem Team."
 
+# Withdrawal Form
+- id: withdrawal_name
+  translation: "Name"
+- id: withdrawal_email
+  translation: "E-Mail-Adresse"
+- id: withdrawal_po_number
+  translation: "Bestellnummer"
+- id: withdrawal_po_number_placeholder
+  translation: "Die Bestellnummer aus deiner Kaufbestätigung"
+- id: withdrawal_product
+  translation: "Produkt"
+- id: withdrawal_product_placeholder
+  translation: "Bitte wähle ein Produkt"
+- id: withdrawal_reason
+  translation: "Grund (optional)"
+- id: withdrawal_reason_placeholder
+  translation: "Wenn du möchtest, teile uns mit, warum du widerrufst..."
+- id: withdrawal_submit
+  translation: "Widerruf absenden"
+- id: withdrawal_success_title
+  translation: "Widerruf erhalten!"
+- id: withdrawal_success_message
+  translation: "Vielen Dank für deinen Widerruf. Wir bearbeiten deine Rückerstattungsanfrage und bestätigen dir den Eingang per E-Mail."
+- id: withdrawal_what_happens_title
+  translation: "Was passiert als Nächstes?"
+
 # Partner Form
 - id: partner_first_name
   translation: "Vorname"

i18n/en.yaml

@@ -1267,6 +1267,32 @@
 - id: contact_sales_step_3_description
   translation: "Get a detailed, personalized response within one business day."
 
+# Withdrawal Form
+- id: withdrawal_name
+  translation: "Name"
+- id: withdrawal_email
+  translation: "Email Address"
+- id: withdrawal_po_number
+  translation: "Order Number"
+- id: withdrawal_po_number_placeholder
+  translation: "The order number from your purchase confirmation"
+- id: withdrawal_product
+  translation: "Product"
+- id: withdrawal_product_placeholder
+  translation: "Please select a product"
+- id: withdrawal_reason
+  translation: "Reason (optional)"
+- id: withdrawal_reason_placeholder
+  translation: "If you'd like, let us know why you're withdrawing..."
+- id: withdrawal_submit
+  translation: "Submit Withdrawal"
+- id: withdrawal_success_title
+  translation: "Withdrawal Received!"
+- id: withdrawal_success_message
+  translation: "Thanks for reaching out. We'll process the refund requst and confirm the request by email."
+- id: withdrawal_what_happens_title
+  translation: "What happens next?"
+
 # Partner Form
 - id: partner_first_name
   translation: "First Name"

layouts/partials/footer.html

@@ -32,6 +32,9 @@ <h4 class="block uppercase tracking-wide text-gray-400 text-xs font-bold mb-2">S
         {{- with .Site.GetPage "/contact" }}
         <li><a class="text-white hover:text-secondary hover:no-underline" href="{{ .RelPermalink }}" data-umami-event="footer-contact">{{ .Title }}</a></li>
         {{- end }}
+        {{- with .Site.GetPage "/withdrawal" }}
+        <li><a class="text-white hover:text-secondary hover:no-underline" href="{{ .RelPermalink }}" data-umami-event="footer-withdrawal">{{ .Title }}</a></li>
+        {{- end }}
       </ul>
     </div>
 

layouts/withdrawal/single.html

@@ -0,0 +1,130 @@
+{{ define "preloads" }}
+  {{ partial "altcha-css.html" . }}
+{{ end }}
+{{ define "main" }}
+  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {name: '', email: '', po_number: '', product: '', reason: '', captcha: null}, apiForm: null, captchaState: null}" x-init="apiForm = new ApiForm($refs.form, feedbackData, submitData, API_BASE_URL + '/connect/contact/withdrawal')" class="container py-12">
+    <header class="mb-6">
+      <h1 class="font-h1 mb-8">{{ .Title }}</h1>
+      <p class="lead">{{ .Description }}</p>
+    </header>
+
+    <form x-ref="form" @submit.prevent="apiForm.request(); $refs.captcha.reset()">
+      <div x-show="!feedbackData.success" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
+        <!-- Left Side - Withdrawal Form -->
+        <section class="white-box md:col-span-2">
+          <div class="px-4 py-5 md:p-6">
+            <div class="grid grid-cols-2 gap-6">
+              <!-- Name -->
+              <div class="col-span-2">
+                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
+                  {{ i18n "withdrawal_name" }} <span class="text-red-500" aria-label="required">*</span>
+                </label>
+                <input type="text" id="name" name="name" x-model="submitData.name" class="block input-box w-full" maxlength="100" required aria-required="true" @blur="$el.classList.add('show-invalid')">
+              </div>
+
+              <!-- Email -->
+              <div class="col-span-2">
+                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+                  {{ i18n "withdrawal_email" }} <span class="text-red-500" aria-label="required">*</span>
+                </label>
+                <input type="email" id="email" name="email" x-model="submitData.email" class="block input-box w-full" required aria-required="true" @blur="$el.classList.add('show-invalid')">
+              </div>
+
+              <!-- Order Number -->
+              <div class="col-span-2">
+                <label for="po_number" class="block text-sm font-medium text-gray-700 mb-2">
+                  {{ i18n "withdrawal_po_number" }} <span class="text-red-500" aria-label="required">*</span>
+                </label>
+                <input type="text" id="po_number" name="po_number" x-model="submitData.po_number" class="block input-box w-full" maxlength="100" required aria-required="true" placeholder="{{ i18n "withdrawal_po_number_placeholder" }}" @blur="$el.classList.add('show-invalid')">
+              </div>
+
+              <!-- Product -->
+              <div class="col-span-2">
+                <label for="product" class="block text-sm font-medium text-gray-700 mb-2">
+                  {{ i18n "withdrawal_product" }} <span class="text-red-500" aria-label="required">*</span>
+                </label>
+                <select id="product" name="product" x-model="submitData.product" class="block input-box w-full" required aria-required="true" @blur="$el.classList.add('show-invalid')">
+                  <option value="">{{ i18n "withdrawal_product_placeholder" }}</option>
+                  <option value="DESKTOP">Cryptomator Desktop</option>
+                  <option value="ANDROID">Cryptomator Android</option>
+                  <option value="IOS">Cryptomator iOS</option>
+                  <option value="HUB">Cryptomator Hub</option>
+                </select>
+              </div>
+
+              <!-- Reason (optional) -->
+              <div class="col-span-2">
+                <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">
+                  {{ i18n "withdrawal_reason" }}
+                </label>
+                <textarea id="reason" name="reason" x-model="submitData.reason" rows="4" class="block input-box w-full" maxlength="2000" placeholder="{{ i18n "withdrawal_reason_placeholder" }}"></textarea>
+              </div>
+
+              <div class="col-span-2">
+                <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
+                <button :disabled="feedbackData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="withdrawal-form" x-cloak>
+                  <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
+                  {{ i18n "withdrawal_submit" }}
+                </button>
+                {{ $challengeUrl := printf "%s/connect/contact/challenge" .Site.Params.apiBaseUrl }}
+                {{ partial "captcha.html" (dict "challengeUrl" $challengeUrl "captchaPayload" "submitData.captcha" "captchaState" "captchaState") }}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Right Side - Sidebar -->
+        <aside class="white-box md:col-span-1">
+          <div class="px-4 py-5 md:p-6">
+            <div class="space-y-8">
+              <div>
+                <h3 class="font-h3 mb-6">{{ i18n "other_contact_looking_for_title" }}</h3>
+
+                <ul class="space-y-6">
+                  <li>
+                    <a href="{{ .Site.LanguagePrefix }}/contact/" class="flex items-start group">
+                      <i class="fa-solid fa-arrow-right text-primary group-hover:translate-x-1 transition-transform duration-200 mr-3 mt-1"></i>
+                      <div>
+                        <div class="font-medium text-link group-hover:underline">{{ i18n "other_contact_link_contact" }}</div>
+                        <p class="text-sm text-gray-600 mt-1">{{ i18n "other_contact_link_contact_description" }}</p>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+
+      <section x-show="feedbackData.success" class="white-box" x-cloak>
+        <div class="flex flex-col items-center justify-center gap-4 text-center md:min-h-110 px-4 py-5 md:p-6">
+          <i class="fa-solid fa-check-circle text-7xl text-secondary"></i>
+          <h3 class="font-h3">
+            {{ i18n "withdrawal_success_title" }}
+          </h3>
+          <p class="font-p">
+            {{ i18n "withdrawal_success_message" }}
+          </p>
+        </div>
+      </section>
+    </form>
+  </section>
+{{ end }}
+{{ define "script" }}
+  {{ if hugo.IsDevelopment }}
+    {{ $apiFormJs := resources.Get "js/apiform.js" }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
+    {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
+    <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" defer></script>
+  {{ else }}
+    {{ $apiFormJs := resources.Get "js/apiform.js" | minify | fingerprint }}
+    <script type="text/javascript" src="{{ $apiFormJs.RelPermalink }}" integrity="{{ $apiFormJs.Data.Integrity }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
+    {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
+    <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" integrity="{{ $altchaWorkerJs.Data.Integrity }}" defer></script>
+  {{ end }}
+{{ end }}