handle purchasing a JamTrack

handle adding to cart of redeemable vs paid jamtracks

jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js

@@ -8,34 +8,60 @@ import { useShoppingCart } from '../../hooks/useShoppingCart';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import JKTooltip from '../common/JKTooltip';
+import { placeOrder, updateUser } from '../../helpers/rest';
 
 const JKJamTrackPurchaseButton = ({ jamTrack }) => {
   const history = useHistory();
   const { currentUser } = useAuth();
-  const { addCartItem } = useShoppingCart();
+  const { addCartItem, getCartItems, hasOnlyFreeItemsInShoppingCart } = useShoppingCart();
   const { t } = useTranslation('jamtracks');
 
-
   const addToCart = async () => {
+    if (!currentUser) {
+      return;
+    }
     const options = {
       id: jamTrack.id,
       variant: 'full'
     };
-    if (await addCartItem(options)) {
-      toast.success(t('search.list.add_success_alert'));
-      history.push('/shopping-cart');
-    } else {
-      console.log('Add to Cart Error');
+
+    try {
+      const resp = await addCartItem(options);
+      console.log('resp1', resp);
+      if(resp.fast_reedem){ //if this is a free jamtrack
+        //get shopping cart items and see if all are free
+        if(!hasOnlyFreeItemsInShoppingCart()){
+          history.push('/jamtracks');
+        }else{
+          const purchadeResp = await placeOrder();
+          console.log('resp2', purchadeResp);
+          if(purchadeResp.ok){
+            const userResp = await updateUser(currentUser.id);
+            console.log('resp3', userResp);
+            if(userResp.ok){
+              history.push('/checkout/success?free=yes&jamtrackId=' + jamTrack.id);
+            }
+          }
+        }
+        
+      }else{ //if this is a paid jamtrack
+        toast.success(t('search.list.add_success_alert'));
+        history.push('/shopping-cart');
+      }
+    } catch (error) {
+      console.log(error);
       toast.error(t('search.list.add_error_alert'));
+      
     }
+   
   };
 
   return (
     <>
-      {jamTrack.purchaed ? (
-        <Button color="light" size="sm" className="mr-1">
-          {t('search.list.purchased')}
-        </Button>
+      {jamTrack.purchased ? (
+      
+          <span>{t('search.list.purchased')}</span>
+       
       ) : jamTrack.allow_free && currentUser && currentUser.show_free_jamtrack ? (
         <>
           <Button color="primary" onClick={addToCart} size="sm" className="mr-1">

jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js

@@ -1,32 +1,80 @@
-import React from 'react'
-import { Card, CardBody } from 'reactstrap'
-import FalconCardHeader from '../common/FalconCardHeader'
-import { useTranslation } from "react-i18next";
-import { Link } from 'react-router-dom'
+import React, { useEffect, useState } from 'react';
+import { Card, CardBody } from 'reactstrap';
+import FalconCardHeader from '../common/FalconCardHeader';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+import { getJamTrack } from '../../helpers/rest';
 
 const JKCheckoutSuccess = () => {
-  const {t} = useTranslation('checkoutSuccess')
+  const { t } = useTranslation('checkoutSuccess');
+  const search = useLocation().search;
+  const [free, setFree] = useState(false);
+  const [jamtrack, setJamtrack] = useState(null);
+
+  useEffect(() => {
+    if (!search) return;
+    const params = new URLSearchParams(search);
+    setFree(params.get('free') === 'yes');
+    const jamTrackId = params.get('jamtrackId');
+    if (jamTrackId) {
+      getJamTrack({ id: jamTrackId }).then(resp => {
+        if (resp.ok) {
+          resp.json().then(data => {
+            setJamtrack(data);
+          });
+        }
+      });
+    }
+  }, [search]);
+
   return (
     <Card>
-    <FalconCardHeader title={t('page_title')} titleClass="font-weight-semi-bold" />
-    <CardBody className="pt-0 text-center mt-4">
-      <p className="text-muted">Thank you for your order! We'll send you an order confirmation email shortly.</p>
-      <p>
-        Click the button below to start using your new JamTracks.
-      </p>
-      <p>
-        <Link to="/my-jamtracks" className="btn btn-primary">
-          {t('my_jamtracks')}
-        </Link>
-      </p>
-      <div>
-        <p>
-          You can also play with your JamTracks in the <a href="https://www.jamkazam.com/downloads" target='_blank'>JamKazam desktop app</a>, available for Windows and Mac.
-        </p>
-      </div>
-    </CardBody>
-  </Card>
-  )
-}
+      <FalconCardHeader title={t('page_title')} titleClass="font-weight-semi-bold" />
+      <CardBody className="pt-0 text-center mt-5 mb-5">
+        {free ? (
+          <>
+            <p>
+              Thank you for getting your first JamTrack&nbsp;
+              {jamtrack && (
+                <>
+                  &quot;{jamtrack.name}&quot; free! Click the button below to start playing with your JamTrack in your
+                  browser. <br />
+                </>
+              )}
+            </p>
+            {jamtrack && (
+              <Link to={`/jamtracks/${jamtrack.id}`} className="btn btn-primary">
+                {t('open_jamtrack')}
+              </Link>
+            )}
+          </>
+        ) : (
+          <>
+            <p>
+              Thank you for your order! We'll send you an order confirmation email shortly.
+              <br />
+              Click the button below to start using your new JamTracks.
+            </p>
+            <p>
+              <Link to="/my-jamtracks" className="btn btn-primary">
+                {t('my_jamtracks')}
+              </Link>
+            </p>
+          </>
+        )}
 
-export default JKCheckoutSuccess
+        <div className="mt-6">
+          <p>
+            You can also play with your JamTracks in the{' '}
+            <a href="https://www.jamkazam.com/downloads" target="_blank">
+              JamKazam desktop app
+            </a>
+            , available for Windows and Mac.
+          </p>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default JKCheckoutSuccess;

jam-ui/src/hooks/useShoppingCart.js

@@ -38,7 +38,7 @@ export const useShoppingCart = () => {
       const resp = await addJamtrackToShoppingCart(options);
       const data = await resp.json();
       setShoppingCart([...shoppingCart, data]);
-      return true;
+      return data;
     } catch (error) {
       console.log(error);
       return false;
@@ -55,9 +55,13 @@ export const useShoppingCart = () => {
       return false;
     }
   
-  } 
+  }
+  
+  const hasOnlyFreeItemsInShoppingCart = () => {
+    return shoppingCart.length === 0 || shoppingCart.every(item => item.product_info.free);
+  }
 
   return{
-    shoppingCart, error, loading, removeCartItem, addCartItem, cartTotal
+    shoppingCart, error, loading, removeCartItem, addCartItem, cartTotal, hasOnlyFreeItemsInShoppingCart
   }
 }

jam-ui/src/i18n/locales/en/checkout_success.json

@@ -1,4 +1,5 @@
 {
   "page_title": "Thank You!",
-  "my_jamtracks": "My JamTracks" 
+  "my_jamtracks": "My JamTracks",
+  "open_jamtrack": "Open JamTrack"
 }

web/app/views/api_jam_tracks/show_for_client.rabl

@@ -29,12 +29,14 @@ child(:jam_track_tracks => :tracks) {
 
 node do |jam_track|
   right = jam_track.right_for_user(current_user)
-  {
-    jam_track_right_id: right.id,
-    purchased_at: right.created_at.to_i,
-    last_mixdown_id: right.last_mixdown_id,
-    last_stem_id: right.last_stem_id
-  }
+  if right
+    {
+      jam_track_right_id: right.id,
+      purchased_at: right.created_at.to_i,
+      last_mixdown_id: right.last_mixdown_id,
+      last_stem_id: right.last_stem_id
+    }
+  end
 end
 
 node :mixdowns do |jam_track|