Newsletter subscription on checkout success (#60)

resources/views/checkout/partials/sections/success/newsletter.blade.php

@@ -0,0 +1,8 @@
+<template v-if="$root.loggedIn">
+    <x-rapidez-ct::newsletter/>
+</template>
+@if (Rapidez::config('newsletter/subscription/allow_guest_subscribe', 1))
+    <template v-else>
+        <x-rapidez-ct::newsletter.input email="$root.guestEmail" />
+    </template>
+@endif

resources/views/checkout/steps/success.blade.php

@@ -9,6 +9,7 @@
         <x-rapidez-ct::sections>
             @include('rapidez-ct::checkout.partials.sections.success.order-info')
             @include('rapidez-ct::checkout.partials.sections.success.products')
+            @include('rapidez-ct::checkout.partials.sections.success.newsletter')
             @includeWhen(
                 config('rapidez.checkout-theme.checkout.success.register'),
                 'rapidez-ct::checkout.partials.sections.success.create-account'

resources/views/components/newsletter/index.blade.php

@@ -0,0 +1,26 @@
+@props(['id' => uniqId('newsletter-')])
+
+<x-rapidez-ct::card.inactive>
+    <x-rapidez-ct::title.lg class="mb-5">
+        @lang('Newsletter')
+    </x-rapidez-ct::title.lg>
+
+    @if (!$attributes->has('v-model'))
+        <graphql-mutation
+            v-cloak
+            query="mutation subscribeNewsletter ($is_subscribed: Boolean!) { updateCustomerV2(input: { is_subscribed: $is_subscribed }) { customer { is_subscribed } } }"
+            :alert="false"
+            :clear="false"
+            :variables="{ is_subscribed: data?.customer?.is_subscribed ?? $root.user?.extension_attributes?.is_subscribed ?? false }"
+            v-slot="{ mutate, variables }"
+        >
+    @endif
+
+    <x-rapidez-ct::newsletter.partials.checkbox
+        :v-model="$attributes->has('v-model') ? $attributes['v-model'] : 'variables.is_subscribed'"
+    />
+
+    @if (!$attributes->has('v-model'))
+        </graphql-mutation>
+    @endif
+</x-rapidez-ct::card.inactive>

resources/views/components/newsletter/input.blade.php

@@ -0,0 +1,19 @@
+@props(['id' => uniqId('newsletter-'), 'email' => "''"])
+
+<x-rapidez-ct::card.inactive class="relative">
+    <x-rapidez-ct::title.lg class="mb-5">
+        @lang('Newsletter')
+    </x-rapidez-ct::title.lg>
+    <x-rapidez-ct::newsletter-visual />
+    <graphql-mutation
+        v-cloak
+        query="mutation visitor ($email: String!) { subscribeEmailToNewsletter(email: $email) { status } }"
+        :variables="{ email: {{ $email }} }"
+        :clear="true"
+        :notify="{ message: '@lang('Thank you for subscribing')', type: 'success' }"
+    >
+        <template slot-scope="{ mutate, variables, mutated, mutating, error }">
+            <x-rapidez-ct::newsletter.partials.input />
+        </template>
+    </graphql-mutation>
+</x-rapidez-ct::card.inactive>

resources/views/components/newsletter/partials/checkbox.blade.php

@@ -0,0 +1,14 @@
+<x-rapidez-ct::input.checkbox {{ $attributes->merge([
+    'class' => 'relative flex w-full cursor-pointer !items-start rounded border bg-white p-7',
+    'id' => $id,
+    'v-on:change'  => '() => {
+        if (typeof mutate === \'function\') { mutate() }
+        if ($root.loggedIn) { $root.user.extension_attributes.is_subscribed=variables.is_subscribed }
+    }'
+]) }}>
+    <x-slot:slot class="ml-2 flex flex-col gap-1">
+        <span class="text-ct-primary text-sm font-medium">@lang('Yes, I want to subscribe to the newsletter')</span>
+        <span class="text-ct-inactive text-xs font-normal">@lang('You will receive this newsletter approximately 2x a year')</span>
+        <x-rapidez-ct::newsletter-visual />
+    </x-slot:slot>
+</x-rapidez-ct::input.checkbox>

resources/views/components/newsletter/partials/input.blade.php

@@ -0,0 +1,28 @@
+<form
+    class="relative flex gap-3 flex-wrap items-end w-full z-10"
+    v-on:submit.prevent="mutate"
+>
+    <div class="flex-1">
+        <x-rapidez-ct::input
+            name="email-newsletter"
+            type="email"
+            required
+            v-model="variables.email"
+            :label="__('Email address')"
+            :placeholder="__('Enter your email address')"
+        />
+    </div>
+    <x-rapidez-ct::button.accent
+        class="relative self-end whitespace-nowrap"
+        type="submit"
+        v-bind:disabled="mutating && !error"
+    >
+        <div :class="{ 'opacity-0': (mutated || mutating) && !error }">
+            @lang('Subscribe to newsletter')
+        </div>
+        <div class="absolute inset-0 p-3.5" v-if="(mutated || mutating) && !error">
+            <x-heroicon-o-arrow-path class="mx-auto h-full animate-spin" v-if="mutating" />
+            <x-heroicon-o-check class="mx-auto h-full" v-else />
+        </div>
+    </x-rapidez-ct::button.accent>
+</form>