-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Free Listings + Paid Ads: Add the paid ads previews to the boost product listings section #1650
Changes from 13 commits
8735780
1bde4a9
7e1d5a5
ca99756
88cfb40
87ce3bc
ced245d
1aa32c6
3b73e32
f3cc043
05779b9
3279a21
6fe6ba7
8e72981
656aeb9
c6908de
631e8fe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { _x } from '@wordpress/i18n'; | ||
import { useState, useCallback, useEffect } from '@wordpress/element'; | ||
import { CSSTransition, TransitionGroup } from 'react-transition-group'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import useCountdown from '.~/hooks/useCountdown'; | ||
import MockupShopping from './mockup-shopping'; | ||
import MockupYouTube from './mockup-youtube'; | ||
import MockupSearch from './mockup-search'; | ||
import MockupGmail from './mockup-gmail'; | ||
import MockupDisplay from './mockup-display'; | ||
import MockupMap from './mockup-map'; | ||
import productSampleImageURL from './images/product-sample-image.jpg'; | ||
import shopSampleLogoURL from './images/shop-sample-logo.png'; | ||
import './campaign-preview.scss'; | ||
|
||
/** | ||
* @typedef { import("./index.js").AdPreviewData } AdPreviewData | ||
*/ | ||
|
||
/** | ||
* @type {AdPreviewData} | ||
*/ | ||
const fallbackProduct = { | ||
title: _x( | ||
'White tee', | ||
'A sample product title for demonstrating the paid ads shown on Google services.', | ||
'google-listings-and-ads' | ||
), | ||
price: _x( | ||
'$10.00', | ||
'A sample product price for demonstrating the paid ads shown on Google services.', | ||
'google-listings-and-ads' | ||
), | ||
shopName: _x( | ||
`Colleen's Tee Store`, | ||
'A sample name of an online shop for demonstrating the paid ads shown on Google services.', | ||
'google-listings-and-ads' | ||
), | ||
coverUrl: productSampleImageURL, | ||
shopLogoUrl: shopSampleLogoURL, | ||
shopUrl: 'colleensteestore.com', | ||
}; | ||
|
||
const mockups = [ | ||
MockupShopping, | ||
MockupYouTube, | ||
MockupSearch, | ||
MockupMap, | ||
MockupDisplay, | ||
MockupGmail, | ||
]; | ||
|
||
export default function CampaignPreview() { | ||
const [ index, setIndex ] = useState( 0 ); | ||
const { second, callCount, startCountdown } = useCountdown(); | ||
|
||
// TODO: Fetch required data from API. | ||
const product = fallbackProduct; | ||
|
||
const moveBy = useCallback( ( step ) => { | ||
setIndex( ( currentIndex ) => { | ||
return ( currentIndex + step + mockups.length ) % mockups.length; | ||
} ); | ||
}, [] ); | ||
|
||
useEffect( () => { | ||
if ( second === 0 ) { | ||
if ( callCount > 0 ) { | ||
moveBy( 1 ); | ||
} | ||
startCountdown( 5 ); | ||
} | ||
}, [ second, callCount, startCountdown, moveBy ] ); | ||
Comment on lines
+61
to
+79
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💅 This maybe can be wrapped in some kind of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wrapping this to another custom hook sometimes also increases the complexity. In this case, the |
||
|
||
const Mockup = mockups[ index ]; | ||
|
||
return ( | ||
<TransitionGroup className="gla-campaign-preview"> | ||
<CSSTransition | ||
key={ index } | ||
classNames="gla-campaign-preview__transition-blur" | ||
timeout={ 500 } | ||
> | ||
<Mockup product={ product } /> | ||
</CSSTransition> | ||
</TransitionGroup> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❓ Just curiosity. Not an issue. Why is needed to add this dependency here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR uses the same
react-transition-group
dependency as the one@woocommerce/components
depends on, soreact-transition-group
is not listed in this repo's package.json file. Therefore, this change is to let eslint know it's one of the core modules and to prevent from the eslint errorimport/no-extraneous-dependencies
.