feat: change state function and improve EventListenner

config/bundles.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
+    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
+    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
+];

config/packages/cache.yaml

@@ -0,0 +1,19 @@
+framework:
+    cache:
+        # Unique name of your app: used to compute stable namespaces for cache keys.
+        #prefix_seed: your_vendor_name/app_name
+
+        # The "app" cache stores to the filesystem by default.
+        # The data in this cache should persist between deploys.
+        # Other options include:
+
+        # Redis
+        #app: cache.adapter.redis
+        #default_redis_provider: redis://localhost
+
+        # APCu (not recommended with heavy random-write workloads as memory fragmentation can cause perf issues)
+        #app: cache.adapter.apcu
+
+        # Namespaced pools use the above "app" backend by default
+        #pools:
+            #my.dedicated.cache: null

config/packages/framework.yaml

@@ -0,0 +1,25 @@
+# see https://symfony.com/doc/current/reference/configuration/framework.html
+framework:
+    secret: '%env(APP_SECRET)%'
+    #csrf_protection: true
+    http_method_override: false
+    handle_all_throwables: true
+
+    # Enables session support. Note that the session will ONLY be started if you read or write from it.
+    # Remove or comment this section to explicitly disable session support.
+    session:
+        handler_id: null
+        cookie_secure: auto
+        cookie_samesite: lax
+        storage_factory_id: session.storage.factory.native
+
+    #esi: true
+    #fragments: true
+    php_errors:
+        log: true
+
+when@test:
+    framework:
+        test: true
+        session:
+            storage_factory_id: session.storage.factory.mock_file

config/packages/lock.yaml

@@ -0,0 +1,2 @@
+framework:
+    lock: '%env(LOCK_DSN)%'

config/packages/mailer.yaml

@@ -0,0 +1,3 @@
+framework:
+    mailer:
+        dsn: '%env(MAILER_DSN)%'

config/packages/routing.yaml

@@ -0,0 +1,12 @@
+framework:
+    router:
+        utf8: true
+
+        # Configure how to generate URLs in non-HTTP contexts, such as CLI commands.
+        # See https://symfony.com/doc/current/routing.html#generating-urls-in-commands
+        #default_uri: http://localhost
+
+when@prod:
+    framework:
+        router:
+            strict_requirements: null

config/packages/translation.yaml

@@ -0,0 +1,15 @@
+framework:
+    default_locale: en
+    translator:
+        default_path: '%kernel.project_dir%/translations'
+        fallbacks:
+            - en
+#        providers:
+#            crowdin:
+#                dsn: '%env(CROWDIN_DSN)%'
+#            loco:
+#                dsn: '%env(LOCO_DSN)%'
+#            lokalise:
+#                dsn: '%env(LOKALISE_DSN)%'
+#            phrase:
+#                dsn: '%env(PHRASE_DSN)%'

config/packages/twig.yaml

@@ -0,0 +1,6 @@
+twig:
+    default_path: '%kernel.project_dir%/templates'
+
+when@test:
+    twig:
+        strict_variables: true

config/packages/validator.yaml

@@ -0,0 +1,13 @@
+framework:
+    validation:
+        email_validation_mode: html5
+
+        # Enables validator auto-mapping support.
+        # For instance, basic validation constraints will be inferred from Doctrine's metadata.
+        #auto_mapping:
+        #    App\Entity\: []
+
+when@test:
+    framework:
+        validation:
+            not_compromised_password: false

config/packages/web_profiler.yaml

@@ -0,0 +1,17 @@
+when@dev:
+    web_profiler:
+        toolbar: true
+        intercept_redirects: false
+
+    framework:
+        profiler:
+            only_exceptions: false
+            collect_serializer_data: true
+
+when@test:
+    web_profiler:
+        toolbar: false
+        intercept_redirects: false
+
+    framework:
+        profiler: { collect: false }

config/packages/webpack_encore.yaml

@@ -0,0 +1,8 @@
+webpack_encore:
+  output_path: '%kernel.project_dir%/public/build'
+  script_attributes:
+    defer: true
+  builds:
+    _default: ''
+    frontOffice: '%kernel.project_dir%/templates/frontOffice/%thelia_front_template%/dist'
+    backOffice: '%kernel.project_dir%/templates/backOffice/%thelia_admin_template%/dist'

config/preload.php

@@ -0,0 +1,5 @@
+<?php
+
+if (file_exists(dirname(__DIR__).'/var/cache/prod/App_KernelProdContainer.preload.php')) {
+    require dirname(__DIR__).'/var/cache/prod/App_KernelProdContainer.preload.php';
+}

config/routes.yaml

@@ -0,0 +1,5 @@
+controllers:
+    resource:
+        path: ../src/Controller/
+        namespace: App\Controller
+    type: attribute

config/routes/framework.yaml

@@ -0,0 +1,4 @@
+when@dev:
+    _errors:
+        resource: '@FrameworkBundle/Resources/config/routing/errors.xml'
+        prefix: /_error

config/routes/web_profiler.yaml

@@ -0,0 +1,8 @@
+when@dev:
+    web_profiler_wdt:
+        resource: '@WebProfilerBundle/Resources/config/routing/wdt.xml'
+        prefix: /_wdt
+
+    web_profiler_profiler:
+        resource: '@WebProfilerBundle/Resources/config/routing/profiler.xml'
+        prefix: /_profiler

config/services.yaml

@@ -0,0 +1,24 @@
+# This file is the entry point to configure your own services.
+# Files in the packages/ subdirectory configure your dependencies.
+
+# Put parameters here that don't need to change on each machine where the app is deployed
+# https://symfony.com/doc/current/best_practices.html#use-parameters-for-application-configuration
+parameters:
+
+services:
+    # default configuration for services in *this* file
+    _defaults:
+        autowire: true      # Automatically injects dependencies in your services.
+        autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.
+
+    # makes classes in src/ available to be used as services
+    # this creates a service per class whose id is the fully-qualified class name
+    App\:
+        resource: '../src/'
+        exclude:
+            - '../src/DependencyInjection/'
+            - '../src/Entity/'
+            - '../src/Kernel.php'
+
+    # add more service definitions when explicit configuration is needed
+    # please note that last definitions always *replace* previous ones

docker-compose.override.yml

@@ -0,0 +1,8 @@
+version: '3'
+
+services:
+###> symfony/mailer ###
+  mailer:
+    image: schickling/mailcatcher
+    ports: ["1025", "1080"]
+###< symfony/mailer ###

package.json

@@ -0,0 +1,22 @@
+{
+    "devDependencies": {
+        "@babel/core": "^7.17.0",
+        "@babel/preset-env": "^7.16.0",
+        "@hotwired/stimulus": "^3.0.0",
+        "@symfony/stimulus-bridge": "^3.2.0",
+        "@symfony/webpack-encore": "^4.0.0",
+        "core-js": "^3.23.0",
+        "regenerator-runtime": "^0.13.9",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-notifier": "^1.15.0"
+    },
+    "license": "UNLICENSED",
+    "private": true,
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    }
+}

templates/frontOffice/modern/assets/js/state/checkout.ts

@@ -19,29 +19,27 @@ export const useGlobalCheckout = () => {
   const [checkoutState, setCheckout] = globalCheckoutState();
 
   const setMode = (mode: string) => {
-    let checkout = { ...checkoutState };
-
-    checkout.mode = mode;
-
-    checkout.deliveryAddressId = initialState.deliveryAddressId;
-    checkout.deliveryModuleId = initialState.deliveryModuleId;
-    checkout.deliveryModuleOption = initialState.deliveryModuleOption;
-
-    setCheckout(checkout);
+    setCheckout((checkout) => ({
+      ...checkout,
+      mode: mode,
+      deliveryAddressId: initialState.deliveryAddressId,
+      deliveryModuleId: initialState.deliveryModuleId,
+      deliveryModuleOption: initialState.deliveryModuleOption
+    }));
   };
 
   const setPhoneNumberValid = (value: boolean) => {
-    let checkout = { ...checkoutState };
-
-    checkout.phoneNumberValid = value;
-    setCheckout(checkout);
+    setCheckout((checkout) => ({
+      ...checkout,
+      phoneNumberValid: value
+    }));
   };
 
   const setCheckoutStep = (step: number) => {
-    let checkout = { ...checkoutState };
-
-    checkout.checkoutStep = step;
-    setCheckout(checkout);
+    setCheckout((checkout) => ({
+      ...checkout,
+      checkoutStep: step
+    }));
   };
 
   return {

templates/frontOffice/modern/assets/js/state/visibility.ts

@@ -16,48 +16,38 @@ export const useGlobalVisibility = () => {
   const [visibilityState, setVisibility] = globalVisibility();
 
   const hideCart = () => {
-    let visibility = { ...visibilityState };
-
-    visibility.cart = false;
-    setVisibility(visibility);
+    setVisibility((visibility) => ({ ...visibility, cart: false }));
   };
-  const showCart = () => {
-    let visibility = { ...visibilityState };
 
-    visibility.cart = true;
-    setVisibility(visibility);
+  const showCart = () => {
+    setVisibility((visibility) => ({ ...visibility, cart: true }));
   };
-  const toggleCart = () => {
-    let visibility = { ...visibilityState };
 
-    visibility.cart = !visibility.cart;
-    setVisibility(visibility);
+  const toggleCart = () => {
+    setVisibility((visibility) => ({ ...visibility, cart: !visibility.cart }));
   };
 
-  const showLogin = (redirectionToCheckout: boolean) => {
-    let visibility = { ...visibilityState };
-
-    visibility.login = true;
-    visibility.redirectionToCheckout = redirectionToCheckout || false;
-    console.log('show');
-    setVisibility(visibility);
+  const showLogin = (redirectionToCheckout: boolean = false) => {
+    setVisibility((visibility) => ({
+      ...visibility,
+      login: true,
+      redirectionToCheckout
+    }));
   };
 
-  const hideLogin = (redirectionToCheckout: boolean) => {
-    let visibility = { ...visibilityState };
-
-    visibility.login = false;
-    visibility.redirectionToCheckout = redirectionToCheckout || false;
-    console.log('hide');
-    setVisibility(visibility);
+  const hideLogin = (redirectionToCheckout: boolean = false) => {
+    setVisibility((visibility) => ({
+      ...visibility,
+      login: false,
+      redirectionToCheckout
+    }));
   };
 
   const toggleLogin = () => {
-    let visibility = { ...visibilityState };
-
-    visibility.login = !visibility.login;
-    console.log('toggle', visibility);
-    setVisibility(visibility);
+    setVisibility((visibility) => ({
+      ...visibility,
+      login: !visibility.login
+    }));
   };
 
   return {

templates/frontOffice/modern/components/React/MiniCart/MiniCart.tsx

@@ -409,11 +409,19 @@ function MiniCart({
 
   useEscape(ref, () => closeAndFocus(() => hideCart(), '[data-toggle-cart]'));
 
-  ref?.current?.addEventListener('keydown', (e: KeyboardEvent) => {
-    if (!visible) return;
+  useEffect(() => {
+    const onKeydown = (e: KeyboardEvent) => {
+      if (!visible) return;
 
-    trapTabKey(ref.current as HTMLElement, e);
-  });
+      trapTabKey(ref.current as HTMLElement, e);
+    };
+
+    ref?.current?.addEventListener('keydown', onKeydown);
+
+    return () => {
+      ref?.current?.removeEventListener('keydown', onKeydown);
+    };
+  }, []);
 
   return (
     <div
@@ -491,21 +499,20 @@ function MiniCartContainer() {
   const { actions } = useGlobalVisibility();
   const { toggleCart, hideCart } = actions;
 
-  document.addEventListener(
-    'click',
-    (e) => {
-      console.log(
-        '🚀 ~ file: MiniCart.tsx:497 ~ MiniCartContainer ~ e:',
-        e.target
-      );
+  useEffect(() => {
+    const onClick = (e: Event) => {
       if ((e.target as HTMLElement)?.matches('[data-toggle-cart]')) {
         toggleCart();
       } else if ((e.target as HTMLElement)?.matches('[data-close-cart]')) {
         hideCart();
       }
-    },
-    false
-  );
+    };
+    document.addEventListener('click', onClick, false);
+
+    return () => {
+      document.removeEventListener('click', onClick);
+    };
+  }, []);
 
   return (
     <QueryClientProvider client={queryClient}>