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

fix errors in JamTracks page and shopping cart page

This commit is contained in:
Nuwan 2024-11-26 18:55:09 +05:30
parent 8bbdedd082
commit 78debaa8ab
17 changed files with 127 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jam-ui/public/css/theme-dark-rtl.css
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme-dark-rtl.css.map
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme-dark.css
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme-dark.css.map
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme-rtl.css
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme-rtl.css.map
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme.css
View File

File diff suppressed because one or more lines are too long

2
jam-ui/public/css/theme.css.map
View File

File diff suppressed because one or more lines are too long

2
jam-ui/src/assets/scss/custom/_user.scss
View File

@ -152,7 +152,7 @@
.jamtrack-track {
position: relative;
background: #ddd;
// background: #ddd;
}
.jamtrack-track.jamtrack-track-0 {

8
jam-ui/src/components/jamtracks/JKJamTrackArtists.js
View File

@ -1,8 +1,10 @@
import React, { useState } from 'react';
import { Row, Col } from 'reactstrap';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
const JKJamTrackArtists = ({ artists, showArtists, onSelect }) => {
const { t } = useTranslation('jamtracks');
const [expanded, setExpanded] = useState(false);
const handleClick = artist => {
onSelect(artist);
@ -18,7 +20,7 @@ const JKJamTrackArtists = ({ artists, showArtists, onSelect }) => {
<>
<Row>
<Col>
<strong>Search Results: Artists</strong>
<strong>{t('search.search_results.artists')}</strong>
</Col>
</Row>
{artists.length > 0 ? (
@ -43,7 +45,7 @@ const JKJamTrackArtists = ({ artists, showArtists, onSelect }) => {
<Row className='mt-1 mb-1'>
<Col>
<a href="#" onClick={toggleMoreArtists}>
{expanded ? 'Show fewer artists' : 'Show all artists'}
{expanded ? t('search.search_results.show_fewer_artists') : t('search.search_results.show_more_artists')}
</a>
</Col>
</Row>
@ -51,7 +53,7 @@ const JKJamTrackArtists = ({ artists, showArtists, onSelect }) => {
</>
) : (
<Row className="mb-2">
<Col>No matching artists</Col>
<Col>{t('search.search_results.no_matching_artists')}</Col>
</Row>
)}
</>

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

@ -1,16 +1,20 @@
import React from 'react';
import { Button } from 'reactstrap';
import PropTypes from 'prop-types';
import { addJamtrackToShoppingCart } from '../../helpers/rest';
import { useHistory } from 'react-router-dom';
import { useAuth } from '../../context/UserAuth';
import { toast } from 'react-toastify';
import { useShoppingCart } from '../../hooks/useShoppingCart';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import JKTooltip from '../common/JKTooltip';
const JKJamTrackPurchaseButton = ({ jamTrack }) => {
const history = useHistory();
const { currentUser } = useAuth();
const { addCartItem } = useShoppingCart();
const { t } = useTranslation('jamtracks');
const addToCart = async () => {
const options = {
@ -18,11 +22,11 @@ const JKJamTrackPurchaseButton = ({ jamTrack }) => {
variant: 'full'
};
if (await addCartItem(options)) {
toast.success('JamTrack added to cart');
toast.success(t('search.list.add_success_alert'));
history.push('/shopping-cart');
} else {
console.log('Add to Cart Error');
toast.error('Error adding to cart');
toast.error(t('search.list.add_error_alert'));
}
};
@ -30,23 +34,22 @@ const JKJamTrackPurchaseButton = ({ jamTrack }) => {
<>
{jamTrack.purchaed ? (
<Button color="light" size="sm" className="mr-1">
Purchased
{t('search.list.purchased')}
</Button>
) : jamTrack.is_free && currentUser && currentUser.show_free_jamtrack ? (
<Button color="primary" onClick={addToCart} size="sm" className="mr-1">
Get It Free!
</Button>
) : jamTrack.added_cart ? (
) : jamTrack.allow_free && currentUser && currentUser.show_free_jamtrack ? (
<>
<Button color="light" size="sm" className="mr-1">
Already in Cart
<Button color="primary" onClick={addToCart} size="sm" className="mr-1">
{t('search.list.get_it_free')}
</Button>
<JKTooltip title={t('search.list.get_it_free_help_text')} />
</>
) : jamTrack.added_cart ? (
<Link to="/shopping-cart">{t('search.list.already_in_cart')}</Link>
) : (
<>
<div className="fs-1">$ {jamTrack.download_price}</div>
<Button color="primary" size="sm" className="mr-1" onClick={addToCart}>
Add to Cart
{t('search.list.add_to_cart')}
</Button>
</>
)}

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

@ -111,7 +111,7 @@ const JKJamTrackTrack = ({ track }) => {
</span>
{trackInfo && (
<>
<span className="mr-1">
<span className="mr-1 pb-1">
<JKInstrumentIcon instrumentId={trackInfo.instrumentId} instrumentName={trackInfo.instrumentDescription} />
</span>
<span>

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

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Card, CardBody, Row, Col } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
import { useTranslation } from 'react-i18next';
@ -6,6 +7,9 @@ import JKJamTracksAutoComplete from './JKJamTracksAutoComplete';
import { getJamTracks, getJamTrackArtists, autocompleteJamTracks } from '../../helpers/rest';
import JKJamTrackArtists from './JKJamTrackArtists';
import JKJamTracksList from './JKJamTracksList';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useShoppingCart } from '../../hooks/useShoppingCart';
import { useResponsive } from '@farfetch/react-context-responsive';
const JKJamTracksFilter = () => {
const { t } = useTranslation('jamtracks');
@ -19,6 +23,12 @@ const JKJamTracksFilter = () => {
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) {
@ -46,7 +56,7 @@ const JKJamTracksFilter = () => {
return options;
};
const handleOnSelect = async (selected) => {
const handleOnSelect = async selected => {
setPage(1);
setArtists([]);
setJamTracks([]);
@ -57,7 +67,7 @@ const JKJamTracksFilter = () => {
await fetchJamTracks(params);
};
const handleOnEnter = async(queryStr) => {
const handleOnEnter = async queryStr => {
setPage(1);
setArtists([]);
setJamTracks([]);
@ -69,7 +79,7 @@ const JKJamTracksFilter = () => {
await fetchJamTracks(params);
};
const handleOnSelectArtist = async(artist) => {
const handleOnSelectArtist = async artist => {
setPage(1);
const selectedOpt = {
type: 'artist',
@ -84,7 +94,7 @@ const JKJamTracksFilter = () => {
const currentQuery = selected ? selected : searchTerm;
const params = queryOptions(currentQuery);
await fetchJamTracks(params);
}
};
// const fetchJamTracks = options => {
// getJamTracks(options)
@ -102,8 +112,7 @@ const JKJamTracksFilter = () => {
// });
// };
const fetchJamTracks = async(options) => {
const fetchJamTracks = async options => {
try {
console.log('fetchJamTracks', options);
const resp = await getJamTracks(options);
@ -111,12 +120,10 @@ const JKJamTracksFilter = () => {
console.log('jamtracks', data);
setJamTracks(prev => [...prev, ...data.jamtracks]);
setNextOffset(data.next);
} catch (error) {
console.error('error', error);
}
}
};
const fetchArtists = query => {
const options = {
@ -142,6 +149,11 @@ const JKJamTracksFilter = () => {
<Card>
<FalconCardHeader title={t('search.page_title')} titleClass="font-weight-bold" />
<CardBody className="pt-3">
{!greaterThan.sm && (
<Row>
<JKJamTrackFilterLinks shoppingCart={shoppingCart} wrapperClassNames='d-flex flex-column' shoppingCartClassNames="col mt-1 mb-2" downloadLinkClassNames='col' />
</Row>
)}
<Row>
<Col>
<JKJamTracksAutoComplete
@ -155,14 +167,15 @@ const JKJamTracksFilter = () => {
inputPlaceholder={t('search.search_input.placeholder')}
/>
</Col>
<Col className="text-right">
<span>
Download JamTracks catalog as a{' '}
<a data-testid="download-pdf" href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.pdf">
<strong>PDF file</strong>
</a>
</span>
</Col>
{greaterThan.sm && (
<Col>
<JKJamTrackFilterLinks
shoppingCart={shoppingCart}
wrapperClassNames="d-flex justify-content-end"
shoppingCartClassNames="ml-3 mr-1"
/>
</Col>
)}
</Row>
<div className="mb-3">
@ -173,10 +186,40 @@ const JKJamTracksFilter = () => {
showArtists={showArtists}
/>
</div>
<JKJamTracksList selectedType={selected?.type} searchTerm={searchTerm} jamTracks={jamTracks} nextOffset={nextOffset} onNextPage={handleOnNextJamTracksPage} />
<JKJamTracksList
selectedType={selected?.type}
searchTerm={searchTerm}
jamTracks={jamTracks}
nextOffset={nextOffset}
onNextPage={handleOnNextJamTracksPage}
/>
</CardBody>
</Card>
);
};
const JKJamTrackFilterLinks = ({ shoppingCart, wrapperClassNames, shoppingCartClassNames, downloadLinkClassNames }) => {
return (
<div className={wrapperClassNames}>
<div className={downloadLinkClassNames}>
Download JamTracks catalog as a{' '}
<a
data-testid="download-pdf"
href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.pdf"
>
<strong>PDF file</strong>
</a>
</div>
{shoppingCart.length > 0 && (
<div className={shoppingCartClassNames}>
<Link to="shopping-cart" className="btn btn-primary btn-sm">
<FontAwesomeIcon icon="shopping-cart" className="mr-1" />
View Cart ({shoppingCart.length})
</Link>
</div>
)}
</div>
);
};
export default JKJamTracksFilter;

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

@ -4,15 +4,17 @@ import JKJamTrackPreview from './JKJamTrackPreview';
import JKJamTrackPurchaseButton from './JKJamTrackPurchaseButton';
import { JamTrackPreviewProvider } from '../../context/JamTrackPreviewContext';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNextPage }) => {
const { t } = useTranslation('jamtracks');
return (
<>
{selectedType && searchTerm.length && jamTracks.length > 0 ? (
<Row className="mb-2">
<Col>
<strong>
Search Results: JamTracks for {selectedType} "{searchTerm}"
{t('search.search_results.for_selection')} {selectedType} "{searchTerm}"
</strong>
</Col>
</Row>
@ -21,7 +23,7 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
jamTracks.length > 0 && (
<Row className="mb-2">
<Col>
<strong>Search Results: JamTracks including "{searchTerm}"</strong>
<strong>{t('search.search_results.for_search_term')} "{searchTerm}"</strong>
</Col>
</Row>
)
@ -32,22 +34,22 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
<Table striped bordered className="fs--1" data-testid="jamtracks-table">
<thead className="bg-200 text-900">
<tr>
<th width="30%">Song</th>
<th width="55%">Tracks</th>
<th>Shop</th>
<th width="30%">{t('search.list.song')}</th>
<th width="55%">{t('search.list.tracks')}</th>
<th>{t('search.list.shop')}</th>
</tr>
</thead>
<tbody>
<JamTrackPreviewProvider>
{jamTracks.map((jamTrack, index) => (
<tr key={`jamtrck-preview-row-${jamTrack.id}`}>
<td className='track-name-col'>
<td className="track-name-col">
{jamTrack.name} by {jamTrack.original_artist}
</td>
<td className='track-tracks-col'>
<td className="track-tracks-col">
<JKJamTrackPreview jamTrack={jamTrack} />
</td>
<td className='purchase-button-col'>
<td className="purchase-button-col">
<JKJamTrackPurchaseButton jamTrack={jamTrack} />
</td>
</tr>
@ -62,7 +64,7 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
<Row>
<Col>
<Button color="primary" onClick={onNextPage} data-testid="moreBtn">
Load More
{t('search.list.load_more')}
</Button>
</Col>
</Row>
@ -76,7 +78,7 @@ JKJamTracksList.propTypes = {
searchTerm: PropTypes.string,
jamTracks: PropTypes.array,
nextOffset: PropTypes.number,
onNextPage: PropTypes.func,
onNextPage: PropTypes.func
};
JKJamTracksList.defaultProps = {

21
jam-ui/src/i18n/locales/en/jamtracks.json
View File

@ -4,6 +4,27 @@
"search_input": {
"title": "Search",
"placeholder": "Search by artist, song, style, or keyword"
},
"search_results": {
"artists": "Search Results: Artists",
"show_fewer_artists": "Show Fewer Artists",
"show_more_artists": "Show More Artists",
"no_matching_artists": "No matching artists found.",
"for_selection": "Search Results: JamTracks for",
"for_search_term": "Search Results: JamTracks including"
},
"list": {
"song": "Song",
"tracks": "Tracks",
"shop": "Shop",
"load_more": "Load More",
"get_it_free_help_text": "Click this button to get your first JamTrack free.",
"purchased": "Purchased",
"get_it_free": "Get it Free!",
"add_to_cart": "Add to Cart",
"already_in_cart": "Already in Cart",
"add_success_alert": "JamTrack was added to cart successfully.",
"add_error_alert": "There was an error adding the JamTrack to the cart."
}
},
"my": {

1
web/app/views/api_shopping_carts/add_gift_card.rabl
View File

@ -1,3 +1,4 @@
object @cart
extends "api_shopping_carts/show"
node :show_free_jamtrack do

2
web/app/views/api_shopping_carts/add_jamtrack.rabl
View File

@ -1,3 +1,5 @@
object @cart
extends "api_shopping_carts/show"
node :show_free_jamtrack do