Merge branch 'master' of github.com:rapidez/checkout-theme into feat/…

…out-of-stock-cart

CHANGELOG.md

@@ -1,6 +1,30 @@
 # Changelog 
 
-[Unreleased changes](https://github.com/rapidez/checkout-theme/compare/2.8.0...master)
+[Unreleased changes](https://github.com/rapidez/checkout-theme/compare/2.9.2...master)
+## [2.9.2](https://github.com/rapidez/checkout-theme/releases/tag/2.9.2) - 2024-11-08
+
+### Fixed
+
+- Input v-cloak fix (#133)
+- Use v-model variable for is_subscribed (#136)
+
+## [2.9.1](https://github.com/rapidez/checkout-theme/releases/tag/2.9.1) - 2024-11-06
+
+### Fixed
+
+- Make sure you actually log in from the checkout (#121)
+
+## [2.9.0](https://github.com/rapidez/checkout-theme/releases/tag/2.9.0) - 2024-11-05
+
+### Added
+
+- VAT check in register page (#129)
+- Disable checkout button and add notice if not in stock (#127)
+
+### Changed
+
+- Changed breakpoints for smaller screens (#124)
+
 ## [2.8.0](https://github.com/rapidez/checkout-theme/releases/tag/2.8.0) - 2024-10-31
 
 ### Added

README.md

@@ -1,6 +1,6 @@
 # Rapidez Checkout Theme
 
-An **opinionated** checkout with customer center for [Rapidez](https://github.com/rapidez/rapidez). Easily configurable with your own logo, colors, fonts and style. A fully mobile optimized theme which takes about 1 hour to fully implement.
+An **opinionated** checkout with customer center for [Rapidez](https://github.com/rapidez/rapidez). Easily configurable with your own logo, checkout header/footer, colors, fonts and style. A fully mobile optimized theme which takes about 1 hour to fully implement.
 
 ![](images/checkout-theme.gif)
 
@@ -26,6 +26,7 @@ Customer center
 Easily configurable in less than 5 minutes
 - Colors - Change a total of 8 variables for personal customization
 - Logo - Simply add your own logo by extending 1 template
+- Checkout Header/Footer - Populate these files with relevant usps and links; currently, they use placeholder content and should be replaced with actual brand information
 - Visuals - Change the look of various types of cards, customer center tiles, etc, by extending well-defined templates
 
 Fast checkout experience

resources/core-overwrites/layouts/checkout/footer.blade.php

@@ -0,0 +1,9 @@
+<footer class="mt-auto">
+    <div class="mt-10 flex items-center justify-center gap-6 border-b-4 border-b-ct-enhanced bg-ct-inactive-100 py-4 text-sm text-ct-inactive">
+        @foreach (['Privacy Policy', 'Terms & Conditions'] as $link)
+            <a class="hover:underline" href="#">
+                {{ $link }}
+            </a>
+        @endforeach
+    </div>
+</footer>

resources/core-overwrites/layouts/checkout/header.blade.php

@@ -0,0 +1,16 @@
+<div class="bg-inactive-100 text-ct-inactive relative py-3 text-xs font-semibold">
+    <slider reference="header-usp-slider" autoplay loop>
+        <div
+            ref="header-usp-slider"
+            class="scrollbar-hide flex snap-x snap-mandatory items-center gap-7 overflow-x-auto lg:justify-center"
+            slot-scope="{ navigate, currentSlide, slidesTotal }"
+        >
+            @foreach (['Wide range of products', 'Free returns', 'All items shown are in stock', 'Free shipping'] as $usp)
+                <div class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-full">
+                    <x-heroicon-o-check class="size-4 text-ct-enhanced stroke-2" />
+                    <span>{{ $usp }}</span>
+                </div>
+            @endforeach
+        </div>
+    </slider>
+</div>

resources/views/cart/cart.blade.php

@@ -1,5 +1,3 @@
-@include('rapidez-ct::cart.partials.cart-title')
-
 <x-rapidez-ct::sections>
     @include('rapidez-ct::cart.partials.products')
 </x-rapidez-ct::sections>

resources/views/cart/content.blade.php

@@ -1,4 +1,6 @@
-<x-rapidez-ct::layout class="mt-4 sm:mt-12">
+@include('rapidez-ct::cart.partials.cart-title')
+
+<x-rapidez-ct::layout class="mt-5">
     @include('rapidez-ct::cart.cart')
     <x-slot:sidebar>
         @include('rapidez-ct::cart.partials.sidebar.sidebar')

resources/views/cart/partials/product/image.blade.php

@@ -4,7 +4,7 @@
         v-bind:class="{'opacity-20' : !item.is_available}"
         class="object-contain"
         :alt="item.product.name"
-        :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'"
-    >
+        :src="resizedPath(item.product.image.url + '.webp', '200')"
+    />
     <x-rapidez::no-image v-else />
 </td>

resources/views/cart/partials/sidebar/summary.blade.php

@@ -29,17 +29,12 @@
             <dd>@{{ cart.prices.grand_total.value | price }}</dd>
         </div>
     </x-rapidez-ct::separated-listing>
-    <div class="w-full" :class="{ 'cursor-not-allowed': !canOrder }">
-        <x-rapidez-ct::button.enhanced 
-            :href="route('checkout')" 
-            class="flex w-full items-center justify-center gap-1 mt-6" 
-            v-bind:class="{ 'pointer-events-none': !canOrder }"
-            dusk="checkout"
-        >
-            @lang('To checkout')
-            <x-heroicon-o-arrow-right class="h-4" />
-        </x-rapidez-ct::button.enhanced>
-    </div>
+
+    <x-rapidez-ct::button.enhanced :href="route('checkout')" class="flex w-full items-center justify-center gap-1 mt-6" dusk="checkout">
+        @lang('To checkout')
+        <x-heroicon-o-arrow-right class="h-4" />
+    </x-rapidez-ct::button.enhanced>
+
     <div class="mt-4 flex items-center justify-center gap-1 text-center text-sm">
         <x-heroicon-o-check class="h-5 text-ct-accent" stroke-width="2.5" />
         @lang('Ordered within 2 minutes')

resources/views/checkout/pages/credentials.blade.php

@@ -6,11 +6,17 @@
 
 @section('content')
     <div class="container">
-        <x-rapidez-ct::layout class="mt-4 sm:mt-12">
+        <x-rapidez-ct::layout class="lg:items-end">
             <x-rapidez-ct::title-progress-bar :href="route('cart')" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Credentials')
             </x-rapidez-ct::title-progress-bar>
-
+            <x-slot:sidebar>
+                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain max-lg:hidden">
+                    <x-rapidez-ct::logo />
+                </a>
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
+        <x-rapidez-ct::layout class="mt-5">
             <form
                 class="contents"
                 v-on:submit.prevent="(e) => {

resources/views/checkout/pages/payment.blade.php

@@ -6,10 +6,17 @@
 
 @section('content')
     <div class="container">
-        <x-rapidez-ct::layout class="mt-4 sm:mt-12">
+        <x-rapidez-ct::layout class="lg:items-end">
             <x-rapidez-ct::title-progress-bar :href="route('checkout', ['step' => 'credentials'])" :$checkoutSteps :$currentStep :$currentStepKey>
                 @lang('Payment')
             </x-rapidez-ct::title-progress-bar>
+            <x-slot:sidebar>
+                <a href="{{ url('/') }}" class="*:h-auto *:max-h-20 *:w-full *:object-contain max-lg:hidden">
+                    <x-rapidez-ct::logo />
+                </a>
+            </x-slot:sidebar>
+        </x-rapidez-ct::layout>
+        <x-rapidez-ct::layout class="mt-5">
             <form
                 class="contents"
                 v-on:submit.prevent="(e) => {

resources/views/checkout/partials/sections/login/logged-out.blade.php

@@ -16,21 +16,12 @@ class="justify-center"
         </p>
 
         <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
-            <div class="relative">
-                <x-rapidez-ct::input.password
-                    label="Password"
-                    name="password"
-                    v-model="checkoutLogin.password"
-                    required
-                />
-                <input
-                    type="checkbox"
-                    v-if="!checkoutLogin.createAccount"
-                    oninvalid="this.setCustomValidity('{{ __('Please log in') }}')"
-                    class="absolute h-full inset-0 opacity-0 pointer-events-none"
-                    required
-                />
-            </div>
+            <x-rapidez-ct::input.password
+                label="Password"
+                name="password"
+                v-model="checkoutLogin.password"
+                required
+            />
         </template>
         <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
             @lang('You already have an account with this e-mail address. Please log in to continue.')

resources/views/checkout/partials/sections/payment.blade.php

@@ -11,7 +11,7 @@
     mutate-event="setPaymentMethodOnCart"
     v-slot="{ mutate, variables }"
 >
-    <div partial-submit="mutate">
+    <div partial-submit="mutate" class="flex flex-col gap-4">
         <div v-for="(method, index) in cart.available_payment_methods">
             @include('rapidez-ct::checkout.partials.sections.payment.payment-methods')
         </div>

resources/views/checkout/partials/sidebar/summary.blade.php

@@ -1,6 +1,3 @@
-<a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-lg:hidden *:h-auto *:max-h-20 *:w-full *:object-contain">
-    <x-rapidez-ct::logo />
-</a>
 <x-rapidez-ct::title.lg class="mb-4">
     @lang('Order overview')
 </x-rapidez-ct::title.lg>

resources/views/components/button/base.blade.php

@@ -1,6 +1,12 @@
 @props(['loader' => false, 'tag'])
-<x-tag
-    is="{{ $tag ?? ($attributes->has('href') || $attributes->has('v-bind:href') ? 'a' : 'button') }}"
+
+@php
+    $tag = $attributes->hasAny('href', ':href', 'v-bind:href') ? 'a' : 'button';
+    $tag = $attributes->has('for') ? 'label' : $tag;
+@endphp
+
+<x-rapidez::tag
+    :is="$tag"
     {{ $attributes->class([
         'relative inline-block self-start text-center text-sm transition cursor-pointer',
         'disabled:cursor-not-allowed disabled:opacity-70',
@@ -15,4 +21,4 @@
     <span class="contents" @attributes([':class' => $loader ? '{ "invisible": $root.loading }' : false])>
         {{ $slot }}
     </span>
-</x-tag>
+</x-rapidez::tag>

resources/views/components/button/link.blade.php

@@ -1,7 +1,7 @@
 @props(['tag'])
-<x-tag
+<x-rapidez::tag
     is="{{ $tag ?? ($attributes->has('href') || $attributes->has('v-bind:href') ? 'a' : 'button') }}"
     {{ $attributes->merge(['class' => 'underline text-ct-inactive text-right disabled:no-underline disabled:cursor-not-allowed disabled:opacity-50']) }}
 >
     {{ $slot }}
-</x-tag>
+</x-rapidez::tag>

resources/views/components/card/address.blade.php

@@ -3,12 +3,13 @@
 @php
     $attributes = $attributes->merge([
         'v-bind:disabled' => var_export($disabled, true),
-        'v-bind:check' => var_export($check, true),
     ]);
 @endphp
+
 <x-rapidez-ct::card.white
     {{ $attributes->only('v-if') }}
     v-bind:class="{!! $attributes['v-bind:disabled'] !!} ? '!bg-ct-disabled !text-ct-inactive' : ''"
+    :$check
 >
     <x-rapidez-ct::address :$attributes :$customTitle>
         {{ $slot }}

resources/views/components/dashboard/item/index.blade.php

@@ -1,5 +1,5 @@
 @props(['item' => [], 'key' => ''])
-<x-tag {{ $attributes->merge([
+<x-rapidez::tag {{ $attributes->merge([
     'class' => 'flex flex-wrap items-center gap-x-6 rounded border bg-white px-8 py-4 text-left',
     'href' => $item['href'] ?? '',
     'is' => isset($item['href']) ? 'a' : 'button',
@@ -27,4 +27,4 @@
         @endif
     </div>
     <x-heroicon-o-chevron-right class="ml-auto h-4" />
-</x-tag>
+</x-rapidez::tag>

resources/views/components/dashboard/sidebar-item/index.blade.php

@@ -1,5 +1,5 @@
 @props(['item' => [], 'key' => ''])
-<x-tag {{ $attributes->merge([
+<x-rapidez::tag {{ $attributes->merge([
     'class' => 'flex-1 text-left',
     'is' => isset($item['href']) ? 'a' : 'button',
     'href' => $item['href'] ?? '',
@@ -13,4 +13,4 @@
         </graphql>
     @endif
     <x-heroicon-o-chevron-right class="h-4" />
-</x-tag>
+</x-rapidez::tag>

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

@@ -1,4 +1,4 @@
-<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-lg:flex-col') }}>
+<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-8 text-sm max-lg:flex-col') }}>
     <div class="flex-1">
         {{ $slot }}
     </div>

resources/views/components/layout/sidebar.blade.php

@@ -1,3 +1,3 @@
-<div {{ $attributes->class('mt-10 space-y-5 lg:mt-[52px] lg:w-[340px] xl:w-[370px]') }}>
+<div {{ $attributes->class('space-y-5 lg:w-[340px] xl:w-[370px]') }}>
     {{ $slot }}
 </div>

resources/views/components/logo.blade.php

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 300 300"><g clip-path="url(#a)"><path fill="url(#b)" d="M93.5999 61.9497H112.65c7.05 0 12.75 5.7 12.75 12.75s-5.7 12.75-12.75 12.75H93.5999c-7.0501 0-12.75-5.7-12.75-12.75s5.85-12.75 12.75-12.75Z"/><path fill="url(#c)" d="M46.05 162.6h60.3c7.05 0 12.75 5.7 12.75 12.75s-5.7 12.75-12.75 12.75h-60.3c-7.05 0-12.75-5.7-12.75-12.75 0-7.35 5.7-12.75 12.75-12.75Z"/><path fill="url(#d)" fill-opacity=".95" d="M244.5 61.9497h-93.75c-7.05 0-12.75 5.7-12.75 12.75 0 6 4.5 11.1 10.2 12.45h20.85c5.7 1.2 10.2 6.3 10.2 12.45 0 7.0503-5.7 12.7503-12.75 12.7503H84.75c-5.7 1.2-10.2 6.3-10.2 12.45 0 6.15 4.5 11.1 10.2 12.45h88.35c7.05 0 12.75 5.7 12.75 12.75s-5.7 12.75-12.75 12.75h-31.2c-5.7 1.2-10.2 6.3-10.2 12.45 0 6.15 4.5 11.1 10.2 12.45h12c.9 0 1.65 0 2.55.3.3 0 .3 0 .6.3.6 0 .9.3 1.65.3.3 0 .6.3.9.3.3.3.9.3 1.2.6.3.3.6.3.9.6l.9.9.6.6.9.9c.3.3.3.6.6.9.3.3.3.9.6 1.2 0 .3.3.6.3.9.3.6.3.9.3 1.65 0 .3 0 .6.3.6 0 .6.3 1.65.3 2.55 0 7.05-5.7 12.75-12.75 12.75H33.3c-.9 0-1.65 0-2.55-.3h-16.5c-7.05 0-12.75 5.7-12.75 12.75s5.7 12.75 12.75 12.75H184.2l11.7-66.45h10.2l24.75 66.45h48.3l-28.2-70.2c28.65-7.95 44.55-28.95 48.3-50.85 5.7-30.4502-11.55-55.2002-54.75-55.2003ZM255.3 119.1c-2.55 13.65-11.4 22.2-27.6 22.2H201l7.65-44.1003 26.7.0001c16.5 0 22.5 8.5502 19.95 21.9002Z"/></g><defs><linearGradient id="b" x1="103.158" x2="103.158" y1="61.9119" y2="87.3267" gradientUnits="userSpaceOnUse"><stop stop-color="#27AE60"/><stop offset="1" stop-color="#34CDB1"/></linearGradient><linearGradient id="c" x1="76.1552" x2="76.1552" y1="162.618" y2="188.032" gradientUnits="userSpaceOnUse"><stop stop-color="#27AE60"/><stop offset="1" stop-color="#34CDB1"/></linearGradient><linearGradient id="d" x1="150.867" x2="150.867" y1="61.9119" y2="237.907" gradientUnits="userSpaceOnUse"><stop stop-color="#202F60"/><stop offset="1" stop-color="#205060"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h300v300H0z"/></clipPath></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 300 300"><path fill="#2EBA86" d="M93.6 61.95h19.05c7.05 0 12.75 5.7 12.75 12.75s-5.7 12.75-12.75 12.75H93.6c-7.05 0-12.75-5.7-12.75-12.75S86.7 61.95 93.6 61.95ZM46.05 162.6h60.3c7.05 0 12.75 5.7 12.75 12.75s-5.7 12.75-12.75 12.75h-60.3c-7.05 0-12.75-5.7-12.75-12.75 0-7.35 5.7-12.75 12.75-12.75Z"/><path fill="#203F60" fill-opacity=".95" d="M244.5 61.95h-93.75c-7.05 0-12.75 5.7-12.75 12.75 0 6 4.5 11.1 10.2 12.45h20.85c5.7 1.2 10.2 6.3 10.2 12.45 0 7.05-5.7 12.75-12.75 12.75H84.75c-5.7 1.2-10.2 6.3-10.2 12.45 0 6.15 4.5 11.1 10.2 12.45h88.35c7.05 0 12.75 5.7 12.75 12.75s-5.7 12.75-12.75 12.75h-31.2c-5.7 1.2-10.2 6.3-10.2 12.45 0 6.15 4.5 11.1 10.2 12.45h12c.9 0 1.65 0 2.55.3.3 0 .3 0 .6.3.6 0 .9.3 1.65.3.3 0 .6.3.9.3.3.3.9.3 1.2.6.3.3.6.3.9.6l.9.9.6.6.9.9c.3.3.3.6.6.9.3.3.3.9.6 1.2 0 .3.3.6.3.9.3.6.3.9.3 1.65 0 .3 0 .6.3.6 0 .6.3 1.65.3 2.55 0 7.05-5.7 12.75-12.75 12.75H33.3c-.9 0-1.65 0-2.55-.3h-16.5c-7.05 0-12.75 5.7-12.75 12.75s5.7 12.75 12.75 12.75H184.2l11.7-66.45h10.2l24.75 66.45h48.3l-28.2-70.2c28.65-7.95 44.55-28.95 48.3-50.85 5.7-30.45-11.55-55.2-54.75-55.2Zm10.8 57.15c-2.55 13.65-11.4 22.2-27.6 22.2H201l7.65-44.1h26.7c16.5 0 22.5 8.55 19.95 21.9Z"/></svg>

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

@@ -1,3 +1,3 @@
-<div {{ $attributes->class('space-y-0.5 mt-5 mb-6') }}>
+<div {{ $attributes->class('space-y-0.5 mb-6') }}>
     {{ $slot }}
 </div>

resources/views/components/separated-listing/index.blade.php

@@ -1,4 +1,4 @@
 @props(['tag' => 'ul'])
-<x-tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm mt-1 divide-y [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0 [&>*]:flex [&>*]:flex-wrap [&>*]:justify-between') }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm mt-1 divide-y [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0 [&>*]:flex [&>*]:flex-wrap [&>*]:justify-between') }}>
     {{ $slot }}
-</x-tag>
+</x-rapidez::tag>

resources/views/components/title-progress-bar.blade.php

@@ -1,7 +1,20 @@
 @aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
-<div class="flex flex-wrap gap-1 items-baseline justify-between">
-    <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
-        {{ $slot }}
-    </x-rapidez-ct::title>
+@php($isAnchor = $attributes->filter(null)->hasAny('href', ':href', 'v-bind:href'))
+<div class="flex flex-wrap items-end justify-between gap-1">
+    <div class="flex gap-5 max-lg:flex-col lg:-translate-x-10">
+        <div class="flex items-center gap-5 lg:items-center">
+            @if ($isAnchor)
+                <a href="{{ $attributes->get('href', ':href', 'v-bind:href') }}" class="max-lg:size-14 max-lg:flex max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:border">
+                    <x-heroicon-o-arrow-left class="text-ct-primary size-5" />
+                </a>
+            @endif
+            <a href="{{ url('/') }}" class="*:h-auto *:max-h-16 *:w-full *:object-contain lg:hidden">
+                <x-rapidez-ct::logo />
+            </a>
+        </div>
+        <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
+            {{ $slot }}
+        </x-rapidez-ct::title>
+    </div>
     <x-rapidez-ct::progress-bar />
 </div>

resources/views/components/title/base.blade.php

@@ -1,7 +1,3 @@
-@props(['tag' => ($isAnchor = $attributes->filter(null)->hasAny('href', ':href', 'v-bind:href')) ? 'a' : 'p'])
-<x-tag is="{{ $tag }}" {{ $attributes->class('font-medium relative group') }}>
-    @if ($isAnchor)
-        <x-heroicon-o-arrow-left class="xl:absolute max-xl:mb-5 left-0 top-1/2 h-4 xl:-translate-x-full xl:-translate-y-1/2 xl:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
-    @endif
+<div {{ $attributes->class('font-medium relative group') }}>
     {{ $slot }}
-</x-tag>
+</div>