Merge branch 'develop' into 4.3

craftcms · Jul 3, 2023 · 415f206 · 415f206
2 parents 6ff1c11 + 4b315f6
commit 415f206
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 95 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - Fixed a bug where address changes weren’t being synced to carts using them as a source. ([#3178](https://github.com/craftcms/commerce/issues/3178))
 - Added `craft\commerce\services\Orders::afterSaveAddressHandler()`.
 - Added `craft\commerce\elements\Order::$orderCompletedEmail`. ([#3138](https://github.com/craftcms/commerce/issues/3138))
+- Added the `commerce/cart/forget-cart` action. ([#3206](https://github.com/craftcms/commerce/issues/3206))
 
 ## 4.2.11 - 2023-06-05
 

diff --git a/example-templates/dist/shop/_private/layouts/includes/nav-main.twig b/example-templates/dist/shop/_private/layouts/includes/nav-main.twig
@@ -36,8 +36,8 @@ Outputs the site’s global main navigation based on path and included `pages` a
         <div class="absolute right-2 top-0">
           {% if currentUser %}
             <a href="{{ url('shop/customer') }}"
-               class="mx-2 px-2 py-1 rounded text-sm font-semibold">
-              {{- currentUser.email -}}
+               class="relative text-lg cursor-pointer inline-block mx-4 my-5 px-2 py-1 bg-white rounded-lg hover:shadow">
+                👤&nbsp;My Account
             </a>
           {% else %}
             <a href="{{ url('shop/customer/sign-in') }}"
@@ -47,12 +47,15 @@ Outputs the site’s global main navigation based on path and included `pages` a
           {% endif %}
           <a href="{{ url('shop/cart') }}"
              class="relative text-lg cursor-pointer inline-block mx-4 my-5 px-2 py-1 bg-white rounded-lg hover:shadow">
-            {% if cart.totalQty %}
               <span class="absolute -mr-3 -mt-3 right-0 top-0 py-1 px-2 rounded-full text-white text-xs bg-blue-800">
-                {{- cart.totalQty -}}
+                {% if cart.totalQty %}
+                  {{- cart.totalQty -}}
+                {% else %}
+                  Empty
+                {% endif %}
               </span>
-            {% endif %}
-            <p role="img" aria-label="{{ 'Shopping Cart'|t }}">🛒</p>
+
+            <span aria-label="{{ 'View Cart'|t }}">🛒 Cart</span>
           </a>
         </div>
       </nav>

diff --git a/example-templates/dist/shop/checkout/payment.twig b/example-templates/dist/shop/checkout/payment.twig
@@ -73,25 +73,24 @@
                 {% set params = { currency: cart.paymentCurrency } %}
               {% endif %}
 
-              {# Special params for Stripe Elements and Checkout#}
-              {# see https://stripe.com/docs/elements/appearance-api #}
               {% if className(cart.gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
                 {% set params = {
                   paymentFormType: 'elements',
                   appearance: {
                     theme: 'stripe'
                   },
-                  layout: {
-                    type: 'tabs',
-                    defaultCollapsed: false,
-                    radios: false,
-                    spacedAccordionItems: false
+                  elementOptions: {
+                    layout: {
+                      type: 'accordion',
+                      defaultCollapsed: false,
+                      radios: false,
+                      spacedAccordionItems: false
+                    }
                   },
-                  'submitButtonClasses': 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white my-2',
-                  'submitButtonLabel': 'Pay',
-                  'errorMessageClasses': 'bg-red-200 text-red-600 my-2 p-2 rounded',
+                  submitButtonClasses: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white my-2',
+                  submitButtonLabel: 'Pay',
+                  errorMessageClasses: 'bg-red-200 text-red-600 my-2 p-2 rounded',
                 } %}
-                {% dump params %}
               {% endif %}
               <div class="gateway-payment-form max-w-3/4">
                 {% namespace cart.gateway.handle|commercePaymentFormNamespace %}
@@ -131,7 +130,7 @@
 
             {{ include('shop/checkout/_includes/partial-payment') }}
 
-            {% if cart.gateway.showPaymentFormSubmitButton() %}
+            {% if cart.paymentSourceId or cart.gateway.showPaymentFormSubmitButton() %}
               <div class="mt-3 text-right">
                 {{ tag('button', {
                   type: 'submit',

diff --git a/example-templates/dist/shop/customer/cards.twig b/example-templates/dist/shop/customer/cards.twig
@@ -14,13 +14,18 @@
   </h1>
 
 {% for gateway in gateways %}
+  <div>
+    {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
+      <a class="my-2 text-blue-500 hover:text-blue-600" href="{{ gateway.billingPortalUrl(currentUser) }}">Manage cards on Stripe Billing portal &rarr;</a>
+    {% endif %}
+  </div>
     <div class="mt-3 flex flex-wrap -mx-2">
       {% set gatewayPaymentSources = craft.commerce.paymentSources.getAllPaymentSourcesByCustomerId(currentUser.id, gateway.id) %}
       {% for paymentSource in gatewayPaymentSources %}
             <div class="w-full mt-3 md:w-1/2 lg:w-1/3 px-2">
               <div class="card bg-gray-100 border-blue-300 border-b-2 p-6">
                 <div class="my-3">
-                  <strong>{{ paymentSource.description }} {% if paymentSource.id == currentUser.primaryPaymentSourceId %}({{ 'Primary'|t }}){% endif %}</strong>
+                  <strong>{{ paymentSource.description }} {% if paymentSource.id == currentUser.primaryPaymentSourceId %}<span class="text-red-500">{{ 'Primary'|t }}</span>{% endif %}</strong>
                   {% if paymentSource.gateway %}
                     <div class="text-sm text-grey-dark">{{ paymentSource.gateway.name }} ({{ paymentSource.token }})</div>
                   {% endif %}
@@ -106,30 +111,33 @@
             {{ hiddenInput('cancelUrl', '/shop/customer/cards'|hash) }}
             {{ redirectInput('/shop/customer/cards') }}
 
-            <div class="gateway-payment-form max-w-3/4">
-              {{ gateway.getPaymentFormHtml({})|raw }}
-            </div>
-
-
-
-            {# Force in some basic styling for the gateway-provided form markup (better to build your own form markup!) #}
-            <style>
-            .gateway-payment-form input { padding: 0.5rem 1rem; width: 100%; margin-bottom: 1rem; line-height: 1.25; border: 1px solid rgba(209,213,219); border-radius: 0.25rem; }
-            .gateway-payment-form input:hover { border: 1px solid rgba(107,114,128); }
-            {# Column containers #}
-            .gateway-payment-form .grid,
-            .gateway-payment-form .card-data div div:nth-child(2) { display: flex; margin-right: -0.75rem; margin-left: -0.75rem; }
-            {# Columns #}
-            .gateway-payment-form .grid .item,
-            .gateway-payment-form input.card-expiry,
-            .gateway-payment-form input.card-cvc { width: 50%; margin-right: 0.75rem; margin-left: 0.75rem; }
-            </style>
+            {% set params = {} %}
+
+            {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
+              {% set params = {
+                paymentFormType: 'elements',
+                appearance: {
+                  theme: 'stripe'
+                },
+                elementOptions: {
+                  layout: {
+                    type: 'accordion',
+                    defaultCollapsed: false,
+                    radios: false,
+                    spacedAccordionItems: false
+                  }
+                },
+                submitButtonClasses: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white my-2',
+                submitButtonText: 'Create',
+                errorMessageClasses: 'bg-red-200 text-red-600 my-2 p-2 rounded',
+              } %}
+            {% endif %}
 
             <div>
               {{ input('text', 'description', '', {
                 maxlength: 70,
                 autocomplete: 'off',
-                placeholder: 'Card description'|t,
+                placeholder: 'Payment source description'|t,
                 class: ['w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
               }) }}
             </div>
@@ -140,13 +148,21 @@
               </label>
             </div>
 
-            <div class="mt-4 text-right">
-              {{ tag('button', {
-                type: 'submit',
-                class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
-                text: 'Add card'|t
-              }) }}
+            <div class="gateway-payment-form max-w-3/4">
+              {% namespace gateway.handle|commercePaymentFormNamespace %}
+                {{ gateway.getPaymentFormHtml(params)|raw }}
+              {% endnamespace %}
             </div>
+
+            {% if gateway.showPaymentFormSubmitButton() %}
+              <div class="mt-4 text-right">
+                {{ tag('button', {
+                  type: 'submit',
+                  class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
+                  text: 'Add card'|t
+                }) }}
+              </div>
+            {% endif %}
           </form>
         </div>
         {% endif %}

diff --git a/example-templates/src/shop/_private/layouts/includes/nav-main.twig b/example-templates/src/shop/_private/layouts/includes/nav-main.twig
@@ -36,8 +36,8 @@ Outputs the site’s global main navigation based on path and included `pages` a
         <div class="absolute right-2 top-0">
           {% if currentUser %}
             <a href="{{ url('[[folderName]]/customer') }}"
-               class="mx-2 px-2 py-1 rounded text-sm font-semibold">
-              {{- currentUser.email -}}
+               class="relative text-lg cursor-pointer inline-block mx-4 my-5 px-2 py-1 bg-white rounded-lg hover:shadow">
+                👤&nbsp;My Account
             </a>
           {% else %}
             <a href="{{ url('[[folderName]]/customer/sign-in') }}"
@@ -47,12 +47,15 @@ Outputs the site’s global main navigation based on path and included `pages` a
           {% endif %}
           <a href="{{ url('[[folderName]]/cart') }}"
              class="relative text-lg cursor-pointer inline-block mx-4 my-5 px-2 py-1 bg-white rounded-lg hover:shadow">
-            {% if cart.totalQty %}
               <span class="absolute -mr-3 -mt-3 right-0 top-0 py-1 px-2 rounded-full text-white text-xs bg-[[color]]-800">
-                {{- cart.totalQty -}}
+                {% if cart.totalQty %}
+                  {{- cart.totalQty -}}
+                {% else %}
+                  Empty
+                {% endif %}
               </span>
-            {% endif %}
-            <p role="img" aria-label="{{ 'Shopping Cart'|t }}">🛒</p>
+
+            <span aria-label="{{ 'View Cart'|t }}">🛒 Cart</span>
           </a>
         </div>
       </nav>

diff --git a/example-templates/src/shop/checkout/payment.twig b/example-templates/src/shop/checkout/payment.twig
@@ -73,25 +73,24 @@
                 {% set params = { currency: cart.paymentCurrency } %}
               {% endif %}
 
-              {# Special params for Stripe Elements and Checkout#}
-              {# see https://stripe.com/docs/elements/appearance-api #}
               {% if className(cart.gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
                 {% set params = {
                   paymentFormType: 'elements',
                   appearance: {
                     theme: 'stripe'
                   },
-                  layout: {
-                    type: 'tabs',
-                    defaultCollapsed: false,
-                    radios: false,
-                    spacedAccordionItems: false
+                  elementOptions: {
+                    layout: {
+                      type: 'accordion',
+                      defaultCollapsed: false,
+                      radios: false,
+                      spacedAccordionItems: false
+                    }
                   },
-                  'submitButtonClasses': '[[classes.btn.base]] [[classes.btn.mainColor]] my-2',
-                  'submitButtonLabel': 'Pay',
-                  'errorMessageClasses': 'bg-red-200 text-red-600 my-2 p-2 rounded',
+                  submitButtonClasses: '[[classes.btn.base]] [[classes.btn.mainColor]] my-2',
+                  submitButtonLabel: 'Pay',
+                  errorMessageClasses: 'bg-red-200 text-red-600 my-2 p-2 rounded',
                 } %}
-                {% dump params %}
               {% endif %}
               <div class="gateway-payment-form max-w-3/4">
                 {% namespace cart.gateway.handle|commercePaymentFormNamespace %}
@@ -131,7 +130,7 @@
 
             {{ include('[[folderName]]/checkout/_includes/partial-payment') }}
 
-            {% if cart.gateway.showPaymentFormSubmitButton() %}
+            {% if cart.paymentSourceId or cart.gateway.showPaymentFormSubmitButton() %}
               <div class="mt-3 text-right">
                 {{ tag('button', {
                   type: 'submit',

diff --git a/example-templates/src/shop/customer/cards.twig b/example-templates/src/shop/customer/cards.twig
@@ -14,13 +14,18 @@
   </h1>
 
 {% for gateway in gateways %}
+  <div>
+    {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
+      <a class="my-2 [[classes.a]]" href="{{ gateway.billingPortalUrl(currentUser) }}">Manage cards on Stripe Billing portal &rarr;</a>
+    {% endif %}
+  </div>
     <div class="mt-3 flex flex-wrap -mx-2">
       {% set gatewayPaymentSources = craft.commerce.paymentSources.getAllPaymentSourcesByCustomerId(currentUser.id, gateway.id) %}
       {% for paymentSource in gatewayPaymentSources %}
             <div class="w-full mt-3 md:w-1/2 lg:w-1/3 px-2">
               <div class="card [[classes.box.base]]">
                 <div class="my-3">
-                  <strong>{{ paymentSource.description }} {% if paymentSource.id == currentUser.primaryPaymentSourceId %}({{ 'Primary'|t }}){% endif %}</strong>
+                  <strong>{{ paymentSource.description }} {% if paymentSource.id == currentUser.primaryPaymentSourceId %}<span class="[[classes.text.dangerColor]]">{{ 'Primary'|t }}</span>{% endif %}</strong>
                   {% if paymentSource.gateway %}
                     <div class="text-sm text-grey-dark">{{ paymentSource.gateway.name }} ({{ paymentSource.token }})</div>
                   {% endif %}
@@ -106,30 +111,33 @@
             {{ hiddenInput('cancelUrl', '/[[folderName]]/customer/cards'|hash) }}
             {{ redirectInput('/[[folderName]]/customer/cards') }}
 
-            <div class="gateway-payment-form max-w-3/4">
-              {{ gateway.getPaymentFormHtml({})|raw }}
-            </div>
-
-
-
-            {# Force in some basic styling for the gateway-provided form markup (better to build your own form markup!) #}
-            <style>
-            .gateway-payment-form input { padding: 0.5rem 1rem; width: 100%; margin-bottom: 1rem; line-height: 1.25; border: 1px solid rgba(209,213,219); border-radius: 0.25rem; }
-            .gateway-payment-form input:hover { border: 1px solid rgba(107,114,128); }
-            {# Column containers #}
-            .gateway-payment-form .grid,
-            .gateway-payment-form .card-data div div:nth-child(2) { display: flex; margin-right: -0.75rem; margin-left: -0.75rem; }
-            {# Columns #}
-            .gateway-payment-form .grid .item,
-            .gateway-payment-form input.card-expiry,
-            .gateway-payment-form input.card-cvc { width: 50%; margin-right: 0.75rem; margin-left: 0.75rem; }
-            </style>
+            {% set params = {} %}
+
+            {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
+              {% set params = {
+                paymentFormType: 'elements',
+                appearance: {
+                  theme: 'stripe'
+                },
+                elementOptions: {
+                  layout: {
+                    type: 'accordion',
+                    defaultCollapsed: false,
+                    radios: false,
+                    spacedAccordionItems: false
+                  }
+                },
+                submitButtonClasses: '[[classes.btn.base]] [[classes.btn.mainColor]] my-2',
+                submitButtonText: 'Create',
+                errorMessageClasses: 'bg-red-200 text-red-600 my-2 p-2 rounded',
+              } %}
+            {% endif %}
 
             <div>
               {{ input('text', 'description', '', {
                 maxlength: 70,
                 autocomplete: 'off',
-                placeholder: 'Card description'|t,
+                placeholder: 'Payment source description'|t,
                 class: ['w-full', '[[classes.input]]']
               }) }}
             </div>
@@ -140,13 +148,21 @@
               </label>
             </div>
 
-            <div class="mt-4 text-right">
-              {{ tag('button', {
-                type: 'submit',
-                class: '[[classes.btn.base]] [[classes.btn.mainColor]]',
-                text: 'Add card'|t
-              }) }}
+            <div class="gateway-payment-form max-w-3/4">
+              {% namespace gateway.handle|commercePaymentFormNamespace %}
+                {{ gateway.getPaymentFormHtml(params)|raw }}
+              {% endnamespace %}
             </div>
+
+            {% if gateway.showPaymentFormSubmitButton() %}
+              <div class="mt-4 text-right">
+                {{ tag('button', {
+                  type: 'submit',
+                  class: '[[classes.btn.base]] [[classes.btn.mainColor]]',
+                  text: 'Add card'|t
+                }) }}
+              </div>
+            {% endif %}
           </form>
         </div>
         {% endif %}

diff --git a/src/console/controllers/ExampleTemplatesController.php b/src/console/controllers/ExampleTemplatesController.php
@@ -236,6 +236,8 @@ private function _addCssClassesToReplacementData(): void
         $this->_replacementData = ArrayHelper::merge($this->_replacementData, [
             '[[color]]' => $mainColor,
             '[[dangerColor]]' => $dangerColor,
+            '[[classes.text.color]]' => "text-$mainColor-500",
+            '[[classes.text.dangerColor]]' => "text-$dangerColor-500",
             '[[classes.a]]' => "text-$mainColor-500 hover:text-$mainColor-600",
             '[[classes.input]]' => "border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded",
             '[[classes.box.base]]' => "bg-gray-100 border-$mainColor-300 border-b-2 p-6",

diff --git a/src/controllers/CartController.php b/src/controllers/CartController.php
@@ -277,6 +277,20 @@ public function actionUpdateCart(): ?Response
         return $this->_returnCart();
     }
 
+    /**
+     * @return Response|null
+     * @throws BadRequestHttpException
+     * @throws InvalidConfigException
+     * @since 4.3
+     */
+    public function actionForgetCart(): ?Response
+    {
+        $this->requirePostRequest();
+        Plugin::getInstance()->getCarts()->forgetCart();
+        $this->setSuccessFlash(Craft::t('commerce', 'Cart forgotten.'));
+        return $this->redirectToPostedUrl();
+    }
+
     /**
      * @throws BadRequestHttpException
      * @throws Exception