seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

jamtracks related misc fixes

This commit is contained in:
Nuwan 2024-12-25 00:04:11 +05:30
parent c163d6b0ba
commit 5673d9b21e
14 changed files with 294 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js
View File

@ -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')
});
});
});
});

4
jam-ui/src/components/dashboard/JKDashboardMain.js
View File

@ -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() {
<PrivateRoute path="/affiliate/signups" component={JKAffiliateSignups} />
<PrivateRoute path="/affiliate/earnings" component={JKAffiliateEarnings} />
<PrivateRoute path="/affiliate/agreement" component={JKAffiliateAgreement} />
<PrivateRoute path="/jamtracks/:id" component={JKJamTrack} />
<PrivateRoute path="/jamtracks/:id" component={JKJamTrackShow} />
<PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
<PrivateRoute path="/my-jamtracks" component={JKMyJamTracks} />
<PrivateRoute path="/shopping-cart" component={JKShoppingCart} />

57
jam-ui/src/components/jamtracks/JKJamTrackItem.js Normal file
View File

@ -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 (
<>
<JamTrackPreviewProvider>
{greaterThan.sm ? (
<tr key={`jamtrck-preview-row-${jamTrack.id}`}>
<td className="track-name-col">
{jamTrack.name} <br />
<span className='fs--1'>by {jamTrack.original_artist}</span>
</td>
<td className="track-tracks-col fs--1">
<JKJamTrackPreview jamTrack={jamTrack} />
</td>
<td className="purchase-button-col text-center" align='center'>
<JKJamTrackPurchaseButton jamTrack={jamTrack} />
</td>
</tr>
) : (
<Row>
<Col xs={12} className="mb-3">
<h5>
{jamTrack.name}
</h5>
<h6 className="fs--1">
by {jamTrack.original_artist}
</h6>
</Col>
<Col xs={12} className="mb-3">
<JKJamTrackPreview jamTrack={jamTrack} />
</Col>
<Col xs={12} className="mb-3">
<JKJamTrackPurchaseButton jamTrack={jamTrack} />
</Col>
</Row>
)}
</JamTrackPreviewProvider>
</>
)
}
JKJamTrackItem.propTypes = {
jamTrack: PropTypes.object.isRequired
}
export default JKJamTrackItem

35
jam-ui/src/components/jamtracks/JKJamTrackPreview.js
View File

@ -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 (
<Container>
<Row>
{jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
<Fragment key={track.id} >
<Col className={ index + 1 > 6 && !expanded ? 'd-none' : null}>
<>
{greaterThan.sm ? (
<Row>
{jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
<Fragment key={track.id} >
<Col className={index + 1 > 6 && !expanded ? 'd-none' : null}>
<JKJamTrackTrack track={track} />
</Col>
{(index + 1) % 2 === 0 && <div className="w-100" />}
{(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 && <div className="col" />}
</Fragment>
))}
</Row>
) : (
<Row>
{jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
<Col key={track.id} xs={12} className={index + 1 > 6 && !expanded ? 'd-none mb-3' : 'mb-3'}>
<JKJamTrackTrack track={track} />
</Col>
{(index + 1) % 2 === 0 && <div className="w-100" />}
{(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 && <div className="col" />}
</Fragment>
))}
</Row>
))}
</Row>
)}
{jamTrack.tracks.length > 6 && (
<Row>
<Col>
@ -31,7 +44,7 @@ const JKJamTrackPreview = ({ jamTrack }) => {
</Col>
</Row>
)}
</Container>
</>
);
};

3
jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js
View File

@ -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);
}

8
jam-ui/src/components/jamtracks/JKJamTrack.js → jam-ui/src/components/jamtracks/JKJamTrackShow.js
View File

@ -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 = () => {
<FalconCardHeader title={t('jamtrack.player.title')} titleClass="font-weight-semi-bold" />
<CardBody className="pt-3">{jamTrack && <JKJamTrackPlayer />}</CardBody>
</Card>
<Card className="mx-auto">
<Card className="mx-auto mb-4">
<FalconCardHeader title={t('jamtrack.my_mixes.title')} titleClass="font-weight-semi-bold" />
<CardBody className="pt-3">{jamTrack && <JKMyJamTrackMixes />}</CardBody>
</Card>
</Col>
<Col sm={12} md={4}>
<Card className="mx-auto">
<Card className="mx-auto mb-4">
<FalconCardHeader title={t('jamtrack.create_mix.title')} titleClass="font-weight-semi-bold" />
<CardBody className="pt-3">{jamTrack && <JKCreateCustomMix />}</CardBody>
</Card>
@ -89,4 +89,4 @@ const JKJamTrack = () => {
);
};
export default JKJamTrack;
export default JKJamTrackShow;

3
jam-ui/src/components/jamtracks/JKJamTrackTrack.js
View File

@ -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 }) => {
</span>
{trackInfo && (
<>
<span className="mr-1 pb-1">
<span className="mr-1 pb-1" style={{ width: '30px' }}>
<JKInstrumentIcon instrumentId={trackInfo.instrumentId} instrumentName={trackInfo.instrumentDescription} />
</span>
<span>

2
jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js
View File

@ -100,7 +100,7 @@ const JKJamTracksAutoComplete = ({
};
return (
<Row className="mb-2">
<Row className="">
<Col md={12}>
<FormGroup className="mb-3">
<div className="d-flex align-items-center">

111
jam-ui/src/components/jamtracks/JKJamTracksFilter.js
View File

@ -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 (
<Card>
<FalconCardHeader title={t('search.page_title')} titleClass="font-weight-bold" />
@ -139,6 +98,7 @@ const JKJamTracksFilter = () => {
<JKJamTrackFilterLinks shoppingCart={shoppingCart} wrapperClassNames='d-flex flex-column' shoppingCartClassNames="col mt-1 mb-2" downloadLinkClassNames='col' />
</Row>
)}
<Row>
<Col>
<JKJamTracksAutoComplete
@ -154,30 +114,51 @@ const JKJamTracksFilter = () => {
</Col>
{greaterThan.sm && (
<Col>
<JKJamTrackFilterLinks
shoppingCart={shoppingCart}
wrapperClassNames="d-flex justify-content-end"
shoppingCartClassNames="ml-3 mr-1"
/>
<JKJamTrackFilterLinks
shoppingCart={shoppingCart}
wrapperClassNames="d-flex justify-content-end"
shoppingCartClassNames="ml-3 mr-1"
/>
</Col>
)}
</Row>
{/* <div className="mb-3">
<JKJamTrackArtists
artists={artists}
<>
{selected?.type && searchTerm.length && jamTracks.length > 0 ? (
<Row className="mb-2">
<Col>
<strong>
{t('search.search_results.for_selection')} {selected?.type} "{searchTerm}"
</strong>
</Col>
</Row>
) : (
searchTerm.length > 0 &&
jamTracks.length > 0 && (
<Row className="mb-2">
<Col>
<strong>{t('search.search_results.for_search_term')} "{searchTerm}"</strong>
</Col>
</Row>
)
)}
</>
{greaterThan.sm ? (
<JKJamTracksList
selectedType={selected?.type}
searchTerm={searchTerm}
onSelect={handleOnSelectArtist}
showArtists={showArtists}
jamTracks={jamTracks}
nextOffset={nextOffset}
onNextPage={handleOnNextJamTracksPage}
/>
</div> */}
<JKJamTracksList
selectedType={selected?.type}
searchTerm={searchTerm}
jamTracks={jamTracks}
nextOffset={nextOffset}
onNextPage={handleOnNextJamTracksPage}
/>
) : (
<div className="swiper-container d-block d-md-none">
<JKJamTracksSlider jamTracks={jamTracks} onNextPage={handleOnNextJamTracksPage} totalJamTracks={totalJamTracks} />
</div>
)
}
</CardBody>
</Card>
);

42
jam-ui/src/components/jamtracks/JKJamTracksList.js
View File

@ -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 ? (
<Row className="mb-2">
<Col>
<strong>
{t('search.search_results.for_selection')} {selectedType} "{searchTerm}"
</strong>
</Col>
</Row>
) : (
searchTerm.length > 0 &&
jamTracks.length > 0 && (
<Row className="mb-2">
<Col>
<strong>{t('search.search_results.for_search_term')} "{searchTerm}"</strong>
</Col>
</Row>
)
)}
{jamTracks.length > 0 && (
<Row>
<Col>
@ -40,22 +23,9 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
</tr>
</thead>
<tbody>
<JamTrackPreviewProvider>
{jamTracks.map((jamTrack, index) => (
<tr key={`jamtrck-preview-row-${jamTrack.id}`}>
<td className="track-name-col">
{jamTrack.name} <br />
<span className='fs--1'>by {jamTrack.original_artist}</span>
</td>
<td className="track-tracks-col fs--1">
<JKJamTrackPreview jamTrack={jamTrack} />
</td>
<td className="purchase-button-col text-center" align='center'>
<JKJamTrackPurchaseButton jamTrack={jamTrack} />
</td>
</tr>
))}
</JamTrackPreviewProvider>
{jamTracks.map((jamTrack, index) => (
<JKJamTrackItem key={index} jamTrack={jamTrack} />
))}
</tbody>
</Table>
</Col>
@ -65,7 +35,7 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
<Row>
<Col>
<Button color="primary" onClick={onNextPage} data-testid="moreBtn">
{t('search.list.load_more')}
{t('search.list.load_more')}
</Button>
</Col>
</Row>
@ -87,7 +57,7 @@ JKJamTracksList.defaultProps = {
searchTerm: '',
jamTracks: [],
nextOffset: null,
onNextPage: () => {}
onNextPage: () => { }
};
export default JKJamTracksList;

78
jam-ui/src/components/jamtracks/JKJamTracksSlider.js Normal file
View File

@ -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 (
<>
<Swiper
spaceBetween={0}
slidesPerView={1}
onSlideChange={() => 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) => (
<SwiperSlide key={`jamtrack-swiper-item-${jamTrack.id}`}>
<Card className="swiper-card">
<CardHeader className="bg-200 text-center">
<h4 className="mt-1">JamTrack</h4>
</CardHeader>
<CardBody>
<JKJamTrackItem jamTrack={jamTrack} viewMode="swipe" />
</CardBody>
</Card>
</SwiperSlide>
))}
</Swiper>
<div className="py-4 px-6 bg-white border-top w-100 fixed-bottom">
<div className="swiper-pagination d-flex justify-content-center text-center ml-auto mr-auto"
style={{ width: '100%', position: 'relative' }}>
{totalJamTracks > 0 && (
<div className='fs-1'>
JamTrack {index} of {totalJamTracks}
</div>
)}
</div>
<div className="swiper-button-prev" />
<div className="swiper-button-next" />
</div>
</>
)
}
JKJamTracksSlider.propTypes = {
jamTracks: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,
onNextPage: PropTypes.func.isRequired,
totalJamTracks: PropTypes.number.isRequired
}
export default JKJamTracksSlider

2
jam-ui/src/components/page/JKPeopleSwiper.js
View File

@ -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
};

14
jam-ui/src/components/shopping-cart/JKCheckout.js
View File

@ -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));
};

3
jam-ui/src/hooks/useShoppingCart.js
View File

@ -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]);