manage cart session when user login or logout

app/controllers/api/cart_controller.rb

@@ -2,12 +2,16 @@
 
 # API Controller for manage user's cart
 class API::CartController < API::ApiController
-  before_action :current_order
+  before_action :current_order, except: %i[create]
   before_action :ensure_order, except: %i[create]
 
   def create
     authorize :cart, :create?
-    @order = current_order if current_order.present?
+    @order = Order.find_by(token: order_token)
+    @order = Order.find_by(statistic_profile_id: current_user.statistic_profile.id, state: 'cart') if @order.nil? && current_user&.member?
+    if @order && @order.statistic_profile_id.nil? && current_user&.member?
+      @order.update(statistic_profile_id: current_user.statistic_profile.id)
+    end
     @order ||= Cart::CreateService.new.call(current_user)
     render 'api/orders/show'
   end
@@ -19,13 +23,13 @@ class API::CartController < API::ApiController
   end
 
   def remove_item
-    authorize :cart, policy_class: CartPolicy
+    authorize @current_order, policy_class: CartPolicy
     @order = Cart::RemoveItemService.new.call(@current_order, orderable)
     render 'api/orders/show'
   end
 
   def set_quantity
-    authorize :cart, policy_class: CartPolicy
+    authorize @current_order, policy_class: CartPolicy
     @order = Cart::SetQuantityService.new.call(@current_order, orderable, cart_params[:quantity])
     render 'api/orders/show'
   end

app/frontend/src/javascript/components/cart/store-cart.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
@@ -7,20 +7,28 @@ import { FabButton } from '../base/fab-button';
 import useCart from '../../hooks/use-cart';
 import FormatLib from '../../lib/format';
 import CartAPI from '../../api/cart';
+import { User } from '../../models/user';
 
 declare const Application: IApplication;
 
 interface StoreCartProps {
   onError: (message: string) => void,
+  currentUser: User,
 }
 
 /**
  * This component shows user's cart
  */
-const StoreCart: React.FC<StoreCartProps> = ({ onError }) => {
+const StoreCart: React.FC<StoreCartProps> = ({ onError, currentUser }) => {
   const { t } = useTranslation('public');
 
-  const { cart, setCart } = useCart();
+  const { cart, setCart, reloadCart } = useCart();
+
+  useEffect(() => {
+    if (currentUser) {
+      reloadCart();
+    }
+  }, [currentUser]);
 
   /**
    * Remove the product from cart
@@ -79,12 +87,12 @@ const StoreCart: React.FC<StoreCartProps> = ({ onError }) => {
   );
 };
 
-const StoreCartWrapper: React.FC<StoreCartProps> = ({ onError }) => {
+const StoreCartWrapper: React.FC<StoreCartProps> = (props) => {
   return (
     <Loader>
-      <StoreCart onError={onError} />
+      <StoreCart {...props} />
     </Loader>
   );
 };
 
-Application.Components.component('storeCart', react2angular(StoreCartWrapper, ['onError']));
+Application.Components.component('storeCart', react2angular(StoreCartWrapper, ['onError', 'currentUser']));

app/frontend/src/javascript/components/store/store.tsx

@@ -9,20 +9,22 @@ import ProductAPI from '../../api/product';
 import { StoreProductItem } from './store-product-item';
 import useCart from '../../hooks/use-cart';
 import { emitCustomEvent } from 'react-custom-events';
+import { User } from '../../models/user';
 
 declare const Application: IApplication;
 
 interface StoreProps {
   onError: (message: string) => void,
+  currentUser: User,
 }
 
 /**
  * This component shows public store
  */
-const Store: React.FC<StoreProps> = ({ onError }) => {
+const Store: React.FC<StoreProps> = ({ onError, currentUser }) => {
   const { t } = useTranslation('public');
 
-  const { cart, setCart } = useCart();
+  const { cart, setCart, reloadCart } = useCart();
 
   const [products, setProducts] = useState<Array<Product>>([]);
 
@@ -38,6 +40,12 @@ const Store: React.FC<StoreProps> = ({ onError }) => {
     emitCustomEvent('CartUpdate', cart);
   }, [cart]);
 
+  useEffect(() => {
+    if (currentUser) {
+      reloadCart();
+    }
+  }, [currentUser]);
+
   return (
     <div className="store">
       <div className='layout'>
@@ -85,12 +93,12 @@ const Store: React.FC<StoreProps> = ({ onError }) => {
   );
 };
 
-const StoreWrapper: React.FC<StoreProps> = ({ onError }) => {
+const StoreWrapper: React.FC<StoreProps> = (props) => {
   return (
     <Loader>
-      <Store onError={onError} />
+      <Store {...props} />
     </Loader>
   );
 };
 
-Application.Components.component('store', react2angular(StoreWrapper, ['onError']));
+Application.Components.component('store', react2angular(StoreWrapper, ['onError', 'currentUser']));

app/frontend/src/javascript/controllers/application.js

@@ -1,6 +1,6 @@
 
-Application.Controllers.controller('ApplicationController', ['$rootScope', '$scope', '$transitions', '$window', '$locale', '$timeout', 'Session', 'AuthService', 'Auth', '$uibModal', '$state', 'growl', 'Notification', '$interval', 'Setting', '_t', 'Version', 'Help',
-  function ($rootScope, $scope, $transitions, $window, $locale, $timeout, Session, AuthService, Auth, $uibModal, $state, growl, Notification, $interval, Setting, _t, Version, Help) {
+Application.Controllers.controller('ApplicationController', ['$rootScope', '$scope', '$transitions', '$window', '$locale', '$timeout', 'Session', 'AuthService', 'Auth', '$uibModal', '$state', 'growl', 'Notification', '$interval', 'Setting', '_t', 'Version', 'Help', '$cookies',
+  function ($rootScope, $scope, $transitions, $window, $locale, $timeout, Session, AuthService, Auth, $uibModal, $state, growl, Notification, $interval, Setting, _t, Version, Help, $cookies) {
   /* PRIVATE STATIC CONSTANTS */
 
     // User's notifications will get refreshed every 30s
@@ -58,6 +58,7 @@ Application.Controllers.controller('ApplicationController', ['$rootScope', '$sco
           total: 0,
           unread: 0
         };
+        $cookies.remove('fablab_cart_token');
         return $state.go('app.public.home');
       }, function (error) {
         console.error(`An error occurred logging out: ${error}`);

app/frontend/src/javascript/hooks/use-cart.ts

@@ -25,5 +25,13 @@ export default function useCart () {
     }
   }, []);
 
-  return { loading, cart, error, setCart };
+  const reloadCart = async () => {
+    setLoading(true);
+    const currentCartToken = getCartToken();
+    const data = await CartAPI.create(currentCartToken);
+    setCart(data);
+    setLoading(false);
+  };
+
+  return { loading, cart, error, setCart, reloadCart };
 }

app/frontend/templates/cart/index.html

@@ -15,5 +15,5 @@
 
 
 <section class="m-lg">
-  <store-cart on-error="onError" on-success="onSuccess" />
+  <store-cart current-user="currentUser" on-error="onError" on-success="onSuccess" />
 </section>

app/frontend/templates/store/index.html

@@ -21,5 +21,5 @@
 
 
 <section class="m-lg">
-  <store on-error="onError" on-success="onSuccess" />
+  <store current-user="currentUser" on-error="onError" on-success="onSuccess" />
 </section>

app/policies/cart_policy.rb

@@ -8,7 +8,9 @@ class CartPolicy < ApplicationPolicy
 
   %w[add_item remove_item set_quantity].each do |action|
     define_method "#{action}?" do
-      user.privileged? || (record.statistic_profile.user_id == user.id)
+      return user.privileged? || (record.statistic_profile_id == user.statistic_profile.id) if user
+
+      record.statistic_profile_id.nil?
     end
   end
 end