Merge pull request #51 from thelia/feat/checkout

Feat/checkout

.eslintrc.json

@@ -1,8 +1,13 @@
 {
- "root": true,
- "parser": "@babel/eslint-parser",
- "extends": [
-  "react-app",
-  "plugin:storybook/recommended"
- ]
+  "root": true,
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "react-app"
+  ],
+  "rules": {
+    "semi": [
+      2,
+      "always"
+    ]
+  }
 }

.storybook/main.ts

@@ -62,6 +62,7 @@ const config: StorybookConfig = {
       alias: {
         ...config.resolve?.alias,
         '@components': path.resolve(__dirname, '../components'),
+        '@react': path.resolve(__dirname, '../react-components'),
         '@icons': path.resolve(__dirname, '../assets/icons')
       }
     };

assets/app.js

@@ -8,13 +8,11 @@
 // any CSS you import will output into a single css file (app.css in this case)
 import '../components/base.css';
 
-
 import HeaderScript from '../components/Layout/Header/Header.js';
 import MobileDrawer from "./js/mobileDrawer";
 import filterSelectFunction from "../components/Molecules/Filters/FilterSelect/FilterSelect";
-import {quantityButton} from "../components/Molecules/Button/button";
-import {slider} from "./js/slider";
-import ProductGallery from "../components/Layout/ProductGallery/ProductGallery";
+import {quantityButton} from "@components/Molecules/Button/button";
+import {slider} from "@js/slider";
 
 function main() {
   document.body.classList.remove('no-js');
@@ -23,7 +21,6 @@ function main() {
   filterSelectFunction();
   quantityButton();
   slider();
-  ProductGallery();
 }
 
 document.addEventListener('DOMContentLoaded', () => {

assets/js/mobileDrawer.js

@@ -2,6 +2,7 @@ export default function MobileDrawer() {
   const toggleDrawers = document.querySelectorAll('[data-drawer-toggle]');
   const closeDrawers = document.querySelectorAll('[data-drawer-close]');
   const drawers = document.querySelectorAll('.MobileDrawer');
+  const drawerOptions = document.querySelectorAll('.FilterSelect-option');
 
   toggleDrawers.forEach(function (drawer) {
     drawer.addEventListener('click', () => {
@@ -14,7 +15,10 @@ export default function MobileDrawer() {
   });
   closeDrawers.forEach(function (drawer) {
     drawer.addEventListener('click', () => {
+      console.log({drawer});
       const parent = drawer.closest('.MobileDrawer');
+      console.log({parent});
+
       if (!parent) return;
       closeDrawer(parent);
     });
@@ -37,6 +41,14 @@ export default function MobileDrawer() {
       }
     });
   });
+  drawerOptions.forEach(function (option) {
+    option.addEventListener('click', function () {
+      const parentDrawer = option.closest('.MobileDrawer');
+      if (parentDrawer) {
+        closeDrawer(parentDrawer);
+      }
+    });
+  });
 }
 
 function openDrawer(currentDrawer) {
@@ -56,5 +68,7 @@ function toggleOverlay(open) {
     document.body.prepend(div);
     return;
   }
+
+  console.log('close overlays');
   document.querySelector('.MobileDrawer-overlay').remove();
 }

assets/js/routes/checkout.js

@@ -0,0 +1,3 @@
+import Checkout from '@react/Layout/Checkout';
+
+Checkout();

assets/js/routes/product.js

@@ -0,0 +1,5 @@
+import ProductGallery from "@components/Layout/ProductGallery/ProductGallery";
+import PseSelectorRoot from "@react/Layout/PseSelector/PseSelector";
+
+ProductGallery();
+PseSelectorRoot();

assets/js/slider.js

@@ -32,6 +32,7 @@ export function slider() {
     isDown = false;
     slider.classList.remove('active');
   }
+
   function move(e, pageX, slider)
   {
     if (!isDown) return;

changelog-checkout.md

@@ -0,0 +1,3 @@
+# Changelog Checkout
+
+- Reprise de la structure générale de CHR

checkout.html.twig

@@ -0,0 +1,23 @@
+{%  extends 'base.html.twig' %}
+
+{% block title %}
+	Tunnel d'achat
+{% endblock %}
+
+{% block javascripts %}
+	{{ encore_entry_script_tags('checkout') }}
+{% endblock %}
+
+{% block header %}
+	{% include '@components/Layout/Header/HeaderCheckout.twig' %}
+{% endblock %}
+{% block body %}
+	{% set products = resources('/api/front/products', {'productCategories.category.id':1, itemsPerPage:3}) %}
+	<div id="Checkout"></div>
+	<div class="bg-theme-lighter">
+		{% include '@components/Layout/CrossSelling/CrossSelling.twig' with {products: products, title: 'Consultés récemment'} %}
+	</div>
+{% endblock %}
+{% block footer %}
+	{% include '@components/Layout/Footer/FooterCheckout.twig' %}
+{% endblock %}

components/Layout/Header/Header.js

@@ -3,7 +3,7 @@ export default () => {
 
   const btn = document.getElementById('toggleMenu');
 
-  btn.addEventListener('click', () =>
+  btn?.addEventListener('click', () =>
     document.getElementById('Menu').classList.toggle('is-open')
   );
 };

components/Layout/ProductGallery/ProductGallery.twig

@@ -0,0 +1,16 @@
+
+{% set images = resources('/api/front/product_images', {'product.id':productId}) %}
+{% if images %}
+  {% set imgId = images|first.id  %}
+{% endif %}
+
+<ul class="absolute top-0 left-0 md:transform-none hidden -translate-x-full lg:translate-x-0 sm:block">
+  {% for image in images %}
+    <li class="ProductGallery-item cursor-pointer{% if loop.index== 1 %} is-active{% endif %}">
+      <img class="ProductGallery-thumbnail" data-image-id="{{ image.id }}" src="{{ "/legacy-image-library/product_image_"~image.id~"/full/%5E*!92,92/0/default.webp"}}" loading="lazy" />
+    </li>
+  {% endfor %}
+</ul>
+<div>
+  <img id="MainImage" src="{{ imgId ? "/legacy-image-library/product_image_"~imgId~"/full/%5E*!594,594/0/default.webp" : "@assets/images/placeholder2.webp"}}" loading="lazy"  alt="{{ attr('product', 'title') }}"/>
+</div>

components/Layout/ProductGallery/test.twig

@@ -0,0 +1 @@
+<p>Toto</p>

global.d.ts

@@ -0,0 +1,11 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+}
+interface Window {
+  PSES: import('@react/Layout/PseSelector/PseSelector.types').PSE[];
+  ATTRIBUTES: import('@react/Layout/PseSelector/PseSelector.types').Attribute[];
+}