From b1d6f6463dad315f6d091ebaa1dbf4d8e8e90ec9 Mon Sep 17 00:00:00 2001
From: Grimlink <sean.grimlink@gmail.com>
Date: Thu, 9 Jul 2020 14:40:48 +0200
Subject: [PATCH 1/3] IMP: modal and message output

---
 .../web/js/catalog/add-to-cart-mixin.js       | 128 ++++++++++--------
 1 file changed, 74 insertions(+), 54 deletions(-)

diff --git a/view/frontend/web/js/catalog/add-to-cart-mixin.js b/view/frontend/web/js/catalog/add-to-cart-mixin.js
index 8c09e9c..27aa3c7 100644
--- a/view/frontend/web/js/catalog/add-to-cart-mixin.js
+++ b/view/frontend/web/js/catalog/add-to-cart-mixin.js
@@ -1,11 +1,7 @@
-define([
-    'jquery',
-    'mage/translate',
-    'jquery/ui'
-], function ($) {
-    'use strict';
+define(["jquery", "mage/translate", "jquery/ui"], function ($) {
+    "use strict";
 
-    var config = window['checkout']['add_to_cart_notification'];
+    var config = window["checkout"]["add_to_cart_notification"];
 
     var mixin = {
         /**
@@ -17,46 +13,70 @@ define([
 
             this._super(form);
 
-            self.element.find('.message.error').remove();
-
-            $.when(
-                this.productPromise(productId),
-                this.cartPromise()
-            ).then(function (data) {
-                var product = data[0];
-                var title = $.mage.__('Added To Bag');
-                var message = $.mage.__('You added %1 to your <a href="%2">shopping cart</a>.')
-                    .replace('%1', product['name'])
-                    .replace('%2', product['cart_url']);
-
-                $('body').append(
-                    '<div id="add_to_cart_notification" class="add-to-cart">' +
-                    '<div class="btn-close"></div>' +
-                    '<img class="notification-image" src="' + product['image'] + '" alt="' + product['name'] + '" title="' + product['name'] + '">' +
-                    '<div class="notification-content">' +
-                    '<p class="notification-title">' + title + '</p>' +
-                    '<p class="notification-message">' + message + '</p>' +
-                    '</div>' +
-                    '</div>'
-                );
-
-                $("#add_to_cart_notification").find(".btn-close").click(function () {
-                    self.removeNotification();
-                });
-
-                setTimeout(function () {
-                    self.removeNotification();
-                }, config['notificationLifetime']);
-            }, function (messages) {
-                if (self.element.find('div.mage-error').filter(':visible').length > 0) {
-                    return;
+            self.element.find(".message.error").remove();
+
+            $.when(this.productPromise(productId), this.cartPromise()).then(
+                function (data) {
+                    var product = data[0];
+                    var title = $.mage.__("Added To Bag");
+                    var message = $.mage.__('You added %1 to your <a href="%2">shopping cart</a>.')
+                            .replace("%1", product["name"])
+                            .replace("%2", product["cart_url"]);
+
+                    var modalCloseBtn =
+                        '<button class="action-close"><span>' + $.mage.__("Close") + "</span></button>";
+
+                    // TODO: get width and height from product image xml config
+                    var modalImage =
+                        '<img class="notification-image" src="' +
+                        product["image"] +
+                        '" alt="' +
+                        product["name"] +
+                        '" width="80" height="80">';
+
+                    $("body").append(
+                        '<div id="add_to_cart_notification" role="dialog" class="modal-custom modal-added-to-cart">' +
+                        '<div class="modal-header">' +
+                        modalCloseBtn +
+                        "</div>" +
+                        '<div class="modal-content"><div class="product-image">' +
+                        modalImage +
+                        '</div><div class="product-content">' +
+                        '<div class="block-title">' +
+                        '<strong id="add_to_cart_notification-heading" role="heading" aria-level="2">' +
+                        title +
+                        "</strong></div>" +
+                        '<div class="notification-message">' +
+                        message +
+                        "</div>" +
+                        "</div></div></div>"
+                    );
+
+                    $("#add_to_cart_notification")
+                        .find(".action-close")
+                        .click(function () {
+                            self.removeNotification();
+                        });
+
+                    setTimeout(function () {
+                        self.removeNotification();
+                    }, config["notificationLifetime"]);
+                },
+                function (messages) {
+                    if (self.element.find("div.mage-error").filter(":visible").length > 0) {
+                        return;
+                    }
+
+                    var button = self.element.find("button.tocart");
+                    messages.forEach(function (message) {
+                        button.after(
+                            '<div class="message info message-add-to-cart"><div>' +
+                            message.text +
+                            "</div></div>"
+                        );
+                    });
                 }
-                
-                var button = self.element.find('button.tocart');
-                messages.forEach(function (message) {
-                    button.after('<p class="message error add-to-cart-error">' + message.text + '</p>');
-                });
-            });
+            );
         },
 
         removeNotification: function () {
@@ -67,7 +87,7 @@ define([
 
         productPromise: function (productId) {
             return $.get({
-                url: window['BASE_URL'] + '/cart_notification/data/product/product_id/' + productId,
+                url: window["BASE_URL"] + "/cart_notification/data/product/product_id/" + productId,
                 cache: true
             });
         },
@@ -75,19 +95,19 @@ define([
         cartPromise: function () {
             var dfd = $.Deferred();
 
-            $(document).on('ajaxSuccess', function (event, request, settings) {
-                if (settings.url.indexOf('/checkout/cart/add') === -1) {
+            $(document).on("ajaxSuccess", function (event, request, settings) {
+                if (settings.url.indexOf("/checkout/cart/add") === -1) {
                     return;
                 }
 
                 if (request.responseJSON.error_messages) {
                     dfd.reject(request.responseJSON.error_messages);
-                    $(document).off('ajaxSuccess');
+                    $(document).off("ajaxSuccess");
                     return;
                 }
 
                 dfd.resolve();
-                $(document).off('ajaxSuccess');
+                $(document).off("ajaxSuccess");
             });
 
             return dfd.promise();
@@ -95,12 +115,12 @@ define([
     };
 
     return function (target) {
-        if (!config['enabled']) {
+        if (!config["enabled"]) {
             return target;
         }
 
-        $.widget('mooore.catalogAddToCart', target, mixin);
+        $.widget("mooore.catalogAddToCart", target, mixin);
 
         return $.mooore.catalogAddToCart;
-    }
+    };
 });

From cbe2cc558d5c2077840a660085b5d56aa82f6c19 Mon Sep 17 00:00:00 2001
From: Grimlink <sean.grimlink@gmail.com>
Date: Thu, 9 Jul 2020 14:41:06 +0200
Subject: [PATCH 2/3] IMP: modal added-to style

---
 view/frontend/web/css/source/_module.less | 60 +++++++++++++++--------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less
index 2b4e25c..54dfc06 100644
--- a/view/frontend/web/css/source/_module.less
+++ b/view/frontend/web/css/source/_module.less
@@ -1,32 +1,50 @@
+@modal-added-to-cart-offset: 20px;
+@modal-added-to-cart-max-width: 480px;
+@modal-added-to-cart-padding: (@modal-popup__padding / 2);
+@modal-added-to-cart-bg: @modal__background-color;
+@modal-added-to-cart-color: inherit;
+@modal-added-to-cart-box-shadow: @modal__box-shadow;
+
 & when (@media-common = true) {
-    .add-to-cart {
+    .modal-added-to-cart {
         z-index: 9;
         position: fixed;
         top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: #fff;
+        right: 0;
+        bottom: auto;
+        left: 0;
+        max-width: @modal-added-to-cart-max-width;
+        margin: 0 auto;
+        padding: @modal-added-to-cart-padding;dding;
+        background-color: @modal-added-to-cart-bg;
+        color: @modal-added-to-cart-color;
+        box-shadow: @modal-added-to-cart-box-shadow;
+
+        .modal-content {
+            display: flex;
+            align-items: flex-start;
+            margin-right: @modal-action-close__font-size;
+        }
 
-        @media only screen and (min-width: 480px) {
-            top: 20px;
+        .product-image {
+            flex: 0 0 auto;
+            width: 50px;
+            margin-right: 1em;
         }
+    }
 
-        .btn-close {
-            @size: 10px;
-            position: absolute;
-            top: 15px;
-            right: 15px;
-            padding: 15px;
-            height: @size;
-            width: @size;
-            border-radius: 50%;
-            background: url("../images/icons/close.svg") center/10px no-repeat;
-            transition: background-color 0.2s;
-            cursor: pointer;
+    .message.message-add-to-cart {
+        padding: @message__padding;
 
-            &:hover {
-                background-color: #f2f2f2;
-            }
+        > :first-child::before {
+            content: none;
         }
     }
 }
+
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
+    .modal-added-to-cart {
+        top: @modal-added-to-cart-offset;
+    }
+}
+

From b8fe7030c00e4314d576329eac2d6643fd7aa095 Mon Sep 17 00:00:00 2001
From: Grimlink <sean.grimlink@gmail.com>
Date: Thu, 9 Jul 2020 14:43:35 +0200
Subject: [PATCH 3/3] ADD: scss version

---
 view/frontend/styles/_module.scss | 48 +++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 view/frontend/styles/_module.scss

diff --git a/view/frontend/styles/_module.scss b/view/frontend/styles/_module.scss
new file mode 100644
index 0000000..3a522ee
--- /dev/null
+++ b/view/frontend/styles/_module.scss
@@ -0,0 +1,48 @@
+$modal-added-to-cart-offset: 20px;
+$modal-added-to-cart-max-width: 480px;
+$modal-added-to-cart-padding: ($modal-popup__padding / 2);
+$modal-added-to-cart-bg: $modal__background-color;
+$modal-added-to-cart-color: inherit;
+$modal-added-to-cart-box-shadow: $modal__box-shadow;
+
+.modal-added-to-cart {
+    z-index: 9;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: 0;
+    max-width: $modal-added-to-cart-max-width;
+    margin: 0 auto;
+    padding: $modal-added-to-cart-padding;dding;
+    background-color: $modal-added-to-cart-bg;
+    color: $modal-added-to-cart-color;
+    box-shadow: $modal-added-to-cart-box-shadow;
+
+    .modal-content {
+        display: flex;
+        align-items: flex-start;
+        margin-right: $modal-action-close__font-size;
+    }
+
+    .product-image {
+        flex: 0 0 auto;
+        width: 50px;
+        margin-right: 1em;
+    }
+}
+
+.message.message-add-to-cart {
+    padding: $message__padding;
+
+    > :first-child::before {
+        content: none;
+    }
+}
+
+@include min-screen($screen__m) {
+    .modal-added-to-cart {
+        top: $modal-added-to-cart-offset;
+    }
+}
+