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

feature / bookings ctb added in pages and posts #1183

Merged
merged 10 commits into from
Aug 7, 2024
Merged

feature / bookings ctb added in pages and posts #1183

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ea7ffbb
pages and post transform store
manikantakailasa Jul 15, 2024
cd1ddde
lint fix , tests
manikantakailasa Jul 18, 2024
9186cfa
svg path
manikantakailasa Jul 18, 2024
b026e5d
Fix conflict
wpalani Jul 24, 2024
5038679
Merge branch 'develop' into update/PRESS0-1323
wpalani Jul 24, 2024
26bd9ce
Bump core version
wpalani Jul 24, 2024
b914f43
Fix code
wpalani Jul 27, 2024
3afc3fa
fix:ecommerce entitlement
manikantakailasa Jul 29, 2024
eba7a8c
Merge branch 'update/PRESS0-1323' into PRESS0-1323
manikantakailasa Jul 29, 2024
1faef30
deleting duplicate
manikantakailasa Aug 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
2 changes: 1 addition & 1 deletion .wp-env.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"core": "WordPress/WordPress#tags/6.5.5",
"core": "WordPress/WordPress#tags/6.6",
"config": {
"WP_DEBUG": true,
"WP_DEBUG_LOG": true,
Expand Down
9 changes: 9 additions & 0 deletions assets/svg/transformStore.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions src/app/pages/pages-and-posts/TransformStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Button, Card, Title } from '@newfold/ui-component-library';
import { ReactComponent as TransformLogo } from '../../../../assets/svg/transformStore.svg';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the Assets path alias to simplify the import path.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tried it but tests are failing as it is not able to find the path.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I inspected the Vector and it looks like the Vector was converted (By the designer) from an image, which increased the size of the asset from 2kb to 45kb with no added value in our use case.

I think it's best we convert this back from svg to png. We also need to properly name the asset to tie back the component name.

I created a branch from your PR and made some changes to simplify the import and component naming. Check this commit: b914f43


const TransformStore = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change component name to EcommAddonCTB

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

return (
<Card
className="wppbh-app-transform nfd-border-0 nfd-border-t md:nfd-border-t-0 nfd-shadow-none hover:nfd-bg-[#F2F9FE]"
style={ {
borderRadius: 0,
} }
>
<Card.Content>
<TransformLogo />
<Title size="4" className="nfd-leading-normal nfd-my-4">
{ __( 'Transform your store!', 'wp-plugin-bluehost' ) }
</Title>
<p>
{ __(
'Our eCommerce bundle includes a comprehensive suite of advanced tools designed to boost the performance of your WooCommerce store.',
'wp-plugin-bluehost'
) }
</p>
</Card.Content>
<div className="nfd-flex nfd-justify-end nfd-gap-6 nfd-items-center">
<a href="admin.php?page=bluehost#/marketplace/product/6049dddb-1303-4c41-b3c0-242881697860">
<Button variant="secondary">
{ __( 'Learn More', 'wp-plugin-bluehost' ) }
</Button>
</a>
</div>
</Card>
);
};

export default TransformStore;
9 changes: 6 additions & 3 deletions src/app/pages/pages-and-posts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import BlogPosts from './blogPosts';
import BookingAndAppointments from './bookingAndAppointments';
import ProductsPages from './ProductsPages';
import AppStore from '../../data/store';
import TransformStore from './TransformStore';

const PagesAndPosts = () => {
const { store } = useContext( AppStore );
Expand Down Expand Up @@ -78,9 +79,11 @@ const PagesAndPosts = () => {
<ProductsPages />
) }
{ window.NewfoldRuntime.isYithBookingActive &&
window.NewfoldRuntime.isWoocommerceActive && (
<BookingAndAppointments />
) }
window.NewfoldRuntime.isWoocommerceActive ? (
<BookingAndAppointments />
) : (
<TransformStore />
) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Jira story requirement states:

Given customers do not have an ecommerce entitlement
When they view Pages and Posts (launchpad) in wp-admin
Then we will have CTB for ecom addon in the place of bookings card instead of removing the card altogether.

Meaning: this card (eComm addon CTB) is intended to be shown to users who do not have the e-commerce addon in their plan (ecommerce entitlement). In this condition, we are not considering whether they have the addon or not.

The condition should be:

IF: WooCommerce is active
AND: The user doesn't have the e-commerce addon
THEN: Show the `EcommAddonCTB` component

ELSE IF...

IF: WooCommerce is active
AND: Yith Booking is active
THEN: Show `BookingAndAppointments` component

ELSE:
Show nothing

END

You can check for the e-commerce entitlement using the Newfold runtime:

import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';

NewfoldRuntime.hasCapability( 'isEcommerce' ) // Bool

Or you can:

window.NewfoldRuntime.capabilities.isEcommerce // Bool | Undefined

Be careful with the second one because it can return undefined, especially in local environments or sites with connection issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated fix , but ecommerce entitlement we check with hasYithExtended.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason for not using isEcommerce?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isEcommerce refers to whether or not WooCommerce plugin is active, has nothing to do with the commerce addon.

</div>
</Container>
</Page>
Expand Down
141 changes: 77 additions & 64 deletions tests/cypress/integration/pages-and-posts.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
describe( 'Pages & Posts', function () {
describe('Pages & Posts', function () {
let NewfoldRuntime;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Please update the tests in this file to reflect the story requirements accurately.
  • Please revert the spaces of the lint.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed


before( () => {
before(() => {
cy.visit(
'/wp-admin/admin.php?page=' +
Cypress.env( 'pluginId' ) +
'#/pages-and-posts'
Cypress.env('pluginId') +
'#/pages-and-posts'
);
cy.window()
.its( 'NewfoldRuntime' )
.then( ( data ) => {
.its('NewfoldRuntime')
.then((data) => {
NewfoldRuntime = data;
} );
});
cy.injectAxe();
} );
});

it( 'Pages & Posts Exists', () => {
cy.get( '.wppbh-app-pagesAndPosts-page' )
.contains( 'Pages & Posts' )
it('Pages & Posts Exists', () => {
cy.get('.wppbh-app-pagesAndPosts-page')
.contains('Pages & Posts')
.scrollIntoView()
.should( 'be.visible' );
} );
.should('be.visible');
});

it( 'site pages Exists', () => {
cy.get( '.wppbh-app-site-page' )
.findByText( 'Site Pages' )
.should( 'exist' );
cy.get( '.wppbh-app-site-page' )
.find( 'a[href="edit.php?post_type=page"]' )
it('site pages Exists', () => {
cy.get('.wppbh-app-site-page')
.findByText('Site Pages')
.should('exist');
cy.get('.wppbh-app-site-page')
.find('a[href="edit.php?post_type=page"]')
.click();
cy.url().should( 'include', 'edit.php?post_type=page' );
cy.go( 'back' );
cy.url().should('include', 'edit.php?post_type=page');
cy.go('back');

cy.get( '.wppbh-app-site-page' )
.find( 'a[href="post-new.php?post_type=page"] Button' )
cy.get('.wppbh-app-site-page')
.find('a[href="post-new.php?post_type=page"] Button')
.click();
cy.url().should( 'include', 'post-new.php?post_type=page' );
cy.go( 'back' );
} );
cy.url().should('include', 'post-new.php?post_type=page');
cy.go('back');
});

it( 'Blog posts Exists', () => {
cy.get( '.wppbh-app-blog-posts' )
.findByText( 'Blog Posts' )
.should( 'exist' );
cy.get( '.wppbh-app-blog-posts' ).find( 'a[href="edit.php"]' ).click();
cy.url().should( 'include', 'edit.php' );
cy.go( 'back' );
it('Blog posts Exists', () => {
cy.get('.wppbh-app-blog-posts')
.findByText('Blog Posts')
.should('exist');
cy.get('.wppbh-app-blog-posts').find('a[href="edit.php"]').click();
cy.url().should('include', 'edit.php');
cy.go('back');

cy.get( '.wppbh-app-blog-posts' )
.get( 'a[href="post-new.php"] Button' )
cy.get('.wppbh-app-blog-posts')
.get('a[href="post-new.php"] Button')
.click();
cy.url().should( 'include', 'post-new.php' );
cy.go( 'back' );
} );
cy.url().should('include', 'post-new.php');
cy.go('back');
});

it( 'Bookings & Appointments Exists', () => {
it('Bookings & Appointments Exists', () => {
if (
NewfoldRuntime.isYithBookingActive &&
NewfoldRuntime.isWoocommerceActive
) {
cy.get( '.wppbh-app-bookings' )
.findByText( 'Bookings & Appointments' )
.should( 'exist' );
cy.get( '.wppbh-app-bookings' )
cy.get('.wppbh-app-bookings')
.findByText('Bookings & Appointments')
.should('exist');
cy.get('.wppbh-app-bookings')
.find(
'a[href="edit.php?post_type=yith_booking&yith-plugin-fw-panel-skip-redirect=1"]'
)
Expand All @@ -72,9 +72,9 @@ describe( 'Pages & Posts', function () {
'include',
'edit.php?post_type=yith_booking&yith-plugin-fw-panel-skip-redirect=1'
);
cy.go( 'back' );
cy.go('back');

cy.get( '.wppbh-app-bookings' )
cy.get('.wppbh-app-bookings')
.find(
'a[href="edit.php?post_type=yith_booking&yith-plugin-fw-panel-skip-redirect=1"] Button'
)
Expand All @@ -84,30 +84,43 @@ describe( 'Pages & Posts', function () {
'include',
'edit.php?post_type=yith_booking&yith-plugin-fw-panel-skip-redirect=1'
);
cy.go( 'back' );
cy.go('back');
} else {
cy.findByText( 'Bookings & Appointments' ).should( 'not.exist' );
cy.get('.wppbh-app-transform')
.findByText('Transform your store!')
.should('exist');
cy.get('.wppbh-app-transform')
.find(
'a[href="admin.php?page=bluehost#/marketplace/product/6049dddb-1303-4c41-b3c0-242881697860"]'
)
.first()
.click();
cy.url().should(
'include',
'admin.php?page=bluehost#/marketplace/product/6049dddb-1303-4c41-b3c0-242881697860'
);
cy.go('back');
}
} );
});

it( 'Products Exists', () => {
if ( NewfoldRuntime.isWoocommerceActive ) {
cy.get( '.wppbh-app-products' )
.findByText( 'Products' )
.should( 'exist' );
cy.get( '.wppbh-app-products' )
.find( 'a[href="edit.php?post_type=product"]' )
it('Products Exists', () => {
if (NewfoldRuntime.isWoocommerceActive) {
cy.get('.wppbh-app-products')
.findByText('Products')
.should('exist');
cy.get('.wppbh-app-products')
.find('a[href="edit.php?post_type=product"]')
.click();
cy.url().should( 'include', 'edit.php?post_type=product' );
cy.go( 'back' );
cy.url().should('include', 'edit.php?post_type=product');
cy.go('back');

cy.get( '.wppbh-app-products' )
.find( 'a[href="post-new.php?post_type=product"] Button' )
cy.get('.wppbh-app-products')
.find('a[href="post-new.php?post_type=product"] Button')
.click();
cy.url().should( 'include', 'post-new.php?post_type=product' );
cy.go( 'back' );
cy.url().should('include', 'post-new.php?post_type=product');
cy.go('back');
} else {
cy.findByText( 'Products' ).should( 'not.exist' );
cy.findByText('Products').should('not.exist');
}
} );
} );
});
});
Loading