From 5673d9b21e9fdbeaedc25eaa7643d00ee72ed897 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Wed, 25 Dec 2024 00:04:11 +0530 Subject: [PATCH] jamtracks related misc fixes --- .../e2e/jamtracks/jamtracks-page.cy.js | 94 ++++++++++----- .../components/dashboard/JKDashboardMain.js | 4 +- .../components/jamtracks/JKJamTrackItem.js | 57 +++++++++ .../components/jamtracks/JKJamTrackPreview.js | 35 ++++-- .../jamtracks/JKJamTrackPurchaseButton.js | 3 - .../{JKJamTrack.js => JKJamTrackShow.js} | 8 +- .../components/jamtracks/JKJamTrackTrack.js | 3 +- .../jamtracks/JKJamTracksAutoComplete.js | 2 +- .../components/jamtracks/JKJamTracksFilter.js | 111 ++++++++---------- .../components/jamtracks/JKJamTracksList.js | 42 +------ .../components/jamtracks/JKJamTracksSlider.js | 78 ++++++++++++ jam-ui/src/components/page/JKPeopleSwiper.js | 2 +- .../components/shopping-cart/JKCheckout.js | 14 +-- jam-ui/src/hooks/useShoppingCart.js | 3 + 14 files changed, 294 insertions(+), 162 deletions(-) create mode 100644 jam-ui/src/components/jamtracks/JKJamTrackItem.js rename jam-ui/src/components/jamtracks/{JKJamTrack.js => JKJamTrackShow.js} (95%) create mode 100644 jam-ui/src/components/jamtracks/JKJamTracksSlider.js diff --git a/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js b/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js index 83b7600f0..c082ce940 100644 --- a/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js +++ b/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js @@ -32,46 +32,80 @@ describe('JamTracks Page', () => { cy.intercept('GET', /\S+\/jamtracks\?per_page=10\&page=1\&\S+/, { fixture: 'jamtracks_page1' }).as('getJamTracks_page1'); cy.intercept('GET', /\S+\/jamtracks\?per_page=10\&page=2\&\S+/, { fixture: 'jamtracks_page2' }).as('getJamTracks_page2'); cy.intercept('GET', /\S+\/jamtracks\?per_page=10\&page=3\&\S+/, { fixture: 'jamtracks_page3' }).as('getJamTracks_page3'); + cy.intercept('GET', /\S+\/shopping_carts/, { + statusCode: 200, + body: [] + }).as('getShoppingCart'); cy.intercept('POST', /\S+\/shopping_carts\/add_jamtrack/, { - body: { success: true } + statusCode: 200, + body: { id: 1, + product_info: { + total_price: 9.99 + } + } }).as('addJamTrackToCart'); - }) + cy.intercept('GET', /\S+\/jamtracks\/purchased/, { + statusCode: 200, + body: [] + }).as('getPurchasedJamTracks'); + }) + + it('should display the JamTracks', () => { + cy.get('input[type="search"]').type('ba{enter}'); + cy.wait('@getJamTracks_page1'); + cy.contains('Search Results: JamTracks including "ba"'); + cy.get('[data-testid=jamtracks-table] tbody tr:first .track-name-col').should('contain', 'Back in Black by AC DC'); + cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6); + cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show all tracks').click(); + cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 10); + cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show fewer tracks').click(); + cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6); + + //load more + cy.get('button').contains('Load More').click(); + cy.wait('@getJamTracks_page2'); + + //load more + cy.get('button').contains('Load More').click(); + cy.wait('@getJamTracks_page3'); + + cy.get('[data-testid=jamtracks-table] tbody tr').should('have.length', 30); + + //no more pages + cy.get('[data-testid=moreBtn]').should('not.exist'); + }); + + it('let user to purchase a JamTrack', () => { + cy.get('input[type="search"]').type('ba{enter}'); + cy.wait('@getJamTracks_page1'); + cy.wait('@getShoppingCart'); + cy.get('[data-testid=jamtracks-table] tbody tr').eq(2).find('.purchase-button-col button').should('contain', 'Add to Cart').click(); + cy.wait('@getShoppingCart'); + cy.wait('@addJamTrackToCart'); + cy.location('pathname').should('eq', '/shopping-cart') + }); + + + + describe.only('mobile', () => { + beforeEach(() => { + cy.viewport('iphone-6'); + }); it('should display the JamTracks', () => { cy.get('input[type="search"]').type('ba{enter}'); cy.wait('@getJamTracks_page1'); cy.contains('Search Results: JamTracks including "ba"'); - cy.get('[data-testid=jamtracks-table] tbody tr:first .track-name-col').should('contain', 'Back in Black by AC DC'); - cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6); - cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show all tracks').click(); - cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 10); - cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show fewer tracks').click(); - cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6); - - //load more - cy.get('button').contains('Load More').click(); - cy.wait('@getJamTracks_page2'); - - //load more - cy.get('button').contains('Load More').click(); - cy.wait('@getJamTracks_page3'); - - cy.get('[data-testid=jamtracks-table] tbody tr').should('have.length', 30); - - //no more pages - cy.get('[data-testid=moreBtn]').should('not.exist'); }); - - it('let user to purchase a JamTrack', () => { - cy.get('input[type="search"]').type('ba{enter}'); - cy.wait('@getJamTracks_page1'); - cy.get('[data-testid=jamtracks-table] tbody tr').eq(2).find('.purchase-button-col button').should('contain', 'Add to Cart').click(); - cy.wait('@addJamTrackToCart'); - cy.location('pathname').should('eq', '/shopping-cart') - }); - }); + + + }); + + + + }); diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js index 53da4ab69..aae1045da 100644 --- a/jam-ui/src/components/dashboard/JKDashboardMain.js +++ b/jam-ui/src/components/dashboard/JKDashboardMain.js @@ -57,7 +57,7 @@ import JKShoppingCart from '../shopping-cart/JKShoppingCart'; import JKCheckout from '../shopping-cart/JKCheckout'; import JKCheckoutSuccess from '../shopping-cart/JKCheckoutSuccess'; import JKMyJamTracks from '../jamtracks/JKMyJamTracks'; -import JKJamTrack from '../jamtracks/JKJamTrack'; +import JKJamTrackShow from '../jamtracks/JKJamTrackShow'; //import loadable from '@loadable/component'; @@ -313,7 +313,7 @@ function JKDashboardMain() { - + diff --git a/jam-ui/src/components/jamtracks/JKJamTrackItem.js b/jam-ui/src/components/jamtracks/JKJamTrackItem.js new file mode 100644 index 000000000..1d549b5e4 --- /dev/null +++ b/jam-ui/src/components/jamtracks/JKJamTrackItem.js @@ -0,0 +1,57 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { useTranslation } from 'react-i18next' +import { useResponsive } from '@farfetch/react-context-responsive' +import { Row, Col } from 'reactstrap' +import JKJamTrackPreview from './JKJamTrackPreview' +import JKJamTrackPurchaseButton from './JKJamTrackPurchaseButton' +import { JamTrackPreviewProvider } from '../../context/JamTrackPreviewContext' + + +const JKJamTrackItem = ({ jamTrack }) => { + const { t } = useTranslation('jamtracks') + const { greaterThan } = useResponsive() + return ( + <> + + {greaterThan.sm ? ( + + + {jamTrack.name}
+ by {jamTrack.original_artist} + + + + + + + + + ) : ( + + +
+ {jamTrack.name} +
+
+ by {jamTrack.original_artist} +
+ + + + + + + + + )} + + + ) +} + +JKJamTrackItem.propTypes = { + jamTrack: PropTypes.object.isRequired +} + +export default JKJamTrackItem \ No newline at end of file diff --git a/jam-ui/src/components/jamtracks/JKJamTrackPreview.js b/jam-ui/src/components/jamtracks/JKJamTrackPreview.js index e432081db..707eeabc7 100644 --- a/jam-ui/src/components/jamtracks/JKJamTrackPreview.js +++ b/jam-ui/src/components/jamtracks/JKJamTrackPreview.js @@ -2,9 +2,11 @@ import React, { Fragment, useState } from 'react'; import { Row, Col, Container } from 'reactstrap'; import JKJamTrackTrack from './JKJamTrackTrack'; import PropTypes from 'prop-types'; +import { useResponsive } from '@farfetch/react-context-responsive'; const JKJamTrackPreview = ({ jamTrack }) => { const [expanded, setExpanded] = useState(false); + const { greaterThan } = useResponsive(); const toggleMoreTracks = (e) => { e.preventDefault(); @@ -12,18 +14,29 @@ const JKJamTrackPreview = ({ jamTrack }) => { }; return ( - - - {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => ( - - 6 && !expanded ? 'd-none' : null}> + <> + {greaterThan.sm ? ( + + {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => ( + + 6 && !expanded ? 'd-none' : null}> + + + {(index + 1) % 2 === 0 &&
} + {(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 &&
} + + ))} + + ) : ( + + {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => ( + 6 && !expanded ? 'd-none mb-3' : 'mb-3'}> - {(index + 1) % 2 === 0 &&
} - {(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 &&
} - - ))} - + ))} + + )} + {jamTrack.tracks.length > 6 && ( @@ -31,7 +44,7 @@ const JKJamTrackPreview = ({ jamTrack }) => { )} - + ); }; diff --git a/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js b/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js index be948a394..7385ce67a 100644 --- a/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js +++ b/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js @@ -27,17 +27,14 @@ const JKJamTrackPurchaseButton = ({ jamTrack }) => { 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); } diff --git a/jam-ui/src/components/jamtracks/JKJamTrack.js b/jam-ui/src/components/jamtracks/JKJamTrackShow.js similarity index 95% rename from jam-ui/src/components/jamtracks/JKJamTrack.js rename to jam-ui/src/components/jamtracks/JKJamTrackShow.js index dd68cfc0c..8f3f6cf25 100644 --- a/jam-ui/src/components/jamtracks/JKJamTrack.js +++ b/jam-ui/src/components/jamtracks/JKJamTrackShow.js @@ -12,7 +12,7 @@ import JKJamTrackResourceLinks from './JKJamTrackResourceLinks'; import { useAuth } from '../../context/UserAuth'; import { useJamTrack } from '../../hooks/useJamTrack'; -const JKJamTrack = () => { +const JKJamTrackShow = () => { const { t } = useTranslation('jamtracks'); const { greaterThan } = useResponsive(); const { id } = useParams(); @@ -63,13 +63,13 @@ const JKJamTrack = () => { {jamTrack && } - + {jamTrack && } - + {jamTrack && } @@ -89,4 +89,4 @@ const JKJamTrack = () => { ); }; -export default JKJamTrack; +export default JKJamTrackShow; diff --git a/jam-ui/src/components/jamtracks/JKJamTrackTrack.js b/jam-ui/src/components/jamtracks/JKJamTrackTrack.js index ca55ffac3..9aeeb5f85 100644 --- a/jam-ui/src/components/jamtracks/JKJamTrackTrack.js +++ b/jam-ui/src/components/jamtracks/JKJamTrackTrack.js @@ -7,7 +7,6 @@ import { Spinner } from 'reactstrap'; import PropTypes from 'prop-types'; const JKJamTrackTrack = ({ track }) => { - console.log('debug JKTrackPlayPause track'); const [isPlaying, setIsPlaying] = useState(false); const [isLoaded, setIsLoaded] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -112,7 +111,7 @@ const JKJamTrackTrack = ({ track }) => { {trackInfo && ( <> - + diff --git a/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js b/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js index 4385e9f58..127d6a882 100644 --- a/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js +++ b/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js @@ -100,7 +100,7 @@ const JKJamTracksAutoComplete = ({ }; return ( - +
diff --git a/jam-ui/src/components/jamtracks/JKJamTracksFilter.js b/jam-ui/src/components/jamtracks/JKJamTracksFilter.js index f1985bdc4..587b7dc98 100644 --- a/jam-ui/src/components/jamtracks/JKJamTracksFilter.js +++ b/jam-ui/src/components/jamtracks/JKJamTracksFilter.js @@ -4,9 +4,9 @@ import { Card, CardBody, Row, Col } from 'reactstrap'; import FalconCardHeader from '../common/FalconCardHeader'; import { useTranslation } from 'react-i18next'; import JKJamTracksAutoComplete from './JKJamTracksAutoComplete'; -import { getJamTracks, getJamTrackArtists, autocompleteJamTracks } from '../../helpers/rest'; -import JKJamTrackArtists from './JKJamTrackArtists'; +import { getJamTracks, autocompleteJamTracks } from '../../helpers/rest'; import JKJamTracksList from './JKJamTracksList'; +import JKJamTracksSlider from './JKJamTracksSlider'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useShoppingCart } from '../../hooks/useShoppingCart'; import { useResponsive } from '@farfetch/react-context-responsive'; @@ -14,22 +14,17 @@ import { useResponsive } from '@farfetch/react-context-responsive'; const JKJamTracksFilter = () => { const { t } = useTranslation('jamtracks'); const [jamTracks, setJamTracks] = useState([]); - //const [artists, setArtists] = useState([]); const [selected, setSelected] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [showDropdown, setShowDropdown] = useState(false); - //const [showArtists, setShowArtists] = useState(false); const [nextOffset, setNextOffset] = useState(null); + const [totalJamTracks, setTotalJamTracks] = useState(0); const [autoCompleteInputValue, setAutoCompleteInputValue] = useState(''); const [page, setPage] = useState(1); const PER_PAGE = 10; const { shoppingCart } = useShoppingCart(); const { greaterThan } = useResponsive(); - // useEffect(() => { - // setCartItems(shoppingCart); - // }, []); - useEffect(() => { if (selected) { setSearchTerm(selected.type === 'artist' ? selected.original_artist : selected.name); @@ -58,10 +53,8 @@ const JKJamTracksFilter = () => { const handleOnSelect = async selected => { setPage(1); - //setArtists([]); setJamTracks([]); setSearchTerm(''); - //setShowArtists(false); setSelected(selected); const params = queryOptions(selected); await fetchJamTracks(params); @@ -69,28 +62,13 @@ const JKJamTracksFilter = () => { const handleOnEnter = async queryStr => { setPage(1); - //setArtists([]); setJamTracks([]); setSelected(x => null); setSearchTerm(queryStr); - //setShowArtists(false); - //fetchArtists(queryStr); const params = queryOptions(queryStr); - console.log('handleOnEnter _params', params, selected); await fetchJamTracks(params); }; - // const handleOnSelectArtist = async artist => { - // setPage(1); - // const selectedOpt = { - // type: 'artist', - // original_artist: artist.original_artist - // }; - // setShowDropdown(false); - // setAutoCompleteInputValue(''); - // await handleOnSelect(selectedOpt); - // }; - const handleOnNextJamTracksPage = async () => { const currentQuery = selected ? selected : searchTerm; const params = queryOptions(currentQuery); @@ -101,35 +79,16 @@ const JKJamTracksFilter = () => { try { const resp = await getJamTracks(options); const data = await resp.json(); - console.log('jamtracks', data); + //console.log('jamtracks', data); setJamTracks(prev => [...prev, ...data.jamtracks]); setNextOffset(data.next); + setTotalJamTracks(data.count); setPage(page + 1); } catch (error) { console.error('error', error); } }; - // const fetchArtists = query => { - // const options = { - // limit: 100 - // }; - // options.artist_search = query; - - // getJamTrackArtists(options) - // .then(resp => { - // return resp.json(); - // }) - // .then(data => { - // console.log('artists', data); - // setArtists(data.artists); - // setShowArtists(true); - // }) - // .catch(error => { - // console.error('error', error); - // }); - // }; - return ( @@ -139,6 +98,7 @@ const JKJamTracksFilter = () => { )} + { {greaterThan.sm && ( - + )} - - {/*
- + {selected?.type && searchTerm.length && jamTracks.length > 0 ? ( + + + + {t('search.search_results.for_selection')} {selected?.type} "{searchTerm}" + + + + ) : ( + searchTerm.length > 0 && + jamTracks.length > 0 && ( + + + {t('search.search_results.for_search_term')} "{searchTerm}" + + + ) + )} + + {greaterThan.sm ? ( + -
*/} - + ) : ( +
+ + + +
+ ) + } + ); diff --git a/jam-ui/src/components/jamtracks/JKJamTracksList.js b/jam-ui/src/components/jamtracks/JKJamTracksList.js index c83fce326..d8aae74c6 100644 --- a/jam-ui/src/components/jamtracks/JKJamTracksList.js +++ b/jam-ui/src/components/jamtracks/JKJamTracksList.js @@ -5,29 +5,12 @@ import JKJamTrackPurchaseButton from './JKJamTrackPurchaseButton'; import { JamTrackPreviewProvider } from '../../context/JamTrackPreviewContext'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; +import JKJamTrackItem from './JKJamTrackItem'; const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNextPage }) => { const { t } = useTranslation('jamtracks'); return ( <> - {selectedType && searchTerm.length && jamTracks.length > 0 ? ( - - - - {t('search.search_results.for_selection')} {selectedType} "{searchTerm}" - - - - ) : ( - searchTerm.length > 0 && - jamTracks.length > 0 && ( - - - {t('search.search_results.for_search_term')} "{searchTerm}" - - - ) - )} {jamTracks.length > 0 && ( @@ -40,22 +23,9 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe - - {jamTracks.map((jamTrack, index) => ( - - - {jamTrack.name}
- by {jamTrack.original_artist} - - - - - - - - - ))} - + {jamTracks.map((jamTrack, index) => ( + + ))} @@ -65,7 +35,7 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe @@ -87,7 +57,7 @@ JKJamTracksList.defaultProps = { searchTerm: '', jamTracks: [], nextOffset: null, - onNextPage: () => {} + onNextPage: () => { } }; export default JKJamTracksList; diff --git a/jam-ui/src/components/jamtracks/JKJamTracksSlider.js b/jam-ui/src/components/jamtracks/JKJamTracksSlider.js new file mode 100644 index 000000000..d79099208 --- /dev/null +++ b/jam-ui/src/components/jamtracks/JKJamTracksSlider.js @@ -0,0 +1,78 @@ +import React from 'react' +import PropTypes from 'prop-types' + +//import Swiper core and required modules +import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper' + +//import Swiper React components +import { Swiper, SwiperSlide } from 'swiper/react' + +//import Swiper styles +import 'swiper/swiper.scss' +import 'swiper/components/navigation/navigation.scss' +import 'swiper/components/pagination/pagination.scss' +import 'swiper/components/scrollbar/scrollbar.scss' + +import { Card, CardBody, CardHeader } from 'reactstrap' +import JKJamTrackItem from './JKJamTrackItem' + +SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]) + +const JKJamTracksSlider = ({ jamTracks, onNextPage, totalJamTracks }) => { + const [index, setIndex] = React.useState(1) + return ( + <> + setIndex(index + 1)} + onSlideNextTransitionEnd={swiper => { + if (swiper.isEnd) { + onNextPage() + } + }} + pagination={{ + clickable: true, + type: 'custom' + }} + navigation={{ + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + }} + > + {jamTracks && jamTracks.map((jamTrack) => ( + + + +

JamTrack

+ + + + + + + ))} + +
+
+ {totalJamTracks > 0 && ( +
+ JamTrack {index} of {totalJamTracks} +
+ )} +
+
+
+
+ + ) +} + +JKJamTracksSlider.propTypes = { + jamTracks: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired, + onNextPage: PropTypes.func.isRequired, + totalJamTracks: PropTypes.number.isRequired +} + +export default JKJamTracksSlider \ No newline at end of file diff --git a/jam-ui/src/components/page/JKPeopleSwiper.js b/jam-ui/src/components/page/JKPeopleSwiper.js index 566eb5908..42e0661f1 100644 --- a/jam-ui/src/components/page/JKPeopleSwiper.js +++ b/jam-ui/src/components/page/JKPeopleSwiper.js @@ -68,7 +68,7 @@ const JKPeopleSwiper = ({ people, goNextPage }) => { }; JKPeopleSwiper.propTypes = { - people: PropTypes.arrayOf(PropTypes.instanceOf(Object)), + people: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired, goNextPage: PropTypes.func }; diff --git a/jam-ui/src/components/shopping-cart/JKCheckout.js b/jam-ui/src/components/shopping-cart/JKCheckout.js index c54046a9f..3212ee448 100644 --- a/jam-ui/src/components/shopping-cart/JKCheckout.js +++ b/jam-ui/src/components/shopping-cart/JKCheckout.js @@ -115,7 +115,7 @@ const JKCheckout = () => { try { const userResp = await getUserDetail(options); const userData = await userResp.json(); - console.log('User Data:', userData); + //console.log('User Data:', userData); setHasRedeemableJamTrack(userData.has_redeemable_jamtrack); if (userData.has_recurly_account) { @@ -162,7 +162,7 @@ const JKCheckout = () => { }, [paymentMethod]); const onSubmit = async data => { - console.log('Form Data:', data); + //console.log('Form Data:', data); if (paymentMethod === 'credit-card' || paymentMethod === 'existing-card') { constructRecurlyAccount(data); } else if (paymentMethod === 'paypal') { @@ -171,7 +171,7 @@ const JKCheckout = () => { }; const constructRecurlyAccount = async data => { - console.log('Form Data:', data); + //console.log('Form Data:', data); if (paymentMethod === 'credit-card' && !isValidateCard(data)) { return; @@ -216,7 +216,7 @@ const JKCheckout = () => { try { const orderResp = await placeOrder(); const orderData = await orderResp.json(); - console.log('Order Data:', orderData); + //console.log('Order Data:', orderData); localStorage.setItem('lastPurchaseResponse', JSON.stringify(orderData)); deletePreserveBillingInfo(); history.push('/checkout/success'); @@ -238,12 +238,12 @@ const JKCheckout = () => { if (!isValid(cardNumber)) { _isValid = false; - console.log('Invalid Card Number'); + //console.log('Invalid Card Number'); setError('number', { type: 'manual', message: 'Invalid Card Number' }, { shouldFocus: false }); } if (!isExpirationDateValid(data.month, data.year)) { _isValid = false; - console.log('Invalid Expiration Date'); + //console.log('Invalid Expiration Date'); setError('month', { type: 'manual', message: 'Invalid Expiration Date' }, { shouldFocus: false }); setError('year', { type: 'manual', message: 'Invalid Expiration Date' }, { shouldFocus: false }); } @@ -274,7 +274,7 @@ const JKCheckout = () => { const handleOnCardNumberChange = e => { const cardNumber = e.target.value; - console.log('Formatted Card Number:', formatCardNumber(cardNumber)); + //console.log('Formatted Card Number:', formatCardNumber(cardNumber)); setCardNumber(formatCardNumber(cardNumber)); }; diff --git a/jam-ui/src/hooks/useShoppingCart.js b/jam-ui/src/hooks/useShoppingCart.js index 7dfb5a1c8..3654ccbdb 100644 --- a/jam-ui/src/hooks/useShoppingCart.js +++ b/jam-ui/src/hooks/useShoppingCart.js @@ -13,6 +13,9 @@ export const useShoppingCart = () => { const cartTotal = useMemo(() => { //calculate total price + if(shoppingCart.length === 0){ + return 0.00; + } const totalPrice = shoppingCart.reduce((acc, item) => acc + parseFloat(item.product_info.total_price), 0.00); return totalPrice; }, [shoppingCart]);