Merge pull request #22 from FosterCommerce/fix/coupon-code-validation…

…-messages

Fix/coupon code validation messages

src/templates/_components/app/coupon-code.twig

@@ -1,4 +1,16 @@
-<div v-scope="{ isOpen: false }" class="border-t border-b border-gray-400">
+{% set couponCodeError = cart.getFirstNotice(null, 'couponCode') ?? null  %}
+{% set couponCodeSuccess = craft.app.session.getFlash('success') ?? null %}
+
+{% if couponCodeError %}
+	{% set couponMessage = couponCodeError.message %}
+{% else %}
+	{% set couponMessage = (couponCodeSuccess and cart.couponCode) ? couponCodeSuccess : null %}
+{% endif %}
+
+<div
+	v-scope="{ isOpen: {{ couponMessage ? 'true' : 'false' }} }"
+	class="border-t border-b border-gray-400"
+>
 
 	<button class="flex justify-between items-center w-full py-4" @click="isOpen = !isOpen">
 		<span id="couponCodeLabel" class="font-medium text-gray-500">
@@ -22,10 +34,11 @@
 		aria-describedby="couponCodeDesc"
 		class="pb-6"
 	>
-		<form class="grid grid-cols-[1fr,_90px] gap-4" method="post">
+		<form class="grid grid-cols-[1fr,_90px] items-start gap-4" method="post">
 			{{ csrfInput() }}
 			{{ actionInput('commerce/cart/update-cart') }}
 			{{ hiddenInput('successMessage', 'Coupon code added' | t('Foster Checkout') | hash) }}
+			{{ hiddenInput('clearNotices', 'Yes, please!') }}
 			<p id="couponCodeDesc" class="sr-only">
 				{{ cart.couponCode|default ?
 				('Coupon Code'|t('foster-checkout') ~ ': ' ~ cart.couponCode) :
@@ -38,13 +51,19 @@
 				name: 'couponCode',
 				type: 'text',
 				autocomplete: 'off',
-				placeholder: 'Enter your Coupon Code'|t('foster-checkout'),
+				placeholder: 'Enter Coupon Code'|t('foster-checkout'),
+				errors: couponCodeError ? [couponMessage] : [],
+				success: cart.couponCode and couponMessage ? [couponMessage] : [],
 				value: cart.couponCode,
 				action: 'if (isOpen) $el.focus()'
 			} %}
-			<button type="submit"
-					class="text-white bg-[var(--brandColor)] rounded-xl">{{ 'Submit'|t('foster-checkout') }}</button>
+			<button type="submit" class="h-[48px] text-white bg-[var(--brandColor)] rounded-xl">
+				{{ 'Submit'|t('foster-checkout') }}
+			</button>
 		</form>
 	</div>
 
 </div>
+
+{% do cart.clearNotices(null, 'couponCode') %}
+{% do craft.app.elements.saveElement(cart) %}

src/templates/_components/app/line-item-cart.twig

@@ -25,26 +25,27 @@
 	class="flex justify-start items-stretch gap-5 p-5 bg-gray-200 rounded-xl"
 >
 
-	<div class="w-[80px] min-w-[80px] md:w-[200px]">
-		<figure class="rounded-lg overflow-hidden">
+	<div class="w-[80px] min-w-[80px] md:w-[200px] md:min-w-[200px] flex-grow">
+		<figure class="rounded-lg overflow-hidden min-w-full">
 			<img
 				src="{{ imageUrl ?? 'https://placehold.co/200x200?text=No+Image' }}"
 				srcset="{{ imageUrl ? imageSrcSet : '' }}"
 				sizes="(min-width: 768px) 200px, 80px"
 				width="200"
 				height="200"
+				class="min-w-full"
 				alt="{{ 'Image of'|t('foster-checkout') ~ ' ' ~ lineItem.description }}"
 			/>
 		</figure>
 	</div>
 
-	<div class="flex flex-col justify-between items-stretch gap-10 flex-grow">
+	<div class="flex flex-col justify-between items-stretch gap-10">
 
 		<div class="md:flex md:justify-between md:items-start">
 
-			<div>
+			<div class="md:pr-4">
 				<h3 class="font-semibold">{{ lineItem.description }}</h3>
-				<p class="mt-3 text-sm uppercase text-gray-500">{{ 'SKU'|t('foster-checkout') }}: {{ lineItem.sku }}</p>
+				<p class="mt-3 text-sm uppercase text-gray-500 break-all">{{ 'SKU'|t('foster-checkout') }}: {{ lineItem.sku }}</p>
 				{% if lineItem.purchasable.onPromotion %}
 					<p class="mt-3 text-sm uppercase text-gray-500">
 						<del

src/templates/_components/base/input-select.twig

@@ -1,6 +1,10 @@
 {% set fieldId = id ? ('field_' ~ id) : ('field_' ~ random()) %}
 
-<div v-scope="{ value: '{{ value|default('') }}', errors: {{ errors|default([])|json_encode }} }">
+<div v-scope="{
+	value: '{{ value|default('') }}',
+	errors: {{ errors|default([])|json_encode }},
+	success: {{ success|default([])|json_encode }}
+}">
 	{% if label|default %}
 		<label for="{{ fieldId }}" class="{{ hideLabel|default ? 'sr-only' : 'block mb-2 font-medium text-gray-500' }}">
 			{{ label ~ (required|default(false) ? '*' : '') }}
@@ -11,7 +15,11 @@
 		id="{{ fieldId }}"
 		name="{{ name|default('') }}"
 		class="w-full h-12 px-4 bg-white rounded-xl focus:!ring-0 focus:!outline-none placeholder:text-gray-400 transition-color duration-300"
-		:class="errors.length ? 'border-red-500 focus:border-red-500' : 'border-gray-500 focus:border-black'"
+		:class="{
+			'border-red-500 focus:border-red-500': errors.length,
+			'border-green-500 focus:border-green-500': success.length,
+			'border-gray-500 focus:border-black': !errors.length && !success.length
+		}"
 		:aria-invalid="errors.length > 0"
 		aria-errormessage="{{ fieldId }}-error"
 	>
@@ -22,6 +30,11 @@
 			<option value="{{ option.value }}">{{ option.label }}</option>
 		{% endfor %}
 	</select>
-	<p v-cloak v-if="errors.length" id="{{ fieldId }}-error" class="mt-1 text-sm text-red-500">${errors.join(' ')}</p>
+	<p v-cloak v-if="errors.length" id="{{ fieldId }}-error" class="mt-1 text-sm text-red-500">
+		${ errors.join(' ') }
+	</p>
+	<p v-cloak v-if="success.length" class="mt-1 text-sm text-green-500">
+		${ success.join(' ') }
+	</p>
 </div>
 

src/templates/_components/base/input-text-clearable.twig

@@ -7,7 +7,12 @@
 {% endif %}
 
 <div
-	v-scope="ClearableInput({ name: '{{ name|default('') }}', value: '{{ value|default('') }}', errors: {{ errors|default([])|json_encode }} })">
+	v-scope="ClearableInput({
+		name: '{{ name|default('') }}',
+		value: '{{ value|default('') }}',
+		errors: {{ errors|default([])|json_encode }},
+		success: {{ success|default([])|json_encode }}
+	})">
 
 	{% if label|default %}
 		<label for="{{ fieldId }}" class="{{ hideLabel|default ? 'sr-only' : 'block mb-2 font-medium text-gray-500' }}">
@@ -23,7 +28,11 @@
 			type="{{ type ?? 'text' }}"
 			autocomplete="{{ autocomplete|default('') }}"
 			class="w-full h-12 pl-4 pr-12 bg-white rounded-xl focus:!ring-0 focus:!outline-none placeholder:text-gray-400 transition-color duration-300 js-clearable"
-			:class="errors.length ? 'text-red-500 border-red-500 focus:border-red-500' : 'text-gray-800 border-gray-500 focus:border-black'"
+			:class="{
+				'text-red-500 border-red-500 focus:border-red-500': errors.length,
+				'text-gray-800 border-green-500 focus:border-green-500': success.length,
+				'text-gray-800 border-gray-500 focus:border-black': !errors.length && !success.length
+			}"
 			placeholder="{{ placeholder|default('') }}"
 			:aria-invalid="errors.length ? true : false"
 			aria-errormessage="{{ fieldId }}-error"
@@ -58,4 +67,8 @@
 		${ errors.join(' ') }
 	</p>
 
+	<p v-cloak v-if="success.length" class="mt-1 text-sm text-green-500">
+		${ success.join(' ') }
+	</p>
+
 </div>

src/translations/en/foster-checkout.php

@@ -28,7 +28,7 @@
 	'Coupon Code' => 'Coupon Code',
 	'Coupon added' => 'Coupon added',
 	'Submit a coupon code to get a discount on your order.' => 'Submit a coupon code to get a discount on your order.',
-	'Enter your Coupon Code' => 'Enter your Coupon Code',
+	'Enter Coupon Code' => 'Enter Coupon Code',
 	'Submit' => 'Submit',
 	'Estimated shipping to' => 'Estimated shipping to',
 	'Get estimated shipping' => 'Get estimated shipping',

src/web/assets/checkout/dist/js/app.js

@@ -14,6 +14,7 @@ const ClearableInput = (props) => {
     name: props.name,
     value: props.value,
     errors: props.errors,
+		success: props.success,
     showButton: false,
     input() {
       this.showButton = this.value !== '';