Skip to content

Commit 9e0593e

Browse files
ksereksere
authored
Merge pull request #29 from saucal/feature/landing-page
Feature/landing page
2 parents 3c9953c + 80ca87f commit 9e0593e

5 files changed

Lines changed: 239 additions & 6 deletions

File tree

‎assets/source/setup-guide/app/style.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,3 +360,68 @@ $root: ".woocommerce-setup-guide";
360360
}
361361
}
362362

363+
.pin4wc-landing-page {
364+
365+
&__welcome-section {
366+
367+
.components-flex {
368+
padding: 36px 0;
369+
370+
&__block {
371+
margin: 0;
372+
373+
&.content-block {
374+
padding: 20px 64px;
375+
flex: 0 0 50%;
376+
377+
p:not(:last-child) {
378+
margin-bottom: 16px;
379+
}
380+
}
381+
382+
&.image-block {
383+
align-items: center;
384+
display: flex;
385+
386+
img {
387+
height: 100%;
388+
object-fit: cover;
389+
width: 100%;
390+
}
391+
}
392+
}
393+
}
394+
}
395+
396+
&__features-section {
397+
398+
.components-flex {
399+
gap: 64px;
400+
padding: 50px 64px;
401+
402+
&__block {
403+
text-align: center;
404+
margin: 0;
405+
406+
img {
407+
border-radius: 100px;
408+
height: 100px;
409+
margin-bottom: 32px;
410+
object-fit: cover;
411+
width: 100px;
412+
}
413+
414+
p:not(:last-child) {
415+
margin-bottom: 16px;
416+
}
417+
}
418+
}
419+
}
420+
421+
&__faq-section {
422+
423+
h2 {
424+
font-weight: 700;
425+
}
426+
}
427+
}

‎assets/source/setup-guide/app/views/LandingPageApp.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
import {
6+
Button,
7+
Card,
8+
Flex,
9+
FlexBlock,
10+
Panel,
11+
PanelBody,
12+
PanelRow,
13+
__experimentalText as Text
14+
} from '@wordpress/components';
15+
import {
16+
updateQueryString,
17+
} from '@woocommerce/navigation';
18+
19+
/**
20+
* Internal dependencies
21+
*/
22+
23+
const LandingPageApp = () => {
24+
const { welcome, features, faq_items: faqItems } = wcSettings.pin4wc.landing_page;
25+
26+
return (
27+
<div className="pin4wc-landing-page">
28+
<Card className="woocommerce-table pin4wc-landing-page__welcome-section">
29+
<Flex>
30+
<FlexBlock className="content-block">
31+
<Text variant="title.medium">{ welcome.title }</Text>
32+
33+
<Text variant="body">{ welcome.text }</Text>
34+
35+
<Text variant="body">
36+
<Button
37+
isPrimary
38+
onClick={() => updateQueryString({ view: 'wizard' } ) }
39+
>
40+
{ __( 'Get started', 'pinterest-for-woocommerce' ) }
41+
</Button>
42+
</Text>
43+
44+
<Text variant="body">{ __( 'By clicking ‘Get started’, you agree to our', 'pinterest-for-woocommerce' ) } <a href={ welcome.tos_link } target="_blank">{ __( 'Terms of Service', 'pinterest-for-woocommerce' ) }</a>.</Text>
45+
</FlexBlock>
46+
<FlexBlock className="image-block">
47+
<img src={ welcome.image_url } />
48+
</FlexBlock>
49+
</Flex>
50+
</Card>
51+
52+
<Card className="woocommerce-table pin4wc-landing-page__features-section">
53+
<Flex justify="center" align="top">
54+
{
55+
features.map( (item, index) => (
56+
<FlexBlock key={index}>
57+
<img src={ item.image_url } />
58+
<Text variant="subtitle">{ item.title }</Text>
59+
<Text variant="body"
60+
dangerouslySetInnerHTML={ {
61+
__html: item.text,
62+
} }
63+
/>
64+
{ item?.extra &&
65+
<Text
66+
variant="body"
67+
className="extra"
68+
dangerouslySetInnerHTML={ {
69+
__html: item.extra,
70+
} }
71+
/> }
72+
</FlexBlock>
73+
))
74+
}
75+
</Flex>
76+
</Card>
77+
78+
<Card className="woocommerce-table pin4wc-landing-page__faq-section">
79+
<Panel header={ __( 'Frequently asked questions', 'pinterest-for-woocommerce' ) }>
80+
{
81+
faqItems.map( ( item, index ) => (
82+
<PanelBody title={item.question } initialOpen={ false } key={ index }>
83+
<PanelRow>{item.answer}</PanelRow>
84+
</PanelBody>
85+
))
86+
}
87+
</Panel>
88+
</Card>
89+
</div>
90+
);
91+
};
92+
93+
export default LandingPageApp;

‎assets/source/setup-guide/index.js‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,42 @@
11
/**
22
* External dependencies
33
*/
4-
import { render } from '@wordpress/element';
4+
import { render, useEffect, useState } from '@wordpress/element';
5+
import { getHistory, getQuery } from '@woocommerce/navigation';
56

67
/**
78
* Internal dependencies
89
*/
10+
import LandingPageApp from './app/views/LandingPageApp';
911
import SettingsApp from './app/views/SettingsApp';
12+
import WizardApp from './app/views/WizardApp';
1013
import './app/style.scss';
1114

15+
const App = () => {
16+
const [ view, setView ] = useState( getQuery()?.view );
17+
18+
useEffect( () => {
19+
const currentUrl = new URL( window.location.href );
20+
const view = currentUrl.searchParams.get( 'view' );
21+
22+
setView( view );
23+
});
24+
25+
getHistory().listen( () => {
26+
setView( getQuery()?.view );
27+
});
28+
29+
return view === 'settings' || getQuery()?.page === 'pinterest-for-woocommerce-setup-guide'
30+
? <SettingsApp />
31+
: view === 'wizard'
32+
? <WizardApp />
33+
: <LandingPageApp />;
34+
};
35+
1236
const appRoot = document.getElementById( 'pin4wc-setup-guide' );
1337

1438
if ( appRoot ) {
15-
render( <SettingsApp />, appRoot );
39+
render( <App />, appRoot );
1640
}
41+
42+
export default App;

‎assets/source/setup-task/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { addFilter } from '@wordpress/hooks';
77
/**
88
* Internal dependencies
99
*/
10-
import WizardApp from '../setup-guide/app/views/WizardApp';
10+
import App from '../setup-guide';
1111
import '../setup-guide/app/style.scss';
1212

1313
/**
@@ -22,7 +22,7 @@ addFilter(
2222
{
2323
key: 'setup-pinterest',
2424
title: __( 'Setup Pinterest Integration', 'pinterest-for-woocommerce' ),
25-
container: <WizardApp />,
25+
container: <App />,
2626
completed: wcSettings.pin4wc.isSetupComplete,
2727
visible: true,
2828
additionalInfo: __( 'Configure the connection to Pinterest and any additional settings like tracking, product sync, etc.', 'pinterest-for-woocommerce' ),

‎includes/admin/class-pinterest-for-woocommerce-admin-settings-page.php‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ public function __construct() {
3131
add_action( 'admin_init', array( $this, 'maybe_go_to_service_login_url' ) );
3232
add_filter( 'woocommerce_get_registered_extended_tasks', array( $this, 'register_task_list_item' ), 10, 1 );
3333
add_filter( 'woocommerce_shared_settings', array( $this, 'component_settings' ), 20 );
34+
add_filter( 'woocommerce_shared_settings', array( $this, 'landing_page_content' ), 20 );
3435
}
3536

3637
/**
@@ -69,7 +70,7 @@ class_exists( 'Automattic\WooCommerce\Admin\Loader' ) &&
6970
*/
7071
public function register_guide_page() {
7172

72-
$page_title = ( isset( $_GET['view'] ) && 'wizard' === $_GET['view'] ? __( 'Pinterest Setup Guide', 'pinterest-for-woocommerce' ) : __( 'Pinterest for WooCommerce', 'pinterest-for-woocommerce' ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended --- not needed
73+
$page_title = ( isset( $_GET['view'] ) && 'wizard' === $_GET['view'] ? esc_html__( 'Pinterest Setup Guide', 'pinterest-for-woocommerce' ) : esc_html__( 'Pinterest for WooCommerce', 'pinterest-for-woocommerce' ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended --- not needed
7374

7475
add_submenu_page(
7576
'woocommerce-marketing',
@@ -94,7 +95,7 @@ public function register_guide_page() {
9495
Menu::add_plugin_category(
9596
array(
9697
'id' => 'pinterest-for-woocommerce',
97-
'title' => __( 'Pinterest', 'pinterest-for-woocommerce' ),
98+
'title' => esc_html__( 'Pinterest', 'pinterest-for-woocommerce' ),
9899
'parent' => 'woocommerce',
99100
)
100101
);
@@ -279,6 +280,54 @@ class_exists( 'Automattic\WooCommerce\Admin\Loader' ) &&
279280
}
280281

281282

283+
/**
284+
* Adds the content of the landing page.
285+
*
286+
* @param array $settings The settings array to be filtered.
287+
*
288+
* @return array
289+
*/
290+
public function landing_page_content( $settings ) {
291+
$settings['pin4wc']['landing_page'] = array(
292+
'welcome' => array(
293+
'title' => esc_html__( 'Get your products in front of more than 475M people on Pinterest', 'pinterest-for-woocommerce' ),
294+
'text' => esc_html__( 'Pinterest is a visual discovery engine people use to find inspiration for their lives and make it easier to shop for home decor, fashion and style, electronics and more. 400 million people have saved more than 300 billion Pins across a range of interests, which others with similar tastes can discover through search and recommendations.', 'pinterest-for-woocommerce' ),
295+
'tos_link' => 'https://business.pinterest.com/business-terms-of-service/',
296+
'image_url' => 'http://placehold.it/416x300/',
297+
),
298+
'features' => array(
299+
array(
300+
'title' => esc_html__( 'Connect your account', 'pinterest-for-woocommerce' ),
301+
'text' => esc_html__( 'Install the Pinterest for WooCommerce app to quickly upload your product catalog and publish Pins for items you sell. Track performance with the Pinterest Tag and keep your Pins up to date with our daily automatic updates.', 'pinterest-for-woocommerce' ),
302+
'image_url' => 'http://placehold.it/100x100/',
303+
),
304+
array(
305+
'title' => esc_html__( 'Increase organic reach', 'pinterest-for-woocommerce' ),
306+
'text' => esc_html__( 'Once you\'ve uploaded your catalog, people on Pinterest can easily discover, save and buy products from your website without any advertising spend from you.*', 'pinterest-for-woocommerce' ),
307+
'extra' => esc_html__( '*It can take up to 5 business days for the product catalog to sync for this first time', 'pinterest-for-woocommerce' ),
308+
'image_url' => 'http://placehold.it/100x100/',
309+
),
310+
array(
311+
'title' => esc_html__( 'Merchant storefronts on profile', 'pinterest-for-woocommerce' ),
312+
'text' => esc_html__( 'Upload your catalog via the WooCommerce for Pinterest app and transform the shop tab on your business profile into an inspiring storefront. Pinners will see featured product groups and dynamically created recommendations and can easily navigate by category. Whenever they click on your profile, they\'ll be automatically taken to your storefront.', 'pinterest-for-woocommerce' ),
313+
'image_url' => 'http://placehold.it/100x100/',
314+
),
315+
),
316+
'faq_items' => array(
317+
array(
318+
'question' => esc_html__( 'Why am I getting an “Account not connected” error message?', 'pinterest-for-woocommerce' ),
319+
'answer' => esc_html__( 'Your password might have changed recently. Click Reconnect Pinterest Account and follow the instructions on screen to restore the connection.', 'pinterest-for-woocommerce' ),
320+
),
321+
array(
322+
'question' => esc_html__( 'I have more than one Pinterest Advertiser account. Can I connect my WooCommerce store to multiple Pinterest Advertiser accounts?', 'pinterest-for-woocommerce' ),
323+
'answer' => esc_html__( 'Only one Pinterest advertiser account can be linked to each WooCommerce store. If you want to connect a different Pinterest advertiser account you will need to either: Disconnect the existing Pinterest Advertiser account from your current WooCommerce store and connect a different Pinterest Advertiser account Create another WooCommerce store and connect the additional Pinterest Advertiser account.', 'pinterest-for-woocommerce' ),
324+
),
325+
),
326+
);
327+
328+
return $settings;
329+
}
330+
282331
/**
283332
* Handles redirection to the service login URL.
284333
*/

0 commit comments

Comments
 (0)