From d8281008675370b7a6c40e3e7194c0eee76b9a05 Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 1 Nov 2022 12:11:16 -0700 Subject: [PATCH 1/5] fix(merchandising-docs): refactoring merchandising component structure to fix docs search 4 readme --- docs/generateFeed.js | 10 ++++-- .../{ => Banner}/Banner.stories.tsx | 6 ++-- .../{ => Banner}/Banner.test.tsx | 2 +- .../Merchandising/{ => Banner}/Banner.tsx | 4 +-- .../Atoms/Merchandising/Banner/index.ts | 1 + .../Atoms/Merchandising/Banner/readme.md | 35 ++++++++++++++++++ .../InlineBanner.stories.tsx | 8 ++--- .../{ => InlineBanner}/InlineBanner.test.tsx | 2 +- .../{ => InlineBanner}/InlineBanner.tsx | 4 +-- .../Atoms/Merchandising/InlineBanner/index.ts | 1 + .../{ => InlineBanner}/readme.md | 36 ------------------- 11 files changed, 58 insertions(+), 51 deletions(-) rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => Banner}/Banner.stories.tsx (94%) rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => Banner}/Banner.test.tsx (98%) rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => Banner}/Banner.tsx (91%) create mode 100644 packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/index.ts create mode 100644 packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/readme.md rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => InlineBanner}/InlineBanner.stories.tsx (91%) rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => InlineBanner}/InlineBanner.test.tsx (98%) rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => InlineBanner}/InlineBanner.tsx (95%) create mode 100644 packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/index.ts rename packages/snap-preact-components/src/components/Atoms/Merchandising/{ => InlineBanner}/readme.md (51%) diff --git a/docs/generateFeed.js b/docs/generateFeed.js index f81028143..dce5dd295 100644 --- a/docs/generateFeed.js +++ b/docs/generateFeed.js @@ -122,11 +122,17 @@ const OUTPUT_FILE = 'snap-docs.json'; const links = paths.map((path) => { const packagePath = path.split('/snap/packages/')[1]; // const [libraryDir, _, directory, type, componentName, markdownFile] = packagePath.split('/'); - const [libraryDir, _, grouping, ...remainingPaths] = packagePath.split('/'); - const [markdownFile, componentName, type] = remainingPaths.reverse(); + const [markdownFile, componentName, next, extra] = remainingPaths.reverse(); // grouping = components / documentation / hooks // type = atom / molecule / organism or About / Theme / Usage + let type; + //if a component is nested inside an additional directory we need to grab the type from extra + if (extra) { + type = extra; + } else { + type = next; + } const lang = libraryDir.split('-')[1]; const route = libraryDir.split('-').reverse().slice(0, 2).join('-'); //.includes('snap-preact-components') ? 'components-preact' : ''; // TODO: refactor once more options diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.stories.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx similarity index 94% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.stories.tsx rename to packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx index f53fd62fc..b6d5f8fcf 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.stories.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx @@ -3,9 +3,9 @@ import { h } from 'preact'; import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks'; import { Banner, BannerProps } from './Banner'; -import { componentArgs } from '../../../utilities'; -import { Snapify } from '../../../utilities/snapify'; -import Readme from '../Merchandising/readme.md'; +import { componentArgs } from '../../../../utilities'; +import { Snapify } from '../../../../utilities/snapify'; +import Readme from '../readme.md'; import { SearchController } from '@searchspring/snap-controller'; export default { diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.test.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx similarity index 98% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.test.tsx rename to packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx index a6260cc9c..9dce25ae4 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/preact'; import { Banner } from './Banner'; import { ContentType } from '@searchspring/snap-store-mobx'; -import { ThemeProvider } from '../../../providers'; +import { ThemeProvider } from '../../../../providers'; import { MockData } from '@searchspring/snap-shared'; import { SearchResponseModel } from '@searchspring/snapi-types'; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.tsx similarity index 91% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.tsx rename to packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.tsx index a212bef52..9624acbf1 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.tsx @@ -4,8 +4,8 @@ import { Fragment, h } from 'preact'; import { jsx, css } from '@emotion/react'; import classnames from 'classnames'; -import { ComponentProps, StylingCSS } from '../../../types'; -import { Theme, useTheme, CacheProvider } from '../../../providers'; +import { ComponentProps, StylingCSS } from '../../../../types'; +import { Theme, useTheme, CacheProvider } from '../../../../providers'; import { BannerContent, ContentType } from '@searchspring/snap-store-mobx'; const CSS = { diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/index.ts b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/index.ts new file mode 100644 index 000000000..bc95f09d6 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/index.ts @@ -0,0 +1 @@ +export * from './Banner'; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/readme.md b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/readme.md new file mode 100644 index 000000000..d40fd05fe --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/readme.md @@ -0,0 +1,35 @@ +# Banner + +Renders a merchandising banner. Banner Types include `header`, `footer`, `left`, and `banner`. + +This `Banner` component does not support inline banners. See `InlineBanner` component below. + +## Usage + +### content +The required `content` prop specifies an object of banners returned from the Searchspring API. + +```jsx + +``` + +### type +The required `type` prop specifies the banner type to render from the `content` object. + +Banner Types include `header`, `footer`, `left`, and `banner`. + +```jsx + +``` + +```jsx + +``` + +```jsx + +``` + +```jsx + +``` \ No newline at end of file diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.stories.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx similarity index 91% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.stories.tsx rename to packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx index 06c508964..608b8781f 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.stories.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx @@ -3,10 +3,10 @@ import { h } from 'preact'; import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks'; import { InlineBanner, InlineBannerProps } from './InlineBanner'; -import { componentArgs } from '../../../utilities'; -import { Snapify } from '../../../utilities/snapify'; -import Readme from '../Merchandising/readme.md'; -import { Layout } from '../../../types'; +import { componentArgs } from '../../../../utilities'; +import { Snapify } from '../../../../utilities/snapify'; +import Readme from '../readme.md'; +import { Layout } from '../../../../types'; import type { Banner } from '@searchspring/snap-store-mobx'; import type { SearchController } from '@searchspring/snap-controller'; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.test.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.test.tsx similarity index 98% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.test.tsx rename to packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.test.tsx index f2469c7b1..02251cc4f 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/preact'; import userEvent from '@testing-library/user-event'; import { InlineBanner } from './InlineBanner'; -import { ThemeProvider } from '../../../providers'; +import { ThemeProvider } from '../../../../providers'; import type { Banner } from '@searchspring/snap-store-mobx'; import { MockData } from '@searchspring/snap-shared'; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx similarity index 95% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.tsx rename to packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx index 5e7d8f7ae..aa843b827 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.tsx @@ -3,8 +3,8 @@ import { Fragment, h } from 'preact'; import { jsx, css } from '@emotion/react'; import classnames from 'classnames'; -import { Theme, useTheme, CacheProvider } from '../../../providers'; -import { ComponentProps, Layout, LayoutType, StylingCSS } from '../../../types'; +import { Theme, useTheme, CacheProvider } from '../../../../providers'; +import { ComponentProps, Layout, LayoutType, StylingCSS } from '../../../../types'; import type { Banner } from '@searchspring/snap-store-mobx'; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/index.ts b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/index.ts new file mode 100644 index 000000000..510cdb7f7 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/index.ts @@ -0,0 +1 @@ +export * from './InlineBanner'; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/readme.md b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/readme.md similarity index 51% rename from packages/snap-preact-components/src/components/Atoms/Merchandising/readme.md rename to packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/readme.md index 41098a39a..4c508923a 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/readme.md +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/readme.md @@ -1,39 +1,3 @@ -# Banner - -Renders a merchandising banner. Banner Types include `header`, `footer`, `left`, and `banner`. - -This `Banner` component does not support inline banners. See `InlineBanner` component below. - -## Usage - -### content -The required `content` prop specifies an object of banners returned from the Searchspring API. - -```jsx - -``` - -### type -The required `type` prop specifies the banner type to render from the `content` object. - -Banner Types include `header`, `footer`, `left`, and `banner`. - -```jsx - -``` - -```jsx - -``` - -```jsx - -``` - -```jsx - -``` - # Inline Banner ## Usage From 2ead2bcf6ba9463e78f057b2524eae6d83a9404c Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 2 Nov 2022 09:06:17 -0600 Subject: [PATCH 2/5] fix(tracker): altering beacon login event to send shopperId and userId in event payload --- .../tests/cypress/integration/tracking/track.spec.js | 4 ++-- packages/snap-tracker/src/Tracker.test.ts | 11 ++++++++--- packages/snap-tracker/src/Tracker.ts | 5 ++++- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/snap-preact-demo/tests/cypress/integration/tracking/track.spec.js b/packages/snap-preact-demo/tests/cypress/integration/tracking/track.spec.js index e72d6b4b0..3786357cb 100644 --- a/packages/snap-preact-demo/tests/cypress/integration/tracking/track.spec.js +++ b/packages/snap-preact-demo/tests/cypress/integration/tracking/track.spec.js @@ -28,7 +28,7 @@ describe('Tracking', () => { const beacon = interception.request.body.filter((event) => event.type === BeaconType.LOGIN)[0]; expect(beacon.category).to.equal(BeaconCategory.PERSONALIZATION); expect(beacon.type).to.equal(BeaconType.LOGIN); - expect(beacon.event).to.be.an('object'); + expect(beacon.event).to.be.an('object').include.key('shopperId').include.key('userId'); expect(beacon.context).to.be.an('object').include.key('shopperId'); cy.window().then((window) => { @@ -44,7 +44,7 @@ describe('Tracking', () => { const beacon = interception.request.body.filter((event) => event.type === BeaconType.LOGIN)[0]; expect(beacon.category).to.equal(BeaconCategory.PERSONALIZATION); expect(beacon.type).to.equal(BeaconType.LOGIN); - expect(beacon.event).to.be.an('object'); + expect(beacon.event).to.be.an('object').include.key('shopperId').include.key('userId'); expect(beacon.context).to.be.an('object').include.key('shopperId'); expect(beacon.context.shopperId).to.equal(shopperId); }); diff --git a/packages/snap-tracker/src/Tracker.test.ts b/packages/snap-tracker/src/Tracker.test.ts index d1870bece..8cd7e9493 100644 --- a/packages/snap-tracker/src/Tracker.test.ts +++ b/packages/snap-tracker/src/Tracker.test.ts @@ -692,18 +692,23 @@ describe('Tracker', () => { const payload = { id: shopperId }; await tracker.track.shopper.login(payload, siteId); + const trackerContext = tracker.getContext(); + expect(trackEvent).toHaveBeenCalledWith({ type: BeaconType.LOGIN, category: BeaconCategory.PERSONALIZATION, - // @ts-ignore - private property access - context: deepmerge(tracker.context, { + + context: deepmerge(trackerContext, { context: { website: { trackingCode: siteId, }, }, }), - event: {}, + event: { + shopperId, + userId: trackerContext.userId, + }, }); expect(shopperLogin).toHaveBeenCalledWith(payload, siteId); diff --git a/packages/snap-tracker/src/Tracker.ts b/packages/snap-tracker/src/Tracker.ts index 4e9b185e4..1bac5d5e9 100644 --- a/packages/snap-tracker/src/Tracker.ts +++ b/packages/snap-tracker/src/Tracker.ts @@ -305,7 +305,10 @@ export class Tracker { type: BeaconType.LOGIN, category: BeaconCategory.PERSONALIZATION, context, - event: {}, + event: { + userId: this.context.userId, + shopperId: data.id, + }, }; return this.track.event(payload); } From 8beb87ca90dd8134fee7a91b184608f8b64882fe Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 2 Nov 2022 14:09:43 -0700 Subject: [PATCH 3/5] refactor(banners): change readme location --- .../components/Atoms/Merchandising/Banner/Banner.stories.tsx | 2 +- .../Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx index b6d5f8fcf..6fd38c12e 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.stories.tsx @@ -5,7 +5,7 @@ import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks'; import { Banner, BannerProps } from './Banner'; import { componentArgs } from '../../../../utilities'; import { Snapify } from '../../../../utilities/snapify'; -import Readme from '../readme.md'; +import Readme from './readme.md'; import { SearchController } from '@searchspring/snap-controller'; export default { diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx index 608b8781f..03369ce40 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/InlineBanner.stories.tsx @@ -5,7 +5,7 @@ import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks'; import { InlineBanner, InlineBannerProps } from './InlineBanner'; import { componentArgs } from '../../../../utilities'; import { Snapify } from '../../../../utilities/snapify'; -import Readme from '../readme.md'; +import Readme from './readme.md'; import { Layout } from '../../../../types'; import type { Banner } from '@searchspring/snap-store-mobx'; From 01f8ff4b7c6f36f6869297ae1df678fc1c3e15b9 Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 14 Nov 2022 15:52:36 -0800 Subject: [PATCH 4/5] fix(searchcontroller): pre-fetch meta if backfill is set and we dont have the defaultpagesize --- packages/snap-controller/src/Search/SearchController.ts | 9 ++++++++- .../src/Search/Stores/SearchPaginationStore.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/snap-controller/src/Search/SearchController.ts b/packages/snap-controller/src/Search/SearchController.ts index 6e68d32ed..5a843661a 100644 --- a/packages/snap-controller/src/Search/SearchController.ts +++ b/packages/snap-controller/src/Search/SearchController.ts @@ -274,7 +274,14 @@ export class SearchController extends AbstractController { if (this.config.settings?.infinite.backfill && !previousResults.length) { // figure out how many pages of results to backfill and wait on all responses - const pageSize = params.pagination?.pageSize || this.store.pagination.pageSize || this.store.pagination.defaultPageSize; + let pageSize = params.pagination?.pageSize || this.store.pagination.pageSize || this.store.pagination.defaultPageSize; + + if (!pageSize) { + //unfortunatly we need to fetch meta to know the default pagesize before we can continue. + const meta = await this.client.meta(); + pageSize = meta.pagination.defaultPageSize; + } + let pagesNeeded1 = params.pagination?.page && params.pagination?.page > this.config.settings?.infinite.backfill ? this.config.settings?.infinite.backfill diff --git a/packages/snap-store-mobx/src/Search/Stores/SearchPaginationStore.ts b/packages/snap-store-mobx/src/Search/Stores/SearchPaginationStore.ts index f8b87343e..980fb9f17 100644 --- a/packages/snap-store-mobx/src/Search/Stores/SearchPaginationStore.ts +++ b/packages/snap-store-mobx/src/Search/Stores/SearchPaginationStore.ts @@ -34,7 +34,7 @@ export class SearchPaginationStore { this.page = paginationData.page!; this.pageSize = paginationData.pageSize!; this.totalResults = paginationData.totalResults!; - this.defaultPageSize = meta?.pagination?.defaultPageSize! || 24; + this.defaultPageSize = meta?.pagination?.defaultPageSize!; this.totalPages = paginationData.totalPages!; this.pageSizeOptions = [ From 17fa02a7f43b0d83b8dabf403248688088e2be05 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 16 Nov 2022 10:49:58 -0800 Subject: [PATCH 5/5] fix(searchcontroller): backfill page size bugfix --- packages/snap-controller/src/Search/SearchController.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/snap-controller/src/Search/SearchController.ts b/packages/snap-controller/src/Search/SearchController.ts index 5a843661a..9280b89d1 100644 --- a/packages/snap-controller/src/Search/SearchController.ts +++ b/packages/snap-controller/src/Search/SearchController.ts @@ -272,14 +272,13 @@ export class SearchController extends AbstractController { let previousResults = this.previousResults; const backfills = []; + let pageSize = params.pagination?.pageSize || this.store.pagination.pageSize || this.store.pagination.defaultPageSize; if (this.config.settings?.infinite.backfill && !previousResults.length) { // figure out how many pages of results to backfill and wait on all responses - let pageSize = params.pagination?.pageSize || this.store.pagination.pageSize || this.store.pagination.defaultPageSize; - if (!pageSize) { //unfortunatly we need to fetch meta to know the default pagesize before we can continue. const meta = await this.client.meta(); - pageSize = meta.pagination.defaultPageSize; + pageSize = meta.pagination?.defaultPageSize!; } let pagesNeeded1 = @@ -334,7 +333,8 @@ export class SearchController extends AbstractController { } //we need to overwrite the pagination params so the ui doesnt get confused. - response.pagination.pageSize = params.pagination?.pageSize || this.store.pagination.pageSize || this.store.pagination.defaultPageSize; + response.pagination.pageSize = pageSize; + response.pagination.totalPages = Math.ceil(response.pagination.totalResults / response.pagination.pageSize); response.pagination.page = params.pagination?.page; //set the response results after all backfill promises are resolved. @@ -393,6 +393,7 @@ export class SearchController extends AbstractController { afterSearchProfile.stop(); this.log.profile(afterSearchProfile); + // store previous results for infinite usage if (this.config.settings?.infinite) { this.previousResults = JSON.parse(JSON.stringify(response.results)); }