Skip to content
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.

Sign up for GitHub

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

My Jetpack: Add featured image video to Jetpack AI product page #37192

Merged
merged 4 commits into from
May 2, 2024
Merged

My Jetpack: Add featured image video to Jetpack AI product page #37192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27494b6
Include video for the Featured Image generation
lhkowalski May 2, 2024
01c49fd
Small refactor to make changes more easy in the future
lhkowalski May 2, 2024
a44ea86
changelog
lhkowalski May 2, 2024
0946bc8
Add dynamic links to the other videos on the Jetpack AI product page
lhkowalski May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 55 additions & 11 deletions ...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,16 @@ export default function () {
const [ showNotice, setShowNotice ] = useState( false );
const { isRegistered } = useConnection();

const videoTitle1 = __(
const videoTitleContentGeneration = __(
'Generate and edit content faster with Jetpack AI Assistant',
'jetpack-my-jetpack'
);
const videoTitle2 = __( 'Build forms using prompts', 'jetpack-my-jetpack' );
const videoTitle3 = __( 'Get feedback on posts', 'jetpack-my-jetpack' );
const videoTitleFeaturedImages = __(
'Create featured images with one click',
'jetpack-my-jetpack'
);
const videoTitleForms = __( 'Build forms using prompts', 'jetpack-my-jetpack' );
const videoTitleContentFeedback = __( 'Get feedback on posts', 'jetpack-my-jetpack' );

debug( aiAssistantFeature );
const {
Expand All @@ -65,6 +69,11 @@ export default function () {
const showAllTimeUsage = hasPaidTier || hasUnlimited;
const contactHref = getRedirectUrl( 'jetpack-ai-tiers-more-requests-contact' );
const feedbackURL = getRedirectUrl( 'jetpack-ai-feedback' );
const videoLinkFeaturedImages = getRedirectUrl( 'jetpack-ai-product-page-featured-image-link' );
const videoLinkForms = getRedirectUrl( 'jetpack-ai-product-page-form-link' );
const videoLinkContentFeedback = getRedirectUrl(
'jetpack-ai-product-page-content-feedback-link'
);

// isRegistered works as a flag to know if the page can link to a post creation or not
const ctaURL = isRegistered
Expand Down Expand Up @@ -264,13 +273,13 @@ export default function () {
src="https://videopress.com/embed/GdXmtVtW?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fimage-37.png%3Fw%3D560"
allowFullScreen
allow="clipboard-write"
title={ videoTitle1 }
title={ videoTitleContentGeneration }
></iframe>
<script src="https://videopress.com/videopress-iframe.js"></script>
</div>
<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
{ videoTitle1 }
{ videoTitleContentGeneration }
</div>
<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
{ __(
Expand All @@ -287,6 +296,40 @@ export default function () {
</Button>
</div>
</div>

<div className={ styles[ 'product-interstitial__usage-videos-item' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-video' ] }>
<iframe
width="280"
height="157"
src="https://videopress.com/embed/HJCf8cXc?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fone-click-featured-images.png%3Fw%3D560"
allowFullScreen
allow="clipboard-write"
title={ videoTitleFeaturedImages }
></iframe>
<script src="https://videopress.com/videopress-iframe.js"></script>
</div>
<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
{ videoTitleFeaturedImages }
</div>
<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
{ __(
'Create featured images to illustrate your content and make it more engaging with just one click. Use prompts to generate adjusted new featured images.',
'jetpack-my-jetpack'
) }
</div>
<Button
className={ styles[ 'product-interstitial__usage-videos-link' ] }
icon={ help }
target="_blank"
href={ videoLinkFeaturedImages }
>
{ __( 'Learn about featured images', 'jetpack-my-jetpack' ) }
</Button>
</div>
</div>

<div className={ styles[ 'product-interstitial__usage-videos-item' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-video' ] }>
<iframe
Expand All @@ -295,13 +338,13 @@ export default function () {
src="https://videopress.com/embed/OMI3zqid?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fimage-38.png%3Fw%3D560"
allowFullScreen
allow="clipboard-write"
title={ videoTitle2 }
title={ videoTitleForms }
></iframe>
<script src="https://videopress.com/videopress-iframe.js"></script>
</div>
<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
{ videoTitle2 }
{ videoTitleForms }
</div>
<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
{ __(
Expand All @@ -313,12 +356,13 @@ export default function () {
className={ styles[ 'product-interstitial__usage-videos-link' ] }
icon={ help }
target="_blank"
href="https://jetpack.com/support/jetpack-blocks/contact-form/#forms-with-ai"
href={ videoLinkForms }
>
{ __( 'Learn about forms', 'jetpack-my-jetpack' ) }
</Button>
</div>
</div>

<div className={ styles[ 'product-interstitial__usage-videos-item' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-video' ] }>
<iframe
Expand All @@ -327,13 +371,13 @@ export default function () {
src="https://videopress.com/embed/0vb0OJm7?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fimage-39.png%3Fw%3D560"
allowFullScreen
allow="clipboard-write"
title={ videoTitle3 }
title={ videoTitleContentFeedback }
></iframe>
<script src="https://videopress.com/videopress-iframe.js"></script>
</div>
<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
{ videoTitle3 }
{ videoTitleContentFeedback }
</div>
<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
{ __(
Expand All @@ -345,7 +389,7 @@ export default function () {
className={ styles[ 'product-interstitial__usage-videos-link' ] }
icon={ help }
target="_blank"
href="https://jetpack.com/support/jetpack-blocks/jetpack-ai-assistant-block/"
href={ videoLinkContentFeedback }
>
{ __( 'Learn more', 'jetpack-my-jetpack' ) }
</Button>
Expand Down
4 changes: 4 additions & 0 deletions .../packages/my-jetpack/changelog/update-jetpack-ai-add-featured-image-video-to-product-page
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Jetpack AI: include video about featured image generation on the product page.
Loading