From 3677181e0931b26a71fa4b3e27f0c735854e3fea Mon Sep 17 00:00:00 2001 From: Nuwan Date: Thu, 30 Jan 2025 11:57:01 +0530 Subject: [PATCH] add jamtrack and artist landing pages --- .../e2e/jamtracks/my-jamtracks-page.cy.js | 2 +- .../components/affiliate/JKAffiliateLinks.js | 74 +++++++++++++++++-- .../components/dashboard/JKDashboardMain.js | 30 ++++---- .../jamtracks/JKJamTracksLanding.js | 16 ++++ .../src/components/jamtracks/JKMyJamTracks.js | 2 +- .../shopping-cart/JKCheckoutSuccess.js | 2 +- web/app/views/api_jam_tracks/show.rabl | 2 +- 7 files changed, 103 insertions(+), 25 deletions(-) create mode 100644 jam-ui/src/components/jamtracks/JKJamTracksLanding.js diff --git a/jam-ui/cypress/e2e/jamtracks/my-jamtracks-page.cy.js b/jam-ui/cypress/e2e/jamtracks/my-jamtracks-page.cy.js index efa950eb5..6d14a5128 100644 --- a/jam-ui/cypress/e2e/jamtracks/my-jamtracks-page.cy.js +++ b/jam-ui/cypress/e2e/jamtracks/my-jamtracks-page.cy.js @@ -32,7 +32,7 @@ describe('JamTracks Page', () => { cy.get('input[type="search"]').type('ba'); cy.wait('@getMyJamTracks_page1'); cy.get('[data-testid=myJamTrackList] a').first().click(); - cy.url().should('include', '/jamtracks/1'); + cy.url().should('include', '/jamtrack/1'); }); }) diff --git a/jam-ui/src/components/affiliate/JKAffiliateLinks.js b/jam-ui/src/components/affiliate/JKAffiliateLinks.js index 3eb877b3b..37e180940 100644 --- a/jam-ui/src/components/affiliate/JKAffiliateLinks.js +++ b/jam-ui/src/components/affiliate/JKAffiliateLinks.js @@ -3,10 +3,11 @@ import { Card, CardBody } from 'reactstrap'; import FalconCardHeader from '../common/FalconCardHeader'; import { useTranslation } from 'react-i18next'; import JKJamTracksAutoComplete from '../jamtracks/JKJamTracksAutoComplete'; -import { getJamTracks, getAffiliatePartnerData, autocompleteJamTracks } from '../../helpers/rest'; +import { getJamTracks, getJamTrackArtists, getAffiliatePartnerData, autocompleteJamTracks } from '../../helpers/rest'; import { useAuth } from '../../context/UserAuth'; import { useHistory } from 'react-router-dom'; import { useResponsive } from '@farfetch/react-context-responsive'; +import { Link } from 'react-router-dom'; const JKAffiliateLinks = () => { const { t } = useTranslation('affiliate'); @@ -16,6 +17,7 @@ const JKAffiliateLinks = () => { const [affiliatePartnerId, setAffiliatePartnerId] = useState('xxxxx'); const [affiliate, setAffiliate] = useState(null); const [jamTracks, setJamTracks] = useState([]); + const [jamTrackArtists, setJamTrackArtists] = useState([]); const [showDropdown, setShowDropdown] = useState(false); const [autoCompleteInputValue, setAutoCompleteInputValue] = useState(''); const [jamTracksNextPage, setJamTracksNextPage] = useState(null); @@ -42,11 +44,22 @@ const JKAffiliateLinks = () => { const resp = await getJamTracks(options); const data = await resp.json(); console.log('data', data); + setJamTrackArtists([]); setJamTracks(data.jamtracks); setJamTracksNextPage(data.next); } catch (error) {} }; + const fetchJamTrackArtists = async options => { + try { + const resp = await getJamTrackArtists(options); + const data = await resp.json(); + console.log('data', data); + setJamTracks([]); + setJamTrackArtists(data.artists); + } catch (error) {} + }; + const queryOptions = selected => { const options = { limit: 100 @@ -75,14 +88,25 @@ const JKAffiliateLinks = () => { if (!jamTrack) { return ''; } - return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtrack/landing/${jamTrack.plan_code}?affiliate=${affiliatePartnerId}`; + return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtracks/${encodeURIComponent(jamTrack.original_artist)}/${jamTrack.slug}?affiliate=${affiliatePartnerId}`; + }, [affiliatePartnerId]); + + const jamTrackArtistLink = useMemo(() => artist => { + if (!artist) { + return ''; + } + return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtracks/${encodeURIComponent(artist.original_artist)}?affiliate=${affiliatePartnerId}`; }, [affiliatePartnerId]); //autocomplete related code const handleOnSelect = selected => { console.log('onSelect', selected); const params = queryOptions(selected); - fetchJamTracks(params); + if(selected.type === 'artist') { + fetchJamTrackArtists(params); + }else { + fetchJamTracks(params); + } }; const handleOnEnter = queryStr => { @@ -132,18 +156,52 @@ const JKAffiliateLinks = () => {
{affiliate ? ( - + // + // {jamTrackLink(jamTrack)} + // + {jamTrackLink(jamTrack)} - + ) : ( - history.push('/affiliate/agreement')}> + // history.push('/affiliate/agreement')}> + // {jamTrackLink(jamTrack)} + // + {jamTrackLink(jamTrack)} - + )}
); - })} + })} + + {jamTrackArtists && + jamTrackArtists.map(artist => { + return ( +
+
+ {t('links.affiliate_link_for')} {artist.original_artist}: +
+
+ {affiliate ? ( + // + // {jamTrackArtistLink(artist)} + // + + {jamTrackArtistLink(artist)} + + ) : ( + // history.push('/affiliate/agreement')}> + // {jamTrackArtistLink(artist)} + // + + {jamTrackArtistLink(artist)} + + )} +
+
+ ); + })} ); diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js index c2e280997..a783adfd6 100644 --- a/jam-ui/src/components/dashboard/JKDashboardMain.js +++ b/jam-ui/src/components/dashboard/JKDashboardMain.js @@ -51,6 +51,7 @@ import JKCheckout from '../shopping-cart/JKCheckout'; import JKCheckoutSuccess from '../shopping-cart/JKCheckoutSuccess'; import JKMyJamTracks from '../jamtracks/JKMyJamTracks'; import JKJamTrackShow from '../jamtracks/JKJamTrackShow'; +import JKJamTracksLanding from '../jamtracks/JKJamTracksLanding'; //import loadable from '@loadable/component'; //const DashboardRoutes = loadable(() => import('../../layouts/JKDashboardRoutes')); @@ -121,15 +122,15 @@ function JKDashboardMain() { // }; const initJKScripts = () => { - + if (scriptLoaded.current) { return; } - + const app = window.JK.JamKazam(); - const jamServer = new window.JK.JamServer(app, function(event_type) { + const jamServer = new window.JK.JamServer(app, function (event_type) { console.log('EVENT_TYPE', event_type); }); jamServer.initialize(); @@ -139,11 +140,11 @@ function JKDashboardMain() { clientInit.init(); window.JK.JamServer.connect() // singleton here defined in JamServer.js - .done(function() { + .done(function () { console.log('Jamserver connected...'); //_initAfterConnect(true); }) - .fail(function() { + .fail(function () { console.log('Jamserver connection error...'); //_initAfterConnect(false); }); @@ -158,7 +159,7 @@ function JKDashboardMain() { }; const registerTextMessageCallback = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function(header, payload) { + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function (header, payload) { console.log('registerTextMessageCallback payload', payload); //console.log('registerTextMessageCallback header', header); const msg = { @@ -190,7 +191,7 @@ function JKDashboardMain() { }; const registerChatMessageCallback = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function(header, payload) { + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function (header, payload) { console.log('registerChatMessageCallback ' + JSON.stringify(payload)); if (payload !== undefined && payload.sender_id !== window.currentUser.id) { if (visibilityState === 'hidden' && Notification.permission === 'granted') { @@ -199,7 +200,7 @@ function JKDashboardMain() { body: `${payload.sender_name}: ${truncate(payload.msg, 100)}` //icon: `${process.env.REACT_APP_CLIENT_BASE_URL}/assets/img/jamkazam-logo.png` }); - notification.onclick = function(event) { + notification.onclick = function (event) { event.preventDefault(); // prevent the browser from focusing the Notification's tab window.focus(); event.target.close(); @@ -219,13 +220,13 @@ function JKDashboardMain() { }; const registerFriendRequest = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function(header, payload) { + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function (header, payload) { handleNotification(payload, header.type); }); }; const registerFriendRequestAccepted = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function( + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function ( header, payload ) { @@ -236,7 +237,7 @@ function JKDashboardMain() { }; const registerSubscriptionCallback = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.SUBSCRIPTION_MESSAGE, function(header, payload) { + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.SUBSCRIPTION_MESSAGE, function (header, payload) { console.log('registerSubscriptionCallback payload', payload); console.log('registerSubscriptionCallback header', header); handleSubscriptionMessage(payload); @@ -268,7 +269,7 @@ function JKDashboardMain() { }; const handleSubscriptionMessage = payload => { - + } useScript(`${process.env.REACT_APP_CLIENT_BASE_URL}/client_scripts`, initJKScripts); @@ -299,7 +300,10 @@ function JKDashboardMain() { - + + + + diff --git a/jam-ui/src/components/jamtracks/JKJamTracksLanding.js b/jam-ui/src/components/jamtracks/JKJamTracksLanding.js new file mode 100644 index 000000000..3c7bf31bc --- /dev/null +++ b/jam-ui/src/components/jamtracks/JKJamTracksLanding.js @@ -0,0 +1,16 @@ +import React from 'react' +import { useParams, Link } from 'react-router-dom'; + +const JKJamTracksLanding = () => { + const { artist, song_slug } = useParams(); + return ( +
+

JKJamTracksLanding

+

artist: {artist}

+

song_slug: {song_slug}

+ Back to JamTracks +
+ ) +} + +export default JKJamTracksLanding \ No newline at end of file diff --git a/jam-ui/src/components/jamtracks/JKMyJamTracks.js b/jam-ui/src/components/jamtracks/JKMyJamTracks.js index 0dd9db354..712f9be78 100644 --- a/jam-ui/src/components/jamtracks/JKMyJamTracks.js +++ b/jam-ui/src/components/jamtracks/JKMyJamTracks.js @@ -100,7 +100,7 @@ const JKMyJamTracks = () => { jamTracks.map((jamTrack, index) => (
(jamTracks.length - 1 === index ? setLastJamTrackRef(ref) : null)}> - {jamTrack.name} + {jamTrack.name} {jamTrack.original_artist && ` by ${jamTrack.original_artist}`}
diff --git a/jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js b/jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js index bcf05b340..ea7021bd9 100644 --- a/jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js +++ b/jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js @@ -43,7 +43,7 @@ const JKCheckoutSuccess = () => { )}

{jamtrack && ( - + {t('open_jamtrack')} )} diff --git a/web/app/views/api_jam_tracks/show.rabl b/web/app/views/api_jam_tracks/show.rabl index 839e26e64..19eb2c0c8 100644 --- a/web/app/views/api_jam_tracks/show.rabl +++ b/web/app/views/api_jam_tracks/show.rabl @@ -1,6 +1,6 @@ object @jam_track -attributes :id, :name, :description, :recording_type, :original_artist, :songwriter, :publisher, :sales_region, :price, :version, :duration, :year, :plan_code, :allow_free, :download_price, :upgrade_price +attributes :id, :name, :description, :recording_type, :original_artist, :songwriter, :publisher, :sales_region, :price, :version, :duration, :year, :plan_code, :allow_free, :download_price, :upgrade_price, :slug node :genres do |item| item.genres.select(:description).map(&:description)