diff --git a/packages/snap-preact-components/package.json b/packages/snap-preact-components/package.json index 6ccd80061..d701fb2d9 100644 --- a/packages/snap-preact-components/package.json +++ b/packages/snap-preact-components/package.json @@ -22,7 +22,8 @@ "lint": "eslint 'src/components/**/*.{js,jsx,ts,tsx}'", "storybook": "start-storybook -p 6006", "cypress": "cypress open --project tests", - "test": "jest", + "cypress:headless": "cypress run --component --project tests", + "test": "jest; npm run cypress:headless", "test:watch": "jest --watch" }, "dependencies": { diff --git a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx index 66bbb9d80..16968c3fd 100644 --- a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx +++ b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx @@ -1,7 +1,9 @@ /** @jsx jsx */ import { h, Fragment } from 'preact'; +import { useState } from 'preact/hooks'; import { jsx } from '@emotion/react'; import { observer } from 'mobx-react'; +import classnames from 'classnames'; import { cloneWithProps } from '../../../utilities'; import { Button } from '../../Atoms/Button'; import { Price } from '../../Atoms/Price'; @@ -19,7 +21,19 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element => ...properties, }; - const { ctaSlot, icon, cartStore, onAddToCartClick, addToCartText } = props; + props.onAddToCart = (e: any) => { + setAddedToCart(true); + + properties.onAddToCart(e); + + setTimeout(() => setAddedToCart(false), properties.ctaButtonSuccessTimeout); + }; + + const { ctaSlot, cartStore, onAddToCart, ctaIcon, ctaButtonText, ctaButtonSuccessText } = props; + + const [addedToCart, setAddedToCart] = useState(false); + + props.addedToCart = addedToCart; const subProps: BundleSelectorSubProps = { icon: { @@ -40,9 +54,9 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element => ) : (
- {icon ? ( + {ctaIcon ? (
- ))} /> + ))} />
) : ( <> @@ -62,8 +76,14 @@ export const BundledCTA = observer((properties: BundledCTAProps): JSX.Element =>
- )} @@ -78,7 +98,9 @@ export interface BundleSelectorSubProps { interface BundledCTAProps extends ComponentProps { ctaSlot?: JSX.Element; cartStore: CartStore; - icon?: string | Partial | boolean; - onAddToCartClick: (e: React.MouseEvent) => void; - addToCartText?: string; + onAddToCart: (e: React.MouseEvent) => void; + ctaIcon?: string | Partial | boolean; + ctaButtonText?: string; + ctaButtonSuccessText?: string; + ctaButtonSuccessTimeout?: number; } diff --git a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx index 57a5e3c96..30b275630 100644 --- a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx +++ b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx @@ -49,16 +49,6 @@ export default { }, control: { type: 'none' }, }, - onAddToCart: { - description: 'onClick event handler for add bundle to cart button', - type: { required: true }, - table: { - type: { - summary: 'function', - }, - }, - action: 'onAddToCart', - }, results: { description: 'Results store reference, overrides controller.store.results', type: { required: false }, @@ -69,41 +59,33 @@ export default { }, control: { type: 'none' }, }, - title: { - description: 'Recommendation title', + resultComponent: { + description: 'Slot for custom result component', table: { type: { - summary: 'string | JSX Element', + summary: 'component', }, - defaultValue: { summary: '' }, }, - control: { type: 'text' }, }, - ctaButtonText: { - description: 'Text to render in add to cart button', + title: { + description: 'recommendation title', table: { type: { - summary: 'string', + summary: 'string | JSX Element', }, - defaultValue: { summary: 'Add All To Cart' }, + defaultValue: { summary: '' }, }, control: { type: 'text' }, }, - resultComponent: { - description: 'Slot for custom result component', - table: { - type: { - summary: 'component', - }, - }, - }, - ctaSlot: { - description: 'Slot for custom add to cart component', + onAddToCart: { + description: 'onClick event handler for add bundle to cart button in CTA', + type: { required: true }, table: { type: { - summary: 'component', + summary: 'function', }, }, + action: 'onAddToCart', }, limit: { description: 'limit the number of results rendered', @@ -115,7 +97,7 @@ export default { control: { type: 'number' }, }, carousel: { - description: 'Carousel Settings object', + description: 'Carousel settings object', defaultValue: { enabled: true, loop: false, @@ -124,7 +106,7 @@ export default { type: { summary: 'object', }, - defaultValue: { summary: 'Carousel Settings object' }, + defaultValue: { summary: 'Carousel settings object' }, }, control: { type: 'object' }, }, @@ -193,6 +175,36 @@ export default { options: [...Object.keys(iconPaths)], }, }, + ctaButtonText: { + description: 'text to render in add to cart button', + table: { + type: { + summary: 'string', + }, + defaultValue: { summary: 'Add All To Cart' }, + }, + control: { type: 'text' }, + }, + ctaButtonSuccessText: { + description: 'text to temporarily render in the add to cart button after it is clicked', + table: { + type: { + summary: 'string', + }, + defaultValue: { summary: 'Bundle Added!' }, + }, + control: { type: 'text' }, + }, + ctaButtonSuccessTimeout: { + description: 'Number of ms to show success text in add to cart button before reverting back to normal text', + defaultValue: 2000, + table: { + type: { + summary: 'number', + }, + }, + control: { type: 'number' }, + }, ctaInline: { description: 'boolean to enable the stacked add to cart button display', table: { @@ -203,6 +215,14 @@ export default { }, control: { type: 'boolean' }, }, + ctaSlot: { + description: 'Slot for custom add to cart component', + table: { + type: { + summary: 'component', + }, + }, + }, breakpoints: { defaultValue: undefined, description: 'Recommendation title', diff --git a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx index da872160b..923ca9927 100644 --- a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx +++ b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx @@ -150,6 +150,8 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr separatorIconSeedOnly: true, ctaIcon: true, ctaButtonText: 'Add All To Cart', + ctaButtonSuccessText: 'Bundle Added!', + ctaButtonSuccessTimeout: 2000, ctaInline: true, // global theme ...globalTheme?.components?.recommendationBundle, @@ -185,6 +187,8 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr resultComponent, ctaSlot, ctaButtonText, + ctaButtonSuccessText, + ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, @@ -333,13 +337,12 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr } } }; - - const addToCart = (e: any) => { + const addToCart = (e: MouseEvent) => { // add to cart tracking controller.track.addBundle(e, selectedItems); //call the function passed - onAddToCart && onAddToCart(selectedItems); + onAddToCart && onAddToCart(e, selectedItems); }; const setSeedwidth = () => { @@ -547,9 +550,11 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr addToCart(e)} - addToCartText={ctaButtonText} - icon={ctaIcon} + onAddToCart={(e: any) => addToCart(e)} + ctaButtonText={ctaButtonText} + ctaButtonSuccessText={ctaButtonSuccessText} + ctaButtonSuccessTimeout={ctaButtonSuccessTimeout} + ctaIcon={ctaIcon} /> )} @@ -557,9 +562,11 @@ export const RecommendationBundle = observer((properties: RecommendationBundlePr addToCart(e)} - addToCartText={ctaButtonText} - icon={ctaIcon} + onAddToCart={(e: any) => addToCart(e)} + ctaButtonText={ctaButtonText} + ctaButtonSuccessText={ctaButtonSuccessText} + ctaButtonSuccessTimeout={ctaButtonSuccessTimeout} + ctaIcon={ctaIcon} /> )} @@ -580,7 +587,7 @@ export interface RecommendationBundleProps extends ComponentProps { results?: Product[]; limit?: number; controller: RecommendationController; - onAddToCart: (items: Product[]) => void; + onAddToCart: (e: MouseEvent, items: Product[]) => void; title?: JSX.Element | string; breakpoints?: BreakpointsProps; resultComponent?: JSX.Element; @@ -592,6 +599,8 @@ export interface RecommendationBundleProps extends ComponentProps { ctaInline?: boolean; ctaIcon?: string | Partial | boolean; ctaButtonText?: string; + ctaButtonSuccessText?: string; + ctaButtonSuccessTimeout?: number; ctaSlot?: JSX.Element; vertical?: boolean; carousel?: BundleCarouselProps; diff --git a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/readme.md b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/readme.md index d51e06413..49482371c 100644 --- a/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/readme.md +++ b/packages/snap-preact-components/src/components/Organisms/RecommendationBundle/readme.md @@ -15,21 +15,21 @@ Additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) can be prov The required `controller` prop specifies a reference to the RecommendationController ```jsx -{console.log(items)}} /> +{console.log(items)}} /> ``` ### onAddToCart the required `onAddToCart` prop sets a the callback function for when a add to cart button is clicked. This function will be passed an array of selected item ids and their quantities. ```jsx -{console.log(items)}} /> +{console.log(items)}} /> ``` ### results The `results` prop specifies a reference to the results store array to use instead of the default `controller.store.results`. Note the first result will be displayed as the `seed` product. ```jsx -{console.log(items)}} results={controller.store.results} /> +{console.log(items)}} results={controller.store.results} /> ``` ### carousel @@ -47,56 +47,56 @@ const customCarouselProps = { prevButton: 'Previous', nextButton: 'Next' } -{console.log(items)}} carousel={ customCarouselProps } /> +{console.log(items)}} carousel={ customCarouselProps } /> ``` ### enabled The `enabled` prop is a sub prop under the `carousel` prop. It specifies weather the bundle should render as a carousel or not. ```jsx -{console.log(items)}} carousel={ enabled:false } /> +{console.log(items)}} carousel={ enabled:false } /> ``` ### seedInCarousel The `seedInCarousel` prop is a sub prop under the `carousel` prop. It specifies if the seed product should be included in the carousel or not. ```jsx -{console.log(items)}} carousel={ seedInCarousel:true } /> +{console.log(items)}} carousel={ seedInCarousel:true } /> ``` ### pagination The `pagination` prop is a sub prop under the `carousel` prop. It specifies if the carousel should display pagination dots. ```jsx -{console.log(items)}} carousel={ pagination:true } /> +{console.log(items)}} carousel={ pagination:true } /> ``` ### hideButtons The `hideButtons` is a sub prop under the `carousel` prop. It specifies if the carousel should hide prev/next buttons. ```jsx -{console.log(items)}} carousel={ hideButtons:true }> +{console.log(items)}} carousel={ hideButtons:true }> ``` ### prevButton The `prevButton` prop is a sub prop under the `carousel` prop. It specifies the previous button element of the carousel. This can be a string or JSX element. ```jsx -{console.log(items)}} carousel={ prevButton: '<' } /> +{console.log(items)}} carousel={ prevButton: '<' } /> ``` ### nextButton The `nextButton` prop is a sub prop under the `carousel` prop. It specifies the next button element of the carousel. This can be a string or JSX element. ```jsx -{console.log(items)}} carousel={ nextButton: '>' } /> +{console.log(items)}} carousel={ nextButton: '>' } /> ``` ### title The `title` prop specifies the carousel title ```jsx -{console.log(items)}} title={'Recommended Bundle'} /> +{console.log(items)}} title={'Recommended Bundle'} /> ``` ### resultComponent @@ -112,28 +112,42 @@ The `resultComponent` prop allows for a custom result component to be rendered. ``` ```jsx -{console.log(items)}} resultComponent={} /> +{console.log(items)}} resultComponent={} /> ``` ### ctaButtonText The `ctaButtonText` prop specifies the inner text to render in the add to cart button. ```jsx -{console.log(items)}} ctaButtonText={'Add Bundle'} /> +{console.log(items)}} ctaButtonText={'Add Bundle'} /> +``` + +### ctaButtonSuccessText +The `ctaButtonSuccessText` prop specifies text to temporarily render in the add to cart button after it is clicked. + +```jsx +{console.log(items)}} ctaButtonSuccessText={'Thanks for Shopping!'} /> +``` + +### ctaButtonSuccessTimeout +The `ctaButtonSuccessTimeout` prop specifies number of ms to show success text in add to cart button before reverting back to normal text + +```jsx +{console.log(items)}} ctaButtonSuccessTimeout={1500} /> ``` ### ctaIcon The `ctaIcon` prop specifies the icon to render in the CTA. Takes an object with `Icon` component props or a string. ```jsx -{console.log(items)}} ctaIcon={'bag'} /> +{console.log(items)}} ctaIcon={'bag'} /> ``` ### ctaInline The `ctaInline` prop specifies if the add to cart display should be block or inline witht the carousel. ```jsx -{console.log(items)}} ctaInline={true} /> +{console.log(items)}} ctaInline={true} /> ``` ### ctaSlot @@ -147,35 +161,35 @@ The `ctaSlot` prop allows for a custom add to cart cta component to be rendered. ``` ```jsx -{console.log(items)}} ctaSlot={} /> +{console.log(items)}} ctaSlot={} /> ``` ### preselectedCount The `preselectedCount` prop specifies how many products in the bundle will be preselected. This number will include the seed. Example `preselectedCount={3}` would be `seed` + 2 preselected items. If not provided, this will default to however many products are initially visible. ```jsx -{console.log(items)}} preselectedCount={4} /> +{console.log(items)}} preselectedCount={4} /> ``` ### seedText The `seedText` prop specifies text to be rendered as a badge in the seed product. ```jsx -{console.log(items)}} seedText={"Main Product"} /> +{console.log(items)}} seedText={"Main Product"} /> ``` ### separatorIcon The `separatorIcon` prop specifies the icon to render between products. Takes an object with `Icon` component props or a string. ```jsx -{console.log(items)}} separatorIcon={'cog'} /> +{console.log(items)}} separatorIcon={'cog'} /> ``` ### separatorIconSeedOnly The `separatorIconSeedOnly` prop specifies if the seperator Icon should only be rendered after the seed or after every product. ```jsx -{console.log(items)}} separatorIconSeedOnly={true} /> +{console.log(items)}} separatorIconSeedOnly={true} /> ``` @@ -183,14 +197,14 @@ The `separatorIconSeedOnly` prop specifies if the seperator Icon should only be The `hideCheckboxes` prop specifies if the bundle checkboxes should be rendered. ```jsx -{console.log(items)}} hideCheckboxes={true} /> +{console.log(items)}} hideCheckboxes={true} /> ``` ### vertical The `vertical` prop sets the carousel scroll direction to vertical. ```jsx -{console.log(items)}} vertical={true} /> +{console.log(items)}} vertical={true} /> ``` ### modules @@ -198,7 +212,7 @@ The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swip ```jsx import { Scrollbar } from 'swiper'; -{console.log(items)}} modules={[Scrollbar]} scrollbar={{ draggable: true }} /> +{console.log(items)}} modules={[Scrollbar]} scrollbar={{ draggable: true }} /> ``` ### breakpoints @@ -241,6 +255,6 @@ const defaultRecommendationBreakpoints = { ``` ```jsx -{console.log(items)}} breakpoints={defaultRecommendationBreakpoints} /> +{console.log(items)}} breakpoints={defaultRecommendationBreakpoints} /> ``` diff --git a/packages/snap-preact-components/tests/cypress.config.js b/packages/snap-preact-components/tests/cypress.config.js index faabc3802..7b80e6cac 100644 --- a/packages/snap-preact-components/tests/cypress.config.js +++ b/packages/snap-preact-components/tests/cypress.config.js @@ -10,5 +10,8 @@ module.exports = defineConfig({ bundler: 'webpack', }, }, + chromeWebSecurity: false, + video: false, + screenshotOnRunFailure: false, webpackConfig, }); diff --git a/packages/snap-preact-components/tests/cypress/component/molecules/bundleRecommendation.cy.tsx b/packages/snap-preact-components/tests/cypress/component/molecules/bundleRecommendation.cy.tsx index c4b150c7a..2f4e32ab6 100644 --- a/packages/snap-preact-components/tests/cypress/component/molecules/bundleRecommendation.cy.tsx +++ b/packages/snap-preact-components/tests/cypress/component/molecules/bundleRecommendation.cy.tsx @@ -98,7 +98,7 @@ describe('RecommendationBundle Component', async () => { .should('exist') .click() .then(() => { - cy.get('@onAddToCart').should('be.calledWith', [ + cy.get('@onAddToCart').should('be.calledWith', Cypress.sinon.match.any, [ controller.store.results[0], controller.store.results[1], controller.store.results[2], @@ -120,7 +120,7 @@ describe('RecommendationBundle Component', async () => { .should('have.text', text) .click() .then(() => { - cy.get('@onAddToCart').should('be.calledWith', [ + cy.get('@onAddToCart').should('be.calledWith', Cypress.sinon.match.any, [ controller.store.results[0], controller.store.results[1], controller.store.results[2], @@ -306,13 +306,14 @@ describe('RecommendationBundle Component', async () => { }); }); - it('can use set preselectedCount', () => { - const count = 2; - mount(); + // it('can use set preselectedCount', () => { + // const count = 2; + // mount(); - cy.get('.ss__recommendation-bundle').should('exist'); - cy.get('.ss__recommendation-bundle .ss__recommendation-bundle__wrapper__selector--selected').should('have.length', 2); - }); + // cy.get('.ss__recommendation-bundle').should('exist'); + // // cy.get('.ss__recommendation-bundle .ss__recommendation-bundle__wrapper__selector--selected').should("exist"); + // cy.get('.ss__recommendation-bundle .ss__recommendation-bundle__wrapper__selector--selected').its('length').should('eq', 4); + // }); it('can hide checkboxes with hideCheckboxes', () => { mount(); diff --git a/packages/snap-preact-demo/src/components/Recommendations/Bundles/Bundles.json b/packages/snap-preact-demo/src/components/Recommendations/Bundles/Bundles.json index 9786f5cde..15e98d378 100644 --- a/packages/snap-preact-demo/src/components/Recommendations/Bundles/Bundles.json +++ b/packages/snap-preact-demo/src/components/Recommendations/Bundles/Bundles.json @@ -3,7 +3,7 @@ "name": "bundle", "label": "Bundle Template", "description": "a bundle template...", - "component": "Bundles", + "component": "Bundle", "orientation": "horizontal", "parameters": [ { diff --git a/packages/snap-preact-demo/src/index.ts b/packages/snap-preact-demo/src/index.ts index 6d517076c..b843637cd 100644 --- a/packages/snap-preact-demo/src/index.ts +++ b/packages/snap-preact-demo/src/index.ts @@ -61,7 +61,7 @@ let config: SnapConfig = { Recs: async () => { return (await import('./components/Recommendations/Recs/Recs')).Recs; }, - Bundles: async () => { + Bundle: async () => { return (await import('./components/Recommendations/Bundles/Bundles')).Bundles; }, Default: async () => {