Skip to content

Commit eaa8b6f

Browse files
msaggioratomsaggiorato
authored
Merge pull request #151 from saucal/fix/move-content-to-react
Move hard-coded content from PHP to React
2 parents c2f4733 + 0db6660 commit eaa8b6f

2 files changed

Lines changed: 176 additions & 149 deletions

File tree

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

Lines changed: 174 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44
import { __ } from '@wordpress/i18n';
55
import { getNewPath, getHistory } from '@woocommerce/navigation';
6+
import { createInterpolateElement } from '@wordpress/element';
67
import {
78
Button,
89
Card,
@@ -18,112 +19,189 @@ import {
1819
* Internal dependencies
1920
*/
2021

21-
const LandingPageApp = () => {
22-
const {
23-
welcome,
24-
features,
25-
faq_items: faqItems,
26-
} = wcSettings.pinterest_for_woocommerce.landing_page;
27-
22+
const WelcomeSection = () => {
2823
return (
29-
<div className="pinterest-for-woocommerce-landing-page">
30-
<Card className="woocommerce-table pinterest-for-woocommerce-landing-page__welcome-section">
31-
<Flex>
32-
<FlexBlock className="content-block">
33-
<Text variant="title.medium">{ welcome.title }</Text>
24+
<Card className="woocommerce-table pinterest-for-woocommerce-landing-page__welcome-section">
25+
<Flex>
26+
<FlexBlock className="content-block">
27+
<Text variant="title.medium">
28+
{ __(
29+
'Get your products in front of more than 475M people on Pinterest',
30+
'pinterest-for-woocommerce'
31+
) }
32+
</Text>
3433

35-
<Text variant="body">{ welcome.text }</Text>
34+
<Text variant="body">
35+
{ __(
36+
'Pinterest is a visual discovery engine people use to find inspiration for their lives! More than 475 million people have saved more than 300 billion Pins, making it easier to turn inspiration into their next purchase.',
37+
'pinterest-for-woocommerce'
38+
) }
39+
</Text>
3640

37-
<Text variant="body">
38-
<Button
39-
isPrimary
40-
onClick={ () =>
41-
getHistory().push(
42-
getNewPath(
43-
{},
44-
wcSettings.pinterest_for_woocommerce
45-
.isSetupComplete
46-
? '/pinterest/catalog'
47-
: '/pinterest/onboarding'
48-
)
41+
<Text variant="body">
42+
<Button
43+
isPrimary
44+
onClick={ () =>
45+
getHistory().push(
46+
getNewPath(
47+
{},
48+
wcSettings.pinterest_for_woocommerce
49+
.isSetupComplete
50+
? '/pinterest/catalog'
51+
: '/pinterest/onboarding'
4952
)
50-
}
51-
>
52-
{ __(
53-
'Get started',
54-
'pinterest-for-woocommerce'
55-
) }
56-
</Button>
57-
</Text>
53+
)
54+
}
55+
>
56+
{ __( 'Get started', 'pinterest-for-woocommerce' ) }
57+
</Button>
58+
</Text>
5859

59-
<Text variant="body">
60-
{ __(
61-
'By clicking ‘Get started’, you agree to our',
60+
<Text variant="body">
61+
{ createInterpolateElement(
62+
__(
63+
'By clicking ‘Get started’, you agree to our <a>Terms of Service</a>.',
6264
'pinterest-for-woocommerce'
63-
) }{ ' ' }
64-
<a
65-
href={ welcome.tos_link }
66-
target="_blank"
67-
rel="noreferrer"
68-
>
69-
{ __(
70-
'Terms of Service',
71-
'pinterest-for-woocommerce'
72-
) }
73-
</a>
74-
.
75-
</Text>
76-
</FlexBlock>
77-
<FlexBlock className="image-block">
78-
<img src={ welcome.image_url } alt="" />
79-
</FlexBlock>
80-
</Flex>
81-
</Card>
65+
),
66+
{
67+
a: (
68+
// Disabling no-content rule - content is interpolated from above string.
69+
// eslint-disable-next-line jsx-a11y/anchor-has-content
70+
<a
71+
href="https://business.pinterest.com/business-terms-of-service/"
72+
target="_blank"
73+
rel="noreferrer"
74+
/>
75+
),
76+
}
77+
) }
78+
</Text>
79+
</FlexBlock>
80+
<FlexBlock className="image-block">
81+
<img
82+
src={
83+
wcSettings.pinterest_for_woocommerce.pluginUrl +
84+
'/assets/images/landing_welcome.png'
85+
}
86+
alt=""
87+
/>
88+
</FlexBlock>
89+
</Flex>
90+
</Card>
91+
);
92+
};
8293

83-
<Card className="woocommerce-table pinterest-for-woocommerce-landing-page__features-section">
84-
<Flex justify="center" align="top">
85-
{ features.map( ( item, index ) => (
86-
<FlexBlock key={ index }>
87-
<img src={ item.image_url } alt="" />
88-
<Text variant="subtitle">{ item.title }</Text>
89-
<Text
90-
variant="body"
91-
dangerouslySetInnerHTML={ {
92-
__html: item.text,
93-
} }
94-
/>
95-
{ item?.extra && (
96-
<Text
97-
variant="body"
98-
className="extra"
99-
dangerouslySetInnerHTML={ {
100-
__html: item.extra,
101-
} }
102-
/>
103-
) }
104-
</FlexBlock>
105-
) ) }
106-
</Flex>
107-
</Card>
94+
const FeaturesSection = () => {
95+
return (
96+
<Card className="woocommerce-table pinterest-for-woocommerce-landing-page__features-section">
97+
<Flex justify="center" align="top">
98+
<Feature
99+
imageUrl={
100+
wcSettings.pinterest_for_woocommerce.pluginUrl +
101+
'/assets/images/landing_connect.svg'
102+
}
103+
title={ __(
104+
'Sync your catalog',
105+
'pinterest-for-woocommerce'
106+
) }
107+
text={ __(
108+
'Connect your store to seamlessly sync your product catalog with Pinterest and create rich pins for each item. Your pins are kept up to date with daily automatic updates.',
109+
'pinterest-for-woocommerce'
110+
) }
111+
/>
112+
<Feature
113+
imageUrl={
114+
wcSettings.pinterest_for_woocommerce.pluginUrl +
115+
'/assets/images/landing_organic.svg'
116+
}
117+
title={ __(
118+
'Increase organic reach',
119+
'pinterest-for-woocommerce'
120+
) }
121+
text={ __(
122+
'Pinterest users can easily discover, save and buy products from your website without any advertising spend from you. Track your performance with the Pinterest tag.',
123+
'pinterest-for-woocommerce'
124+
) }
125+
/>
126+
<Feature
127+
imageUrl={
128+
wcSettings.pinterest_for_woocommerce.pluginUrl +
129+
'/assets/images/landing_catalog.svg'
130+
}
131+
title={ __(
132+
'Create a storefront on Pinterest',
133+
'pinterest-for-woocommerce'
134+
) }
135+
text={ __(
136+
'Syncing your catalog creates a Shop tab on your Pinterest profile which allows Pinterest users to easily discover your products.',
137+
'pinterest-for-woocommerce'
138+
) }
139+
/>
140+
</Flex>
141+
</Card>
142+
);
143+
};
108144

109-
<Card className="woocommerce-table pinterest-for-woocommerce-landing-page__faq-section">
110-
<Panel
111-
header={ __(
112-
'Frequently asked questions',
145+
const Feature = ( { title, text, imageUrl } ) => {
146+
return (
147+
<FlexBlock>
148+
<img src={ imageUrl } alt="" />
149+
<Text variant="subtitle">{ title }</Text>
150+
<Text variant="body">{ text }</Text>
151+
</FlexBlock>
152+
);
153+
};
154+
155+
const FaqSection = () => {
156+
return (
157+
<Card className="woocommerce-table pinterest-for-woocommerce-landing-page__faq-section">
158+
<Panel
159+
header={ __(
160+
'Frequently asked questions',
161+
'pinterest-for-woocommerce'
162+
) }
163+
>
164+
<FaqQuestion
165+
question={ __(
166+
'Why am I getting an “Account not connected” error message?',
113167
'pinterest-for-woocommerce'
114168
) }
115-
>
116-
{ faqItems.map( ( item, index ) => (
117-
<PanelBody
118-
title={ item.question }
119-
initialOpen={ false }
120-
key={ index }
121-
>
122-
<PanelRow>{ item.answer }</PanelRow>
123-
</PanelBody>
124-
) ) }
125-
</Panel>
126-
</Card>
169+
answer={ __(
170+
'Your password might have changed recently. Click Reconnect Pinterest Account and follow the instructions on screen to restore the connection.',
171+
'pinterest-for-woocommerce'
172+
) }
173+
/>
174+
<FaqQuestion
175+
question={ __(
176+
'I have more than one Pinterest Advertiser account. Can I connect my WooCommerce store to multiple Pinterest Advertiser accounts?',
177+
'pinterest-for-woocommerce'
178+
) }
179+
answer={ __(
180+
'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, or Create another WooCommerce store and connect the additional Pinterest Advertiser account.',
181+
'pinterest-for-woocommerce'
182+
) }
183+
/>
184+
</Panel>
185+
</Card>
186+
);
187+
};
188+
189+
const FaqQuestion = ( { question, answer } ) => {
190+
return (
191+
<PanelBody title={ question } initialOpen={ false }>
192+
<PanelRow>{ answer }</PanelRow>
193+
</PanelBody>
194+
);
195+
};
196+
197+
const LandingPageApp = () => {
198+
return (
199+
<div className="pinterest-for-woocommerce-landing-page">
200+
<WelcomeSection />
201+
202+
<FeaturesSection />
203+
204+
<FaqSection />
127205
</div>
128206
);
129207
};

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

Lines changed: 2 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -365,12 +365,7 @@ public function load_settings() {
365365
return;
366366
}
367367

368-
$data = array_merge(
369-
$this->get_component_settings(),
370-
$this->get_landing_page_content()
371-
);
372-
373-
Package::container()->get( AssetDataRegistry::class )->add( 'pinterest_for_woocommerce', $data );
368+
Package::container()->get( AssetDataRegistry::class )->add( 'pinterest_for_woocommerce', $this->get_component_settings() );
374369
}
375370

376371

@@ -391,6 +386,7 @@ private function get_component_settings() {
391386
admin_url( 'admin.php' )
392387
)
393388
),
389+
'pluginUrl' => Pinterest_For_Woocommerce()->plugin_url(),
394390
'serviceLoginUrl' => esc_url(
395391
add_query_arg(
396392
array(
@@ -420,53 +416,6 @@ private function get_component_settings() {
420416
);
421417
}
422418

423-
424-
/**
425-
* Adds the content of the landing page.
426-
*
427-
* @return array
428-
*/
429-
private function get_landing_page_content() {
430-
431-
return array(
432-
'landing_page' => array(
433-
'welcome' => array(
434-
'title' => esc_html__( 'Get your products in front of more than 475M people on Pinterest', 'pinterest-for-woocommerce' ),
435-
'text' => esc_html__( 'Pinterest is a visual discovery engine people use to find inspiration for their lives! More than 475 million people have saved more than 300 billion Pins, making it easier to turn inspiration into their next purchase.', 'pinterest-for-woocommerce' ),
436-
'tos_link' => 'https://business.pinterest.com/business-terms-of-service/',
437-
'image_url' => Pinterest_For_Woocommerce()->plugin_url() . '/assets/images/landing_welcome.png',
438-
),
439-
'features' => array(
440-
array(
441-
'title' => esc_html__( 'Sync your catalog', 'pinterest-for-woocommerce' ),
442-
'text' => esc_html__( 'Connect your store to seamlessly sync your product catalog with Pinterest and create rich pins for each item. Your pins are kept up to date with daily automatic updates.', 'pinterest-for-woocommerce' ),
443-
'image_url' => Pinterest_For_Woocommerce()->plugin_url() . '/assets/images/landing_connect.svg',
444-
),
445-
array(
446-
'title' => esc_html__( 'Increase organic reach', 'pinterest-for-woocommerce' ),
447-
'text' => esc_html__( 'Pinterest users can easily discover, save and buy products from your website without any advertising spend from you. Track your performance with the Pinterest tag.', 'pinterest-for-woocommerce' ),
448-
'image_url' => Pinterest_For_Woocommerce()->plugin_url() . '/assets/images/landing_organic.svg',
449-
),
450-
array(
451-
'title' => esc_html__( 'Create a storefront on Pinterest', 'pinterest-for-woocommerce' ),
452-
'text' => esc_html__( 'Syncing your catalog creates a Shop tab on your Pinterest profile which allows Pinterest users to easily discover your products.', 'pinterest-for-woocommerce' ),
453-
'image_url' => Pinterest_For_Woocommerce()->plugin_url() . '/assets/images/landing_catalog.svg',
454-
),
455-
),
456-
'faq_items' => array(
457-
array(
458-
'question' => esc_html__( 'Why am I getting an “Account not connected” error message?', 'pinterest-for-woocommerce' ),
459-
'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' ),
460-
),
461-
array(
462-
'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' ),
463-
'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, or Create another WooCommerce store and connect the additional Pinterest Advertiser account.', 'pinterest-for-woocommerce' ),
464-
),
465-
),
466-
),
467-
);
468-
}
469-
470419
/**
471420
* Handles redirection to the service login URL.
472421
*/

0 commit comments

Comments
 (0)