From 21810373383795121965d7a8f44120c1249a3c65 Mon Sep 17 00:00:00 2001
From: Hector Hurtado <hurtado.fernando@gmail.com>
Date: Tue, 23 May 2023 17:29:55 -0500
Subject: [PATCH 1/2] add wishlist toggling functionality

---
 assets/js/theme/wishlist.js                        |  6 ++++++
 assets/scss/components/_components.scss            |  3 ++-
 assets/scss/components/_wishlist-dropdown.scss     | 14 ++++++++++++++
 templates/components/common/wishlist-dropdown.html |  2 +-
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 assets/scss/components/_wishlist-dropdown.scss

diff --git a/assets/js/theme/wishlist.js b/assets/js/theme/wishlist.js
index 06da91cc7..952d3db23 100644
--- a/assets/js/theme/wishlist.js
+++ b/assets/js/theme/wishlist.js
@@ -3,6 +3,7 @@ import PageManager from './page-manager'
 import { wishlistPaginatorHelper } from './common/utils/pagination-utils'
 import { announceInputErrorMessage } from './common/utils/form-utils'
 import q$, { q$$ } from './global/selector'
+import toggle from './custom/toggle'
 
 export default class WishList extends PageManager {
     constructor(context) {
@@ -72,6 +73,11 @@ export default class WishList extends PageManager {
             this.registerAddWishListValidation($addWishListForm)
         }
 
+        const $addWishListDropdownButton = q$('.js-dropdown-menu-button')
+        if ($addWishListDropdownButton !== null) {
+            toggle('.js-dropdown-menu-button', { update: ['this', '#wishlist-dropdown'] })
+        }
+
         this.wishlistDeleteConfirm()
     }
 }
diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss
index a38f7801b..d55ebb25b 100644
--- a/assets/scss/components/_components.scss
+++ b/assets/scss/components/_components.scss
@@ -15,4 +15,5 @@
 @import "category";
 @import "product";
 @import "quick-search";
-@import "quick-search-results";
\ No newline at end of file
+@import "quick-search-results";
+@import "wishlist-dropdown";
diff --git a/assets/scss/components/_wishlist-dropdown.scss b/assets/scss/components/_wishlist-dropdown.scss
new file mode 100644
index 000000000..1cf929e2e
--- /dev/null
+++ b/assets/scss/components/_wishlist-dropdown.scss
@@ -0,0 +1,14 @@
+
+/* ==========================================================================
+   #WISHLIST-DROPDOWN
+   ========================================================================== */
+
+.c-wishlist-dropdown {
+    > ul {
+        display: none;
+
+        &.is-open {
+            display: block;
+        }
+    }
+}
diff --git a/templates/components/common/wishlist-dropdown.html b/templates/components/common/wishlist-dropdown.html
index 09cb12f0f..07cfc5dea 100644
--- a/templates/components/common/wishlist-dropdown.html
+++ b/templates/components/common/wishlist-dropdown.html
@@ -1,4 +1,4 @@
-<form action="{{product.add_to_wishlist_url}}" class="js-wishlist-add" method="post">
+<form action="{{product.add_to_wishlist_url}}" class="js-wishlist-add c-wishlist-dropdown" method="post">
     <a 
         aria-controls="wishlist-dropdown"
         aria-expanded="false"

From 6881433ae4e6ac124783437e15d07c6028953ad9 Mon Sep 17 00:00:00 2001
From: Hector Hurtado <hurtado.fernando@gmail.com>
Date: Wed, 24 May 2023 15:46:02 -0500
Subject: [PATCH 2/2] fix write review functionality

---
 assets/js/theme/custom/toggle.js                   | 14 ++++++++++++++
 assets/js/theme/product.js                         |  4 ++++
 .../components/products/modals/writeReview.html    | 12 ++++++++++--
 templates/components/products/product-view.html    |  7 ++++---
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/assets/js/theme/custom/toggle.js b/assets/js/theme/custom/toggle.js
index e74653569..0c1887623 100644
--- a/assets/js/theme/custom/toggle.js
+++ b/assets/js/theme/custom/toggle.js
@@ -12,6 +12,20 @@ function updateAttributes($element) {
     // If the attribute doesn't exists, it defaults to false which is desirable
     const ariaExpanded = $element.getAttribute('aria-expanded') === 'true'
     $element.setAttribute('aria-expanded', !ariaExpanded)
+
+    /* eslint-disable no-param-reassign */
+    if ('hasUHidden' in $element.dataset) {
+        $element.classList.add('u-hidden')
+        delete $element.dataset.hasUHidden
+
+        return
+    }
+
+    if ($element.classList.contains('u-hidden')) {
+        $element.classList.remove('u-hidden')
+        $element.dataset.hasUHidden = true
+    }
+    /* eslint-enable no-param-reassign */
 }
 
 /**
diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js
index 56676854a..2c67535df 100644
--- a/assets/js/theme/product.js
+++ b/assets/js/theme/product.js
@@ -10,6 +10,7 @@ import { classifyForm } from './common/utils/form-utils'
 import modalFactory from './global/modal'
 import q$, { q$$ } from './global/selector'
 import trigger from './common/utils/trigger'
+import toggle from './custom/toggle'
 
 export default class Product extends PageManager {
     constructor(context) {
@@ -46,6 +47,9 @@ export default class Product extends PageManager {
 
         const review = new Review({ $reviewForm })
 
+        toggle('[data-reveal-id="modal-review-form"]', { update: ['#modal-review-form'] })
+        toggle('#modal-review-form .js-modal-review-close', { update: ['#modal-review-form'] })
+
         q$('[data-reveal-id="modal-review-form"]').addEventListener('click', () => {
             validator = review.registerValidation(this.context)
             this.ariaDescribeReviewInputs($reviewForm)
diff --git a/templates/components/products/modals/writeReview.html b/templates/components/products/modals/writeReview.html
index aeb64c1e4..1af2abd03 100644
--- a/templates/components/products/modals/writeReview.html
+++ b/templates/components/products/modals/writeReview.html
@@ -1,4 +1,4 @@
-<div id="js-modal-review-form" class="js-reveal u-hidden">
+<div id="modal-review-form" class="js-reveal u-hidden">
     {{inject 'reviewRating' (lang 'forms.validate.reviews.rating')}}
     {{inject 'reviewSubject' (lang 'forms.validate.reviews.title')}}
     {{inject 'reviewComment' (lang 'forms.validate.reviews.comment')}}
@@ -7,7 +7,15 @@
         <div class="js-modal-header-title">
             {{lang 'products.reviews.write_a_review'}}
         </div>
-        {{> components/common/modal/modal-close-btn}}
+        <button 
+            class="js-modal-review-close"
+            type="button"
+            title="{{lang 'common.close'}}"
+            {{additional_attr}}
+        >
+            <span class="u-hidden-visually">{{lang 'common.close'}}</span>
+            <span aria-hidden="true">&#215;</span>
+        </button>
     </div>
     <div class="js-modal-body">
         <div>
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
index 8d9697d49..fc076a43e 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -129,10 +129,11 @@ <h1 class="js-product-view-title">
                 {{/if}}
                 {{#if settings.show_product_reviews}}
                     <a 
-                        href="{{product.url}}{{#if is_ajax}}#write_review{{/if}}"
-                        {{#unless is_ajax}}
+                        {{#if is_ajax}}
+                            href="{{product.url}}#write_review"
+                        {{else}}
                             data-reveal-id="modal-review-form"
-                        {{/unless}}
+                        {{/if}}
                         role="button"
                     >
                        {{lang 'products.reviews.new'}}