Merge pull request #1 from magmodules/release/1.1.0

Release/1.1.0
magmodules · Jul 15, 2024 · 3f85d48 · 3f85d48
2 parents f36a461 + e30033e
commit 3f85d48
Show file tree

Hide file tree

Showing 9 changed files with 1,280 additions and 2 deletions.
diff --git a/composer.json b/composer.json
@@ -9,7 +9,7 @@
     "require": {
       "magento/framework": "*",
       "hyva-themes/magento2-compat-module-fallback": "*",
-      "magmodules/magento2-googlereviews": "*"
+      "magmodules/magento2-googlereviews": "~3.0"
     },
     "autoload": {
       "files": [
@@ -19,4 +19,4 @@
         "Magmodules\\HyvaGoogleReviewsSR\\": "src/"
       }
     }
-  }
+  }
diff --git a/src/view/frontend/tailwind/tailwind.config.js b/src/view/frontend/tailwind/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+    purge: {
+        content: [
+            '../templates/**/*.phtml',
+        ]
+    }
+}
diff --git a/src/view/frontend/templates/widget/helper/stars.phtml b/src/view/frontend/templates/widget/helper/stars.phtml
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* @var Magento\Framework\View\Element\Template $block */
+
+$svgSize = $block->hasData('svgSize') ? $block->getData('svgSize') : '20';
+$starColor = $block->hasData('starColor') ? $block->getData('starColor') : '';
+
+$svgSizeStyle = 'width: ' . $svgSize . 'px; height: ' . $svgSize . 'px; ';
+$starColorStyle = $starColor ? 'color: ' . $starColor : '';
+
+$percent = $block->hasData('percent') ? $block->getData('percent') . '%' : '0%';
+?>
+
+<div data-element="box-stars" class="relative inline-flex" title="<?= $percent ?>">
+    <div style="width: <?= $percent; ?>;" 
+         class="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
+
+        <div class="inline-flex text-[#ffad0f]">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle . $starColorStyle; ?>">
+                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle . $starColorStyle; ?>">
+                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle . $starColorStyle; ?>">
+                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle . $starColorStyle; ?>">
+                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle . $starColorStyle; ?>">
+                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+            </svg>
+        </div>
+    </div>
+
+    <div class="inline-flex text-gray-300">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle; ?>">
+            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle; ?>">
+            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle; ?>">
+            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle; ?>">
+            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="<?= $svgSizeStyle; ?>">
+            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd"></path>
+        </svg>
+    </div>
+</div>
diff --git a/src/view/frontend/templates/widget/review/badge.phtml b/src/view/frontend/templates/widget/review/badge.phtml
@@ -0,0 +1,173 @@
+<?php
+/**
+ * Copyright © Magmodules.eu. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* @var \Magmodules\GoogleReviewsSR\Block\Widget\Review\Badge $block */
+
+$uniqId = rand();
+$logoBig = $block->getViewFileUrl('Magmodules_GoogleReviewsSR::images/logo-big.png');
+$logoSmall = $block->getViewFileUrl('Magmodules_GoogleReviewsSR::images/logo-small.png');
+
+$reviewsCount = $block->getReviewsCount();
+$reviewsCurrentRating = $block->getReviewsCurrentRating();
+$reviewsMaxRating = $block->getReviewsMaxRating();
+?>
+
+<div x-data="BadgeWidget_<?= $uniqId ?>">
+    <section data-element="google-badge-widget-<?= $uniqId; ?>" 
+             @click="show = !show"
+             class="inline-grid gap-2 px-3 py-4 bg-white border border-gray-200 shadow rounded-xl
+                    group <?= !$block->showReviewLink() ? 'cursor-default': 'cursor-pointer' ?>">
+
+        <?php if ($block->showLogo() || $block->showStars()): ?>
+            <div data-element="box-summary" 
+                class="flex items-center justify-center gap-7">
+
+                <?php if ($block->showLogo()): ?>
+                    <img src="<?= $block->escapeUrl($logoBig); ?>" width="83" height="28"
+                        alt="<?= $block->escapeHtml(__('Google badge widget')); ?>" />
+                <?php endif; ?>
+
+                <?php if ($block->showStars()): ?>
+                    <?= $block->getLayout()
+                            ->createBlock('Magento\Framework\View\Element\Template')
+                            ->setTemplate('Magmodules_HyvaGoogleReviewsSR::widget/helper/stars.phtml')
+                            ->setData('svgSize', '20')
+                            ->setData('percent', $reviewsCurrentRating / $reviewsMaxRating * 100)
+                            ->toHtml();
+                    ?>
+                <?php endif;?>
+            </div>
+        <?php endif;?>
+
+        <div data-element="box-information" 
+            class="flex gap-5 <?= $block->showReviewLink() ? 'justify-between': 'justify-center' ?>">
+            <div>
+                <b><?= $block->escapeHtml($reviewsCurrentRating); ?></b>
+                <?= $block->escapeHtml(__('based on')); ?>
+                <b>
+                    <?= $block->escapeHtml($reviewsCount); ?> 
+                    <?= $reviewsCount > 1 
+                            ? $block->escapeHtml(__('reviews')) 
+                            : $block->escapeHtml(__('review')); ?>
+                </b>
+            </div>
+
+            <?php if ($block->showReviewLink()): ?>
+                <span data-element="link-icon" 
+                    class="h-5 text-blue-500 transition-colors duration-300 group-hover:text-blue-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                    </svg>
+                </span>
+            <?php endif;?>
+        </div>
+    </section>
+
+    <?php if ($block->showReviewLink()): ?>
+        <div data-element="google-badge-reviews-<?= $uniqId; ?>"
+             class="fixed z-50 w-[90%] duration-300
+             <?= $block->getShowReviews() == 'popup' 
+                ? 'top-1/2 left-1/2 max-w-[480px] max-h-[90vh] transition-opacity 
+                -translate-x-1/2 -translate-y-1/2 [&>div]:max-h-[90vh] [&>div]:rounded-xl' 
+                : 'top-0 right-0 h-screen max-w-[400px] [&>div]:max-h-screen transition-transform' ?>"
+
+              style="display: none;"
+              x-show="show"
+              x-transition:enter="ease-in-out duration-300"
+              x-transition:enter-start="<?= $block->getShowReviews() == 'popup' ? 'opacity-0 invisible' : 'translate-x-[105%]'; ?>"
+              x-transition:enter-end="<?= $block->getShowReviews() == 'popup' ? 'opacity-100 visible' : 'translate-x-0'; ?>"
+              x-transition:leave="ease-in-out duration-300"
+              x-transition:leave-start="<?= $block->getShowReviews() == 'popup' ? 'opacity-100 visible' : 'translate-x-0'; ?>"
+              x-transition:leave-end="<?= $block->getShowReviews() == 'popup' ? 'opacity-0 invisible' : 'translate-x-[105%]'; ?>">
+
+            <div class="grid grid-rows-[auto_1fr] bg-white border border-gray-200">
+                <div data-element="reviews-summary" 
+                    class="relative grid grid-cols-[60px_1fr] gap-4 p-4 border-b border-gray-200">
+
+                    <img src="<?= $block->escapeUrl($logoSmall); ?>" width="60" height="60"
+                        alt="<?= $block->escapeHtml(__('Google badge widget')); ?>" />
+
+                    <div>
+                        <div data-element="reviews-summary-stars" class="-ml-1.5">
+                            <?= $block->getLayout()
+                                ->createBlock('Magento\Framework\View\Element\Template')
+                                ->setTemplate('Magmodules_HyvaGoogleReviewsSR::widget/helper/stars.phtml')
+                                ->setData('svgSize', '28')
+                                ->setData('percent', $reviewsCurrentRating / $reviewsMaxRating * 100)
+                                ->toHtml();
+                            ?>
+                        </div>
+
+                        <div data-element="reviews-summary-text">
+                            <?= $block->escapeHtml(__('Rated with')); ?>
+                            <b class="text-[#ffad0f]"><?= $block->escapeHtml($reviewsCurrentRating); ?></b>
+                            <?= $block->escapeHtml(__('based on')); ?>
+                            <b class="text-[#ffad0f]">
+                                <?= $block->escapeHtml($reviewsCount); ?> 
+                                <?= $reviewsCount > 1 
+                                        ? $block->escapeHtml(__('reviews')) 
+                                        : $block->escapeHtml(__('review')); ?>
+                            </b>
+                        </div>
+                    </div>
+
+                    <span data-element="close" 
+                          @click="show = !show"
+                          class="absolute top-3 right-3 opacity-50 cursor-pointer
+                                transition-opacity hover:opacity-100">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                        </svg>
+                    </span>
+                </div>
+
+                <div data-element="reviews" class="h-full overflow-auto max-h-[calc(100%-10px)]">
+                    <?php foreach ($reviews = $block->getReviews() as $review): ?>
+                        <div data-element="review-item"
+                            class="grid gap-2.5 p-5 border-b border-gray-200 last:border-b-0">
+
+                            <b class="name text-base"><?= $block->escapeHtml($review['name']) ?></b>
+                            <div class="summary flex gap-3 -ml-0.5">
+                                <?= $block->getLayout()
+                                    ->createBlock('Magento\Framework\View\Element\Template')
+                                    ->setTemplate('Magmodules_HyvaGoogleReviewsSR::widget/helper/stars.phtml')
+                                    ->setData('svgSize', '16')
+                                    ->setData('percent', floatval($review['total']) / $reviewsMaxRating * 100)
+                                    ->toHtml();
+                                ?>
+
+                                <span class="opacity-60 text-base"><?= $block->escapeHtml($review['created']) ?></span>
+                            </div>
+                            <div class="comment text-sm leading-6"><?= $block->escapeHtml($review['comment']) ?></div>
+                        </div>
+                    <?php endforeach;?>
+                </div>
+            </div>
+        </div>
+
+        <span data-element="google-badge-overlay-<?= $uniqId; ?>" 
+              @click="show = !show"
+              class="fixed top-0 right-0 bottom-0 left-0 z-40 bg-black/40"
+              style="display: none;"
+              x-show="show"
+              x-transition:enter="ease-in-out duration-300"
+              x-transition:enter-start="opacity-0 invisible"
+              x-transition:enter-end="opacity-100 visible"
+              x-transition:leave="ease-in-out duration-300"
+              x-transition:leave-start="opacity-100 visible"
+              x-transition:leave-end="opacity-0 invisible"></span>
+    <?php endif;?>
+</div>
+
+<script>
+    'use strict';
+
+    function BadgeWidget_<?= $uniqId ?>() {
+        return {
+            show: false,
+        }
+    }
+</script>