diff --git a/apps/fulfillment-e2e/src/integration/customer-note.cy.ts b/apps/fulfillment-e2e/src/integration/customer-note.cy.ts index ef0de24ef8..d33d7c6d34 100644 --- a/apps/fulfillment-e2e/src/integration/customer-note.cy.ts +++ b/apps/fulfillment-e2e/src/integration/customer-note.cy.ts @@ -1,7 +1,7 @@ import { CustomerNoteModalFragment } from '../support/page_fragments/customer-note-modal.fragment'; -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; -const pickingListsFragment = new PickingListsFragment(); +const listsFragment = new ListsFragment(); const customerNoteFragment = new CustomerNoteModalFragment(); describe('Customer note suite', () => { @@ -12,7 +12,7 @@ describe('Customer note suite', () => { it('should show and hide the customer note modal', () => { // open - pickingListsFragment.getCustomerNoteButtons().click(); + listsFragment.getCustomerNoteButtons().click(); customerNoteFragment.getModal().should('be.visible'); // close diff --git a/apps/fulfillment-e2e/src/integration/fully-picking-a-list.cy.ts b/apps/fulfillment-e2e/src/integration/fully-picking-a-list.cy.ts new file mode 100644 index 0000000000..2b1051ef58 --- /dev/null +++ b/apps/fulfillment-e2e/src/integration/fully-picking-a-list.cy.ts @@ -0,0 +1,40 @@ +import { PickerFragment } from '../support/page_fragments/picker.fragment'; +import { ProductFragment } from '../support/page_fragments/product.fragment'; +import { PickerPage } from '../support/page_objects/picker.page'; + +describe('Fully pick a picking list', () => { + const pickingListId = '37cb241e-f18a-5768-985c-a2d7aff4875e'; + + const pickerPage = new PickerPage(pickingListId); + + const pickerFragment = new PickerFragment(); + const productFragment = new ProductFragment(); + + beforeEach(() => { + cy.clearIndexedDB(); + cy.login(); + pickerPage.visit(); + pickerPage.productFragment.getProducts().should('be.visible'); + + pickerFragment.getProducts().each((product) => { + cy.wrap(product).within(() => { + productFragment.pickAllProductItems(); + productFragment.getSubmitButton().click(); + }); + }); + }); + + it('must have all products on picked tab after done all of them', () => { + pickerFragment.getProducts().then((products) => { + pickerFragment + .getTabCounter(pickerPage.getPickedTab()) + .should('contain.text', products.length); + }); + + pickerFragment.getPickingCompleteImage().should('be.visible'); + pickerFragment.getFinishPickingButton().should('be.visible'); + + pickerFragment.getFinishPickingButton().eq(0).click(); + cy.location('pathname').should('be.eq', `/`); + }); +}); diff --git a/apps/fulfillment-e2e/src/integration/fully-picking-a-picklist.cy.ts b/apps/fulfillment-e2e/src/integration/fully-picking-a-picklist.cy.ts deleted file mode 100644 index a63e1701e9..0000000000 --- a/apps/fulfillment-e2e/src/integration/fully-picking-a-picklist.cy.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { PickingProductFragment } from '../support/page_fragments/picking-product.fragment'; -import { PickingFragment } from '../support/page_fragments/picking.fragment'; -import { PickingPage } from '../support/page_objects/picking.page'; - -describe('Fully pick a picking list', () => { - const pickingListId = '37cb241e-f18a-5768-985c-a2d7aff4875e'; - - const pickingPage = new PickingPage(pickingListId); - - const pickingFragment = new PickingFragment(); - const pickingProductFragment = new PickingProductFragment(); - - beforeEach(() => { - cy.clearIndexedDB(); - cy.login(); - pickingPage.visit(); - pickingPage.pickingProductFragment.getProducts().should('be.visible'); - - pickingFragment.getProducts().each((product) => { - cy.wrap(product).within(() => { - pickingProductFragment.pickAllProductItems(); - pickingProductFragment.getSubmitButton().click(); - }); - }); - }); - - it('must have all products on picked tab after done all of them', () => { - pickingFragment.getProducts().then((products) => { - pickingFragment - .getTabCounter(pickingPage.getPickedTab()) - .should('contain.text', products.length); - }); - - pickingFragment.getPickingCompleteImage().should('be.visible'); - pickingFragment.getFinishPickingButton().should('be.visible'); - - pickingFragment.getFinishPickingButton().eq(0).click(); - cy.location('pathname').should('be.eq', `/`); - }); -}); diff --git a/apps/fulfillment-e2e/src/integration/header-no-customer-note.cy.ts b/apps/fulfillment-e2e/src/integration/header-no-customer-note.cy.ts new file mode 100644 index 0000000000..45514ee563 --- /dev/null +++ b/apps/fulfillment-e2e/src/integration/header-no-customer-note.cy.ts @@ -0,0 +1,19 @@ +import { PickerHeaderFragment } from '../support/page_fragments/picker-header.fragment'; +import { PickerPage } from '../support/page_objects/picker.page'; + +const pickingListId = 'd5bf20f1-7f36-568d-85b5-e4502acbcc82'; + +const pickerPage = new PickerPage(pickingListId); +const pickerHeaderFragment = new PickerHeaderFragment(); + +describe('picking header with no customer note', () => { + beforeEach(() => { + cy.clearIndexedDB(); + cy.login(); + pickerPage.visit(); + }); + + it('should not display customer note icon', () => { + pickerHeaderFragment.getCustomerNoteIcon().should('not.exist'); + }); +}); diff --git a/apps/fulfillment-e2e/src/integration/lists-search.cy.ts b/apps/fulfillment-e2e/src/integration/lists-search.cy.ts new file mode 100644 index 0000000000..61299c144f --- /dev/null +++ b/apps/fulfillment-e2e/src/integration/lists-search.cy.ts @@ -0,0 +1,51 @@ +import { ListsHeaderFragment } from '../support/page_fragments/lists-header.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; +import { UserProfileFragment } from '../support/page_fragments/user-profile-modal.fragment'; + +const listsFragment = new ListsFragment(); +const headerFragment = new ListsHeaderFragment(); +const userProfileFragment = new UserProfileFragment(); + +describe('Picking Lists Search', () => { + beforeEach(() => { + cy.clearIndexedDB(); + cy.login(); + + headerFragment.getSearch().click(); + }); + + it('should show correct picking items after search', () => { + listsFragment.getWrapper().should('be.visible'); + headerFragment + .getSearchInput() + .should('be.visible') + .should('have.attr', 'placeholder'); + + listsFragment.getNoItemsFallbackHeading().should('be.visible'); + listsFragment.getStartSearchingFallbackImage().should('be.visible'); + + headerFragment.getSearchInput().type('D', { force: true }); + listsFragment.getNoItemsFallbackHeading().should('be.visible'); + listsFragment.getStartSearchingFallbackImage().should('be.visible'); + + headerFragment.getSearchInput().type('E', { force: true }); + listsFragment.getPickingListsItems().should('have.length.at.least', 1); + + headerFragment.getSearchClearButton().click(); + listsFragment.getNoItemsFallbackHeading().should('be.visible'); + listsFragment.getStartSearchingFallbackImage().should('be.visible'); + + headerFragment.getSearchInput().type('something', { force: true }); + listsFragment.getNoItemsFallbackHeading().should('be.visible'); + listsFragment.getNoPickingResultsFallbackImage().should('be.visible'); + + headerFragment.getSearchBackButton().click(); + listsFragment.getNoItemsFallback().should('not.exist'); + headerFragment.getTitle().should('be.visible'); + listsFragment.getPickingListsItems().should('have.length.at.least', 1); + + headerFragment.getUserIcon().should('be.visible').click(); + + userProfileFragment.getWrapper().should('be.visible'); + }); +}); diff --git a/apps/fulfillment-e2e/src/integration/lists.cy.ts b/apps/fulfillment-e2e/src/integration/lists.cy.ts new file mode 100644 index 0000000000..e597ac46eb --- /dev/null +++ b/apps/fulfillment-e2e/src/integration/lists.cy.ts @@ -0,0 +1,22 @@ +import { ListsHeaderFragment } from '../support/page_fragments/lists-header.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; + +const listsFragment = new ListsFragment(); +const headerFragment = new ListsHeaderFragment(); + +describe('Picking Lists', () => { + beforeEach(() => { + cy.clearIndexedDB(); + cy.login(); + }); + + it('should display picking lists', () => { + headerFragment.getSearchIcon().should('be.visible'); + headerFragment.getUserIcon().should('be.visible'); + headerFragment.getHeadline().should('contain.text', 'Pick lists'); + listsFragment.getSortButton().should('be.visible'); + + listsFragment.getWrapper().should('be.visible'); + listsFragment.getPickingListsItems().should('be.visible'); + }); +}); diff --git a/apps/fulfillment-e2e/src/integration/partialy-picking-list.cy.ts b/apps/fulfillment-e2e/src/integration/partialy-picking-list.cy.ts new file mode 100644 index 0000000000..dd956f5508 --- /dev/null +++ b/apps/fulfillment-e2e/src/integration/partialy-picking-list.cy.ts @@ -0,0 +1,137 @@ +import { CustomerNoteModalFragment } from '../support/page_fragments/customer-note-modal.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; +import { PickerHeaderFragment } from '../support/page_fragments/picker-header.fragment'; +import { PickerFragment } from '../support/page_fragments/picker.fragment'; +import { ProductFragment } from '../support/page_fragments/product.fragment'; +import { UserProfileFragment } from '../support/page_fragments/user-profile-modal.fragment'; +import { PickerPage } from '../support/page_objects/picker.page'; + +const pickingListId = '37cb241e-f18a-5768-985c-a2d7aff4875e'; + +const pickerPage = new PickerPage(pickingListId); + +const listsFragment = new ListsFragment(); +const productFragment = new ProductFragment(); +const pickerFragment = new PickerFragment(); +const pickerHeaderFragment = new PickerHeaderFragment(); +const customerNoteModalFragment = new CustomerNoteModalFragment(); +const userProfileFragment = new UserProfileFragment(); + +describe('Partial picking a picklist', () => { + beforeEach(() => { + cy.clearIndexedDB(); + cy.login(); + pickerPage.visit(); + pickerPage.productFragment.getProducts().should('be.visible'); + }); + + it('should check partial picking', () => { + // See picking lists id + pickerHeaderFragment + .getPickingListsTitle() + .should('be.visible') + .and('contain', 'DE--19'); + + // See customer note + pickerHeaderFragment.getCustomerNoteIcon().should('be.visible').click(); + customerNoteModalFragment.getModal().should('be.visible'); + customerNoteModalFragment.getCloseButton().click(); + + // See user profile modal + pickerHeaderFragment.getUserIcon().should('be.visible').click(); + userProfileFragment.getWrapper().should('be.visible'); + userProfileFragment.getCloseButton().should('be.visible').click(); + userProfileFragment.getWrapper().should('not.be.visible'); + + // Setting initial number of products in each tab + pickerPage + .getNotPickedProductsNumber() + .as('initialNotPickedProductsNumber'); + pickerPage.getPickedProductsNumber().as('initialPickedProductsNumber'); + pickerPage.getNotFoundProductsNumber().as('initialNotFoundProductsNumber'); + + // Check fallbacks on "Picked" and "Not Found" tabs + pickerPage.insideTabContent(pickerPage.getPickedTab(), () => { + pickerFragment.getNoItemsTitle().should('be.visible'); + pickerFragment.getNoItemsImage().should('be.visible'); + }); + + pickerPage.insideTabContent(pickerPage.getNotFoundTab(), () => { + pickerFragment.getNoItemsTitle().should('be.visible'); + pickerFragment.getNoItemsImage().should('be.visible'); + }); + + // For the first item, select only part of the quantity. + pickerPage.insideTabContent(pickerPage.getNotPickedTab(), () => { + pickerPage.pickProduct(productFragment.getProducts().eq(0), 1); + }); + + // Verify that the Partial Picking Modal is opened. + pickerFragment.getPartialPickingDialog().should('be.visible'); + + // Confirm partial picking + pickerFragment.getPartialPickingConfirmButton().click(); + + // Dialog should be closed + pickerFragment.getPartialPickingDialog().should('not.be.visible'); + + // Verify that the picking item is moved to the "Picked" tab with the entered quantity, and the "Not found" tab with the not entered quantity. + // Not Picked tab list should have x-1 products + cy.get('@initialNotPickedProductsNumber').then((initCount) => { + pickerPage + .getNotPickedProductsNumber() + .should('be.eq', Number(initCount) - 1); + }); + + // Picked tab list should have x+1 products + cy.get('@initialPickedProductsNumber').then((initCount) => { + pickerPage + .getPickedProductsNumber() + .should('be.eq', Number(initCount) + 1); + }); + + // Not Found tab list should have x+1 products + cy.get('@initialNotFoundProductsNumber').then((initCount) => { + pickerPage + .getNotFoundProductsNumber() + .should('be.eq', Number(initCount) + 1); + }); + + // Pick the rest of the products + pickerPage.insideTabContent(pickerPage.getNotPickedTab(), () => { + productFragment.getProducts().each((product) => { + cy.wrap(product).within(() => { + productFragment.pickAllProductItems(); + productFragment.getSubmitButton().click(); + }); + }); + + // Verify that the congratulation text and illustration are shown + pickerFragment.getPickingCompleteImage().should('be.visible'); + pickerFragment.getPickingCompleteTitle().should('be.visible'); + pickerFragment.getPickingCompleteText().should('be.visible'); + }); + + // Verify that the “Finish picking” button appears + const tabs = [ + pickerPage.getNotPickedTab(), + pickerPage.getPickedTab(), + pickerPage.getNotFoundTab(), + ]; + + tabs.forEach((tab) => { + pickerPage.insideTabContent(tab, () => { + pickerFragment.getFinishPickingButton().should('be.visible'); + }); + }); + + // Tap the “Finish picking” button + pickerPage.insideTabContent(pickerPage.getNotPickedTab(), () => { + pickerFragment.getFinishPickingButton().click(); + }); + + // Verify that the Picking lists page is shown + cy.location('pathname').should('be.eq', `/`); + listsFragment.getWrapper().should('be.visible'); + }); +}); diff --git a/apps/fulfillment-e2e/src/integration/partialy-picking-picklist.cy.ts b/apps/fulfillment-e2e/src/integration/partialy-picking-picklist.cy.ts deleted file mode 100644 index 2f54a3d76b..0000000000 --- a/apps/fulfillment-e2e/src/integration/partialy-picking-picklist.cy.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { CustomerNoteModalFragment } from '../support/page_fragments/customer-note-modal.fragment'; -import { PickingHeaderFragment } from '../support/page_fragments/picking-header.fragment'; -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; -import { PickingProductFragment } from '../support/page_fragments/picking-product.fragment'; -import { PickingFragment } from '../support/page_fragments/picking.fragment'; -import { PickingPage } from '../support/page_objects/picking.page'; -import { UserProfileFragment } from '../support/page_fragments/user-profile-modal.fragment'; - -const pickingListId = '37cb241e-f18a-5768-985c-a2d7aff4875e'; - -const pickingPage = new PickingPage(pickingListId); - -const pickingListsFragment = new PickingListsFragment(); -const pickingProductFragment = new PickingProductFragment(); -const pickingFragment = new PickingFragment(); -const pickingHeaderFragment = new PickingHeaderFragment(); -const customerNoteModalFragment = new CustomerNoteModalFragment(); -const userProfileFragment = new UserProfileFragment(); - -describe('Partial picking a picklist', () => { - beforeEach(() => { - cy.clearIndexedDB(); - cy.login(); - pickingPage.visit(); - pickingPage.pickingProductFragment.getProducts().should('be.visible'); - }); - - it('should check partial picking', () => { - // See picking lists id - pickingHeaderFragment - .getPickingListsTitle() - .should('be.visible') - .and('contain', 'DE--19'); - - // See customer note - pickingHeaderFragment.getCustomerNoteIcon().should('be.visible').click(); - customerNoteModalFragment.getModal().should('be.visible'); - customerNoteModalFragment.getCloseButton().click(); - - // See user profile modal - pickingHeaderFragment.getUserIcon().should('be.visible').click(); - userProfileFragment.getWrapper().should('be.visible'); - userProfileFragment.getCloseButton().should('be.visible').click(); - userProfileFragment.getWrapper().should('not.be.visible'); - - // Setting initial number of products in each tab - pickingPage - .getNotPickedProductsNumber() - .as('initialNotPickedProductsNumber'); - pickingPage.getPickedProductsNumber().as('initialPickedProductsNumber'); - pickingPage.getNotFoundProductsNumber().as('initialNotFoundProductsNumber'); - - // Check fallbacks on "Picked" and "Not Found" tabs - pickingPage.insideTabContent(pickingPage.getPickedTab(), () => { - pickingFragment.getNoItemsTitle().should('be.visible'); - pickingFragment.getNoItemsImage().should('be.visible'); - }); - - pickingPage.insideTabContent(pickingPage.getNotFoundTab(), () => { - pickingFragment.getNoItemsTitle().should('be.visible'); - pickingFragment.getNoItemsImage().should('be.visible'); - }); - - // For the first item, select only part of the quantity. - pickingPage.insideTabContent(pickingPage.getNotPickedTab(), () => { - pickingPage.pickProduct(pickingProductFragment.getProducts().eq(0), 1); - }); - - // Verify that the Partial Picking Modal is opened. - pickingFragment.getPartialPickingDialog().should('be.visible'); - - // Confirm partial picking - pickingFragment.getPartialPickingConfirmButton().click(); - - // Dialog should be closed - pickingFragment.getPartialPickingDialog().should('not.be.visible'); - - // Verify that the picking item is moved to the "Picked" tab with the entered quantity, and the "Not found" tab with the not entered quantity. - // Not Picked tab list should have x-1 products - cy.get('@initialNotPickedProductsNumber').then((initCount) => { - pickingPage - .getNotPickedProductsNumber() - .should('be.eq', Number(initCount) - 1); - }); - - // Picked tab list should have x+1 products - cy.get('@initialPickedProductsNumber').then((initCount) => { - pickingPage - .getPickedProductsNumber() - .should('be.eq', Number(initCount) + 1); - }); - - // Not Found tab list should have x+1 products - cy.get('@initialNotFoundProductsNumber').then((initCount) => { - pickingPage - .getNotFoundProductsNumber() - .should('be.eq', Number(initCount) + 1); - }); - - // Pick the rest of the products - pickingPage.insideTabContent(pickingPage.getNotPickedTab(), () => { - pickingProductFragment.getProducts().each((product) => { - cy.wrap(product).within(() => { - pickingProductFragment.pickAllProductItems(); - pickingProductFragment.getSubmitButton().click(); - }); - }); - - // Verify that the congratulation text and illustration are shown - pickingFragment.getPickingCompleteImage().should('be.visible'); - pickingFragment.getPickingCompleteTitle().should('be.visible'); - pickingFragment.getPickingCompleteText().should('be.visible'); - }); - - // Verify that the “Finish picking” button appears - const tabs = [ - pickingPage.getNotPickedTab(), - pickingPage.getPickedTab(), - pickingPage.getNotFoundTab(), - ]; - - tabs.forEach((tab) => { - pickingPage.insideTabContent(tab, () => { - pickingFragment.getFinishPickingButton().should('be.visible'); - }); - }); - - // Tap the “Finish picking” button - pickingPage.insideTabContent(pickingPage.getNotPickedTab(), () => { - pickingFragment.getFinishPickingButton().click(); - }); - - // Verify that the Picking lists page is shown - cy.location('pathname').should('be.eq', `/`); - pickingListsFragment.getWrapper().should('be.visible'); - }); -}); diff --git a/apps/fulfillment-e2e/src/integration/picking-header-no-customer-note.cy.ts b/apps/fulfillment-e2e/src/integration/picking-header-no-customer-note.cy.ts deleted file mode 100644 index f253af4c05..0000000000 --- a/apps/fulfillment-e2e/src/integration/picking-header-no-customer-note.cy.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { PickingPage } from '../support/page_objects/picking.page'; -import { PickingHeaderFragment } from '../support/page_fragments/picking-header.fragment'; - -const pickingListId = 'd5bf20f1-7f36-568d-85b5-e4502acbcc82'; - -const pickingPage = new PickingPage(pickingListId); -const pickingHeaderFragment = new PickingHeaderFragment(); - -describe('picking header with no customer note', () => { - beforeEach(() => { - cy.clearIndexedDB(); - cy.login(); - pickingPage.visit(); - }); - - it('should not display customer note icon', () => { - pickingHeaderFragment.getCustomerNoteIcon().should('not.exist'); - }); -}); diff --git a/apps/fulfillment-e2e/src/integration/picking-lists-search.cy.ts b/apps/fulfillment-e2e/src/integration/picking-lists-search.cy.ts deleted file mode 100644 index aeccc09d1f..0000000000 --- a/apps/fulfillment-e2e/src/integration/picking-lists-search.cy.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { PickingListsHeaderFragment } from '../support/page_fragments/picking-lists-header.fragment'; -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; -import { UserProfileFragment } from '../support/page_fragments/user-profile-modal.fragment'; - -const pickingListsFragment = new PickingListsFragment(); -const headerFragment = new PickingListsHeaderFragment(); -const userProfileFragment = new UserProfileFragment(); - -describe('Picking Lists Search', () => { - beforeEach(() => { - cy.clearIndexedDB(); - cy.login(); - - headerFragment.getSearch().click(); - }); - - it('should show correct picking items after search', () => { - pickingListsFragment.getWrapper().should('be.visible'); - headerFragment - .getSearchInput() - .should('be.visible') - .should('have.attr', 'placeholder'); - - pickingListsFragment.getNoItemsFallbackHeading().should('be.visible'); - pickingListsFragment.getStartSearchingFallbackImage().should('be.visible'); - - headerFragment.getSearchInput().type('D', { force: true }); - pickingListsFragment.getNoItemsFallbackHeading().should('be.visible'); - pickingListsFragment.getStartSearchingFallbackImage().should('be.visible'); - - headerFragment.getSearchInput().type('E', { force: true }); - pickingListsFragment - .getPickingListsItems() - .should('have.length.at.least', 1); - - headerFragment.getSearchClearButton().click(); - pickingListsFragment.getNoItemsFallbackHeading().should('be.visible'); - pickingListsFragment.getStartSearchingFallbackImage().should('be.visible'); - - headerFragment.getSearchInput().type('something', { force: true }); - pickingListsFragment.getNoItemsFallbackHeading().should('be.visible'); - pickingListsFragment - .getNoPickingResultsFallbackImage() - .should('be.visible'); - - headerFragment.getSearchBackButton().click(); - pickingListsFragment.getNoItemsFallback().should('not.exist'); - headerFragment.getTitle().should('be.visible'); - pickingListsFragment - .getPickingListsItems() - .should('have.length.at.least', 1); - - headerFragment.getUserIcon().should('be.visible').click(); - - userProfileFragment.getWrapper().should('be.visible'); - }); -}); diff --git a/apps/fulfillment-e2e/src/integration/picking-lists.cy.ts b/apps/fulfillment-e2e/src/integration/picking-lists.cy.ts deleted file mode 100644 index 4526b97d82..0000000000 --- a/apps/fulfillment-e2e/src/integration/picking-lists.cy.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; -import { PickingListsHeaderFragment } from '../support/page_fragments/picking-lists-header.fragment'; - -const pickingListsFragment = new PickingListsFragment(); -const headerFragment = new PickingListsHeaderFragment(); - -describe('Picking Lists', () => { - beforeEach(() => { - cy.clearIndexedDB(); - cy.login(); - }); - - it('should display picking lists', () => { - headerFragment.getSearchIcon().should('be.visible'); - headerFragment.getUserIcon().should('be.visible'); - headerFragment.getHeadline().should('contain.text', 'Pick lists'); - pickingListsFragment.getSortButton().should('be.visible'); - - pickingListsFragment.getWrapper().should('be.visible'); - pickingListsFragment.getPickingListsItems().should('be.visible'); - }); -}); diff --git a/apps/fulfillment-e2e/src/integration/start-picking-picklist-in-progress.cy.ts b/apps/fulfillment-e2e/src/integration/start-picking-list-in-progress.cy.ts similarity index 68% rename from apps/fulfillment-e2e/src/integration/start-picking-picklist-in-progress.cy.ts rename to apps/fulfillment-e2e/src/integration/start-picking-list-in-progress.cy.ts index 8f79b91c01..da84df1951 100644 --- a/apps/fulfillment-e2e/src/integration/start-picking-picklist-in-progress.cy.ts +++ b/apps/fulfillment-e2e/src/integration/start-picking-list-in-progress.cy.ts @@ -1,7 +1,7 @@ import { CustomerNoteFragment } from '../support/page_fragments/customer-note.fragment'; -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; -const pickingListsFragment = new PickingListsFragment(); +const listsFragment = new ListsFragment(); const customerNoteFragment = new CustomerNoteFragment(); describe('pick a picking list in progress', () => { @@ -11,7 +11,7 @@ describe('pick a picking list in progress', () => { cy.mockPickingInProgress(); // open first picking which is mocked as In Progress - pickingListsFragment.getStartPickingButtons().eq(0).click(); + listsFragment.getStartPickingButtons().eq(0).click(); // safe the url cy.location('pathname').as('openedPickingUrl'); // wait for event handlers initialization @@ -28,21 +28,19 @@ describe('pick a picking list in progress', () => { cy.location('pathname').should('be.equal', url); }); - pickingListsFragment.pickingInProgressModal.getModal().should('be.visible'); + listsFragment.pickingInProgressModal.getModal().should('be.visible'); }); describe('and picking in progress modal is closed', () => { beforeEach(() => { - pickingListsFragment.pickingInProgressModal.getCloseButton().click(); + listsFragment.pickingInProgressModal.getCloseButton().click(); }); it('should hide modal and navigate back to the picking list', () => { - pickingListsFragment.pickingInProgressModal - .getModal() - .should('not.be.visible'); + listsFragment.pickingInProgressModal.getModal().should('not.be.visible'); cy.location('pathname').should('be.equal', '/'); - pickingListsFragment.getPickingListsItems().should('be.visible'); + listsFragment.getPickingListsItems().should('be.visible'); }); }); }); diff --git a/apps/fulfillment-e2e/src/integration/start-picking-picklist-with-customer-note.cy.ts b/apps/fulfillment-e2e/src/integration/start-picking-list-with-customer-note.cy.ts similarity index 90% rename from apps/fulfillment-e2e/src/integration/start-picking-picklist-with-customer-note.cy.ts rename to apps/fulfillment-e2e/src/integration/start-picking-list-with-customer-note.cy.ts index 68391b69b4..ea8b1022dd 100644 --- a/apps/fulfillment-e2e/src/integration/start-picking-picklist-with-customer-note.cy.ts +++ b/apps/fulfillment-e2e/src/integration/start-picking-list-with-customer-note.cy.ts @@ -1,12 +1,12 @@ import { CustomerNoteFragment } from '../support/page_fragments/customer-note.fragment'; import { DiscardModalFragment } from '../support/page_fragments/discard-modal.fragment'; -import { PickingHeaderFragment } from '../support/page_fragments/picking-header.fragment'; -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; -import { PickingFragment } from '../support/page_fragments/picking.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; +import { PickerHeaderFragment } from '../support/page_fragments/picker-header.fragment'; +import { PickerFragment } from '../support/page_fragments/picker.fragment'; -const pickingListsFragment = new PickingListsFragment(); +const listsFragment = new ListsFragment(); const customerNoteFragment = new CustomerNoteFragment(); -const pickingHeaderFragment = new PickingHeaderFragment(); +const pickerHeaderFragment = new PickerHeaderFragment(); const discardModalFragment = new DiscardModalFragment(); describe('Start picking a picklist with customer note', () => { @@ -14,7 +14,7 @@ describe('Start picking a picklist with customer note', () => { cy.clearIndexedDB(); cy.login(); - pickingListsFragment.getStartPickingButtons().eq(0).click(); + listsFragment.getStartPickingButtons().eq(0).click(); }); it('check Customer Note page', () => { @@ -45,7 +45,7 @@ describe('Start picking a picklist with customer note', () => { }); describe('and “Proceed to picking” button is clicked', () => { - const pickingFragment = new PickingFragment(); + const pickingFragment = new PickerFragment(); beforeEach(() => { customerNoteFragment.getProceedToPickingButton().should('be.visible'); // eslint-disable-next-line cypress/no-unnecessary-waiting @@ -67,7 +67,7 @@ describe('Start picking a picklist with customer note', () => { // Due to a cypress bug https://github.com/cypress-io/cypress/issues/26905, // the only meaningful way to check visibility is in the slots. discardModalFragment.getContent().should('not.be.visible'); - pickingHeaderFragment.getBackButton().click(); + pickerHeaderFragment.getBackButton().click(); discardModalFragment.getContent().should('be.visible'); // should hide discard modal @@ -76,7 +76,7 @@ describe('Start picking a picklist with customer note', () => { cy.location('pathname').should('to.match', /^\/picking-list/); // should navigate back - pickingHeaderFragment.getBackButton().click(); + pickerHeaderFragment.getBackButton().click(); discardModalFragment.getDiscardButton().click(); cy.location('pathname').should('to.match', /^\/customer-note-info/); diff --git a/apps/fulfillment-e2e/src/integration/user-profile.cy.ts b/apps/fulfillment-e2e/src/integration/user-profile.cy.ts index 98a1d31702..4a769d4ca1 100644 --- a/apps/fulfillment-e2e/src/integration/user-profile.cy.ts +++ b/apps/fulfillment-e2e/src/integration/user-profile.cy.ts @@ -1,21 +1,21 @@ -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; +import { ListsHeaderFragment } from '../support/page_fragments/lists-header.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; +import { PickerHeaderFragment } from '../support/page_fragments/picker-header.fragment'; import { UserProfileFragment } from '../support/page_fragments/user-profile-modal.fragment'; import { LoginPage } from '../support/page_objects/login.page'; -import { PickingHeaderFragment } from '../support/page_fragments/picking-header.fragment'; -import { PickingListsHeaderFragment } from '../support/page_fragments/picking-lists-header.fragment'; -const pickingListsFragment = new PickingListsFragment(); +const listsFragment = new ListsFragment(); const userProfileFragment = new UserProfileFragment(); const loginPage = new LoginPage(); -const pickingHeaderFragment = new PickingHeaderFragment(); -const pickingListsHeaderFragment = new PickingListsHeaderFragment(); +const pickerHeaderFragment = new PickerHeaderFragment(); +const listsHeaderFragment = new ListsHeaderFragment(); describe('When a user opens the user profile modal', () => { beforeEach(() => { cy.clearIndexedDB(); cy.login(); - pickingListsHeaderFragment.getUserIcon().click(); + listsHeaderFragment.getUserIcon().click(); }); it('should display modal', () => { @@ -40,7 +40,7 @@ describe('When a user opens the user profile modal', () => { cy.mockSyncPending(); cy.visit('/'); - pickingListsHeaderFragment.getUserIcon().click(); + listsHeaderFragment.getUserIcon().click(); }); it('should show message and disable log out button', () => { @@ -58,9 +58,9 @@ describe('When a user opens the user profile modal', () => { describe('and picking is in progress', () => { beforeEach(() => { userProfileFragment.getCloseButton().click(); - pickingListsFragment.getStartPickingButtons().eq(1).click(); + listsFragment.getStartPickingButtons().eq(1).click(); - pickingHeaderFragment.getUserIcon().click(); + pickerHeaderFragment.getUserIcon().click(); }); it('should show message and disable log out button', () => { @@ -80,9 +80,9 @@ describe('When a user opens the user profile modal', () => { beforeEach(() => { cy.mockSyncPending(); cy.visit('/'); - pickingListsFragment.getStartPickingButtons().eq(1).click(); + listsFragment.getStartPickingButtons().eq(1).click(); - pickingHeaderFragment.getUserIcon().click(); + pickerHeaderFragment.getUserIcon().click(); }); it('should show picking in progress message and disable log out button', () => { @@ -103,15 +103,15 @@ describe('When a user opens the user profile modal', () => { cy.intercept('PATCH', '**/picking-lists/**').as('startPicking'); userProfileFragment.getCloseButton().click(); - pickingListsFragment.getStartPickingButtons().eq(1).click(); + listsFragment.getStartPickingButtons().eq(1).click(); cy.wait('@startPicking', { timeout: 30000 }); cy.visit('/'); - pickingListsFragment.getPickingListsItems().should('have.length', 1); + listsFragment.getPickingListsItems().should('have.length', 1); - pickingListsHeaderFragment.getUserIcon().click(); + listsHeaderFragment.getUserIcon().click(); userProfileFragment.getWrapper().should('be.visible'); @@ -122,7 +122,7 @@ describe('When a user opens the user profile modal', () => { userProfileFragment.getWrapper().should('not.be.visible'); cy.location('pathname').should('not.to.match', /^\/login/); loginPage.getWrapper().should('not.exist'); - pickingListsFragment.getPickingListsItems().should('have.length', 2); + listsFragment.getPickingListsItems().should('have.length', 2); }); }); }); diff --git a/apps/fulfillment-e2e/src/integration/warehouse-selection.cy.ts b/apps/fulfillment-e2e/src/integration/warehouse-selection.cy.ts index 2b139b7af4..2e371db1c7 100644 --- a/apps/fulfillment-e2e/src/integration/warehouse-selection.cy.ts +++ b/apps/fulfillment-e2e/src/integration/warehouse-selection.cy.ts @@ -1,14 +1,14 @@ -import { WarehouseSelectionPage } from '../support/page_objects/warehouse-selection.page'; -import { WarehouseSelectionListFragment } from '../support/page_fragments/warehouse-selection-list.fragment'; import { HeaderFragment } from '../support/page_fragments/header.fragment'; +import { ListsFragment } from '../support/page_fragments/lists.fragment'; import { UserProfileFragment } from '../support/page_fragments/user-profile-modal.fragment'; -import { PickingListsFragment } from '../support/page_fragments/picking-lists.fragment'; +import { WarehouseSelectionListFragment } from '../support/page_fragments/warehouse-selection-list.fragment'; +import { WarehouseSelectionPage } from '../support/page_objects/warehouse-selection.page'; const warehouseSelectionPage = new WarehouseSelectionPage(); const warehouseSelectionListFragment = new WarehouseSelectionListFragment(); const headerFragment = new HeaderFragment(); const userProfileFragment = new UserProfileFragment(); -const pickingListsFragment = new PickingListsFragment(); +const listsFragment = new ListsFragment(); describe('Warehouse selection', () => { beforeEach(() => { @@ -40,6 +40,6 @@ describe('Warehouse selection', () => { warehouseSelectionListFragment.getWarehouseSelectionButtons().eq(0).click(); cy.location('pathname').should('be.equal', '/'); - pickingListsFragment.getWrapper().should('be.visible'); + listsFragment.getWrapper().should('be.visible'); }); }); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/customer-note-modal.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/customer-note-modal.fragment.ts index b17d1f5581..d9f69f9fbe 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/customer-note-modal.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/customer-note-modal.fragment.ts @@ -1,5 +1,5 @@ export class CustomerNoteModalFragment { - getWrapper = () => cy.get('oryx-customer-note-modal'); + getWrapper = () => cy.get('oryx-picking-customer-note-modal'); getModal = () => this.getWrapper().find('dialog'); getCloseButton = () => this.getWrapper().find('oryx-button').eq(0); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/customer-note.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/customer-note.fragment.ts index 4cccf81045..75485f227e 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/customer-note.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/customer-note.fragment.ts @@ -1,11 +1,11 @@ import { PickingInProgressModalFragment } from './picking-in-progress-modal.fragment'; export class CustomerNoteFragment { - getWrapper = () => cy.get('oryx-customer-note'); + getWrapper = () => cy.get('oryx-picking-customer-note'); getHeadline = () => this.getWrapper().find('oryx-heading'); getIllustration = () => this.getWrapper().find('oryx-image'); - getNavigateBackButton = () => this.getWrapper().find('oryx-navigate-back'); + getNavigateBackButton = () => this.getWrapper().find('oryx-button').eq(0); getNote = () => this.getWrapper().find('p'); - getProceedToPickingButton = () => this.getWrapper().find('oryx-button').eq(0); + getProceedToPickingButton = () => this.getWrapper().find('oryx-button').eq(1); pickingInProgressModal = new PickingInProgressModalFragment(); } diff --git a/apps/fulfillment-e2e/src/support/page_fragments/discard-modal.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/discard-modal.fragment.ts index 719d51b921..f16ec5fc01 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/discard-modal.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/discard-modal.fragment.ts @@ -1,5 +1,5 @@ export class DiscardModalFragment { - getWrapper = () => cy.get('oryx-discard-picking'); + getWrapper = () => cy.get('oryx-picking-discard-modal'); getContent = () => this.getWrapper().shadow().find('slot[part="body"]'); getCancelButton = () => this.getWrapper().find('oryx-button').eq(0); getDiscardButton = () => this.getWrapper().find('oryx-button').eq(1); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/filters.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/filters.fragment.ts index f00d78aa7b..59fd431ac1 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/filters.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/filters.fragment.ts @@ -1,6 +1,6 @@ -import { PickingListsFragment } from './picking-lists.fragment'; +import { ListsFragment } from './lists.fragment'; -const pickingListsFragment = new PickingListsFragment(); +const listsFragment = new ListsFragment(); export class FiltersFragment { getFilterButton = () => cy.get('oryx-picking-filter-button'); @@ -21,7 +21,7 @@ export class FiltersFragment { getSortingOption = (eq: number) => this.getFiltersModal().find('input').eq(eq); shouldChangePickingListsOrder = (isChange: boolean) => - pickingListsFragment + listsFragment .getPickingListsItems() .eq(0) .find('.total oryx-button') diff --git a/apps/fulfillment-e2e/src/support/page_fragments/header.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/header.fragment.ts index 67c0eb54cd..32aa1a9f8b 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/header.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/header.fragment.ts @@ -1,5 +1,5 @@ export class HeaderFragment { - getWrapper = () => cy.get('oryx-header'); + getWrapper = () => cy.get('oryx-picking-header'); getUserIcon = () => this.getWrapper().find('oryx-site-navigation-item'); } diff --git a/apps/fulfillment-e2e/src/support/page_fragments/picking-lists-header.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/lists-header.fragment.ts similarity index 93% rename from apps/fulfillment-e2e/src/support/page_fragments/picking-lists-header.fragment.ts rename to apps/fulfillment-e2e/src/support/page_fragments/lists-header.fragment.ts index 97ec738309..88c818855d 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/picking-lists-header.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/lists-header.fragment.ts @@ -1,4 +1,4 @@ -export class PickingListsHeaderFragment { +export class ListsHeaderFragment { getWrapper = () => cy.get('oryx-picking-lists-header'); getSearch = () => this.getWrapper().find('oryx-search'); getHeadline = () => this.getWrapper().find('oryx-heading'); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/picking-lists.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/lists.fragment.ts similarity index 96% rename from apps/fulfillment-e2e/src/support/page_fragments/picking-lists.fragment.ts rename to apps/fulfillment-e2e/src/support/page_fragments/lists.fragment.ts index 6f36f77d8a..c5dfd87ac1 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/picking-lists.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/lists.fragment.ts @@ -1,6 +1,6 @@ import { PickingInProgressModalFragment } from './picking-in-progress-modal.fragment'; -export class PickingListsFragment { +export class ListsFragment { getWrapper = () => cy.get('oryx-picking-lists'); getSortButton = () => this.getWrapper().find('oryx-picking-filter-button'); getNoItemsFallback = () => cy.get('.no-items-fallback'); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/picking-header.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/picker-header.fragment.ts similarity index 76% rename from apps/fulfillment-e2e/src/support/page_fragments/picking-header.fragment.ts rename to apps/fulfillment-e2e/src/support/page_fragments/picker-header.fragment.ts index ae1b0bd172..95b2572083 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/picking-header.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/picker-header.fragment.ts @@ -1,5 +1,5 @@ -export class PickingHeaderFragment { - getWrapper = () => cy.get('oryx-picking-header'); +export class PickerHeaderFragment { + getWrapper = () => cy.get('oryx-picking-picker-header'); getCustomerNoteIcon = () => this.getWrapper().find('button[aria-label="Customer note"]'); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/picking.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/picker.fragment.ts similarity index 93% rename from apps/fulfillment-e2e/src/support/page_fragments/picking.fragment.ts rename to apps/fulfillment-e2e/src/support/page_fragments/picker.fragment.ts index 484a24c478..336dc76d24 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/picking.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/picker.fragment.ts @@ -1,5 +1,5 @@ -export class PickingFragment { - getWrapper = () => cy.get('oryx-picking'); +export class PickerFragment { + getWrapper = () => cy.get('oryx-picking-picker'); getTabs = () => this.getWrapper().find('oryx-tabs'); getTabsList = () => this.getWrapper().find('oryx-tab'); getTabById = (id) => this.getWrapper().find(`oryx-tab[for="${id}"]`); diff --git a/apps/fulfillment-e2e/src/support/page_fragments/picking-product.fragment.ts b/apps/fulfillment-e2e/src/support/page_fragments/product.fragment.ts similarity index 95% rename from apps/fulfillment-e2e/src/support/page_fragments/picking-product.fragment.ts rename to apps/fulfillment-e2e/src/support/page_fragments/product.fragment.ts index d438955717..f12d34c0b4 100644 --- a/apps/fulfillment-e2e/src/support/page_fragments/picking-product.fragment.ts +++ b/apps/fulfillment-e2e/src/support/page_fragments/product.fragment.ts @@ -1,4 +1,4 @@ -export class PickingProductFragment { +export class ProductFragment { getProducts = () => cy.get('oryx-picking-product-card', { timeout: 10000 }); getQuantityInput = () => this.getProducts().find('oryx-cart-quantity-input'); getQuantityInputField = () => diff --git a/apps/fulfillment-e2e/src/support/page_objects/login.page.ts b/apps/fulfillment-e2e/src/support/page_objects/login.page.ts index 583eb02bf3..84304c82ad 100644 --- a/apps/fulfillment-e2e/src/support/page_objects/login.page.ts +++ b/apps/fulfillment-e2e/src/support/page_objects/login.page.ts @@ -5,7 +5,7 @@ export class LoginPage extends AbstractFAPage { url = '/'; loginForm = new LoginFragment(); - getWrapper = () => cy.get('oryx-login-page'); + getWrapper = () => cy.get('oryx-picking-login'); getLogo = () => this.getWrapper().find('oryx-image[resource="logo"]'); getTitle = () => this.getWrapper().find('oryx-heading'); getErrorNotification = () => diff --git a/apps/fulfillment-e2e/src/support/page_objects/picking.page.ts b/apps/fulfillment-e2e/src/support/page_objects/picker.page.ts similarity index 54% rename from apps/fulfillment-e2e/src/support/page_objects/picking.page.ts rename to apps/fulfillment-e2e/src/support/page_objects/picker.page.ts index 66b2f065b8..d650c0be12 100644 --- a/apps/fulfillment-e2e/src/support/page_objects/picking.page.ts +++ b/apps/fulfillment-e2e/src/support/page_objects/picker.page.ts @@ -1,20 +1,20 @@ -import { PickingProductFragment } from '../page_fragments/picking-product.fragment'; -import { PickingFragment } from '../page_fragments/picking.fragment'; +import { PickerFragment } from '../page_fragments/picker.fragment'; +import { ProductFragment } from '../page_fragments/product.fragment'; import { AbstractFAPage } from './abstract.page'; -export class PickingPage extends AbstractFAPage { +export class PickerPage extends AbstractFAPage { constructor(protected id: string) { super(); } - pickingFragment = new PickingFragment(); - pickingProductFragment = new PickingProductFragment(); + pickerFragment = new PickerFragment(); + productFragment = new ProductFragment(); url = `/picking-list/picking/${this.id}`; - getNotPickedTab = () => this.pickingFragment.getTabsList().eq(0); - getPickedTab = () => this.pickingFragment.getTabsList().eq(1); - getNotFoundTab = () => this.pickingFragment.getTabsList().eq(2); + getNotPickedTab = () => this.pickerFragment.getTabsList().eq(0); + getPickedTab = () => this.pickerFragment.getTabsList().eq(1); + getNotFoundTab = () => this.pickerFragment.getTabsList().eq(2); getNotPickedProductsNumber = () => cy.wrap(this.getProductsNumber(this.getNotPickedTab())); @@ -34,21 +34,18 @@ export class PickingPage extends AbstractFAPage { pickProduct(product, itemsNumber) { product.within(() => { // type items number into field - this.pickingProductFragment - .getQuantityInputField() - .clear() - .type(itemsNumber); + this.productFragment.getQuantityInputField().clear().type(itemsNumber); // click submit button - this.pickingProductFragment.getSubmitButton().click(); + this.productFragment.getSubmitButton().click(); }); } insideTabContent(tab, callback) { tab.invoke('attr', 'for').then((tabId) => { - this.pickingFragment.getTabById(tabId).click(); + this.pickerFragment.getTabById(tabId).click(); - this.pickingFragment.getTabContentById(tabId).within((scopeEl) => { + this.pickerFragment.getTabContentById(tabId).within((scopeEl) => { callback(scopeEl); }); }); diff --git a/libs/domain/picking/customer-note-modal/customer-note-modal.component.spec.ts b/libs/domain/picking/customer-note-modal/customer-note-modal.component.spec.ts index 3b9e0f1be4..52a31ad3ff 100644 --- a/libs/domain/picking/customer-note-modal/customer-note-modal.component.spec.ts +++ b/libs/domain/picking/customer-note-modal/customer-note-modal.component.spec.ts @@ -3,23 +3,23 @@ import { CLOSE_EVENT, ModalComponent } from '@spryker-oryx/ui/modal'; import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { afterEach, beforeAll, beforeEach } from 'vitest'; -import { CustomerNoteModalComponent } from './customer-note-modal.component'; -import { customerNoteModalComponent } from './customer-note-modal.def'; +import { PickingCustomerNoteModalComponent } from './customer-note-modal.component'; +import { pickingCustomerNoteModalComponent } from './customer-note-modal.def'; -describe('CustomerNoteModal', () => { - let element: CustomerNoteModalComponent; +describe('PickingCustomerNoteModal', () => { + let element: PickingCustomerNoteModalComponent; const getModal = (): ModalComponent | null => element.renderRoot.querySelector('oryx-modal'); beforeAll(async () => { - await useComponent([customerNoteModalComponent]); + await useComponent([pickingCustomerNoteModalComponent]); }); describe('when note property is not provided', () => { beforeEach(async () => { element = await fixture( - html`` + html`` ); }); @@ -32,9 +32,9 @@ describe('CustomerNoteModal', () => { const noteText = 'note text'; beforeEach(async () => { element = await fixture( - html` + html` ${noteText} - ` + ` ); }); diff --git a/libs/domain/picking/customer-note-modal/customer-note-modal.component.ts b/libs/domain/picking/customer-note-modal/customer-note-modal.component.ts index efa8a5df4b..967ac1a6e7 100644 --- a/libs/domain/picking/customer-note-modal/customer-note-modal.component.ts +++ b/libs/domain/picking/customer-note-modal/customer-note-modal.component.ts @@ -5,7 +5,7 @@ import { I18nMixin } from '@spryker-oryx/utilities'; import { LitElement, TemplateResult, html } from 'lit'; import { property } from 'lit/decorators.js'; -export class CustomerNoteModalComponent extends I18nMixin(LitElement) { +export class PickingCustomerNoteModalComponent extends I18nMixin(LitElement) { @property({ type: Boolean }) open?: boolean; protected close(): void { diff --git a/libs/domain/picking/customer-note-modal/customer-note-modal.def.ts b/libs/domain/picking/customer-note-modal/customer-note-modal.def.ts index cbeb8ee32c..b03f3de408 100644 --- a/libs/domain/picking/customer-note-modal/customer-note-modal.def.ts +++ b/libs/domain/picking/customer-note-modal/customer-note-modal.def.ts @@ -1,9 +1,9 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const customerNoteModalComponent = componentDef({ - name: 'oryx-customer-note-modal', +export const pickingCustomerNoteModalComponent = componentDef({ + name: 'oryx-picking-customer-note-modal', impl: () => import('./customer-note-modal.component').then( - (m) => m.CustomerNoteModalComponent + (m) => m.PickingCustomerNoteModalComponent ), }); diff --git a/libs/domain/picking/customer-note/customer-note.component.spec.ts b/libs/domain/picking/customer-note/customer-note.component.spec.ts index dcf1f5e318..3dc63636f1 100644 --- a/libs/domain/picking/customer-note/customer-note.component.spec.ts +++ b/libs/domain/picking/customer-note/customer-note.component.spec.ts @@ -1,16 +1,19 @@ import { fixture } from '@open-wc/testing-helpers'; import { createInjector, destroyInjector } from '@spryker-oryx/di'; -import { PickingListError, PickingListService } from '@spryker-oryx/picking'; +import { + PickingListError, + PickingListService, + pickingInProgressModalComponent, +} from '@spryker-oryx/picking'; import { mockPickingListData } from '@spryker-oryx/picking/mocks'; +import { PickingInProgressModalComponent } from '@spryker-oryx/picking/picking-in-progress'; import { RouterService } from '@spryker-oryx/router'; import { modalComponent } from '@spryker-oryx/ui/modal'; import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of, throwError } from 'rxjs'; -import { PickingInProgressModalComponent } from '../picking-in-progress/picking-in-progress.component'; -import { pickingInProgressModalComponent } from '../picking-in-progress/picking-in-progress.def'; -import { CustomerNoteComponent } from './customer-note.component'; -import { customerNoteComponent } from './customer-note.def'; +import { PickingCustomerNoteComponent } from './customer-note.component'; +import { pickingCustomerNoteComponent } from './customer-note.def'; class MockRouterService implements Partial { navigate = vi.fn(); @@ -22,8 +25,8 @@ class MockPickingListService implements Partial { getUpcomingPickingListId = vi.fn().mockReturnValue(of(null)); } -describe('CustomerNoteComponent', () => { - let element: CustomerNoteComponent; +describe('PickingCustomerNoteComponent', () => { + let element: PickingCustomerNoteComponent; let service: MockPickingListService; let routerService: MockRouterService; @@ -35,7 +38,7 @@ describe('CustomerNoteComponent', () => { beforeAll(async () => { await useComponent([ - customerNoteComponent, + pickingCustomerNoteComponent, pickingInProgressModalComponent, modalComponent, ]); @@ -61,7 +64,9 @@ describe('CustomerNoteComponent', () => { RouterService ) as unknown as MockRouterService; element = await fixture( - html`` + html`` ); }); @@ -83,7 +88,9 @@ describe('CustomerNoteComponent', () => { describe('when picking is proceed', () => { beforeEach(() => { - element.renderRoot.querySelector('oryx-button')?.click(); + element.renderRoot + .querySelectorAll('oryx-button')?.[1] + ?.click(); }); it('should start picking with current picking list', () => { @@ -108,10 +115,14 @@ describe('CustomerNoteComponent', () => { ); element = await fixture( - html`` + html`` ); - element.renderRoot.querySelector('oryx-button')?.click(); + element.renderRoot + .querySelectorAll('oryx-button')[1] + ?.click(); }); it('should not navigate route', () => { diff --git a/libs/domain/picking/customer-note/customer-note.component.ts b/libs/domain/picking/customer-note/customer-note.component.ts index 2acb494f81..b3dbed9d12 100644 --- a/libs/domain/picking/customer-note/customer-note.component.ts +++ b/libs/domain/picking/customer-note/customer-note.component.ts @@ -1,14 +1,16 @@ import { resolve } from '@spryker-oryx/di'; import { PickingListMixin } from '@spryker-oryx/picking'; +import { PickingInProgressModalComponent } from '@spryker-oryx/picking/picking-in-progress'; import { RouterService } from '@spryker-oryx/router'; +import { ButtonColor, ButtonSize, ButtonType } from '@spryker-oryx/ui/button'; +import { IconTypes } from '@spryker-oryx/ui/icon'; import { I18nMixin } from '@spryker-oryx/utilities'; import { LitElement, TemplateResult, html } from 'lit'; import { query } from 'lit/decorators.js'; import { catchError, of, tap } from 'rxjs'; -import { PickingInProgressModalComponent } from '../picking-in-progress/picking-in-progress.component'; import { customerNoteComponentStyles } from './customer-note.styles'; -export class CustomerNoteComponent extends I18nMixin( +export class PickingCustomerNoteComponent extends I18nMixin( PickingListMixin(LitElement) ) { static styles = customerNoteComponentStyles; @@ -45,7 +47,14 @@ export class CustomerNoteComponent extends I18nMixin( protected override render(): TemplateResult { return html`
- +

${this.i18n('picking.customer-note')}

diff --git a/libs/domain/picking/customer-note/customer-note.def.ts b/libs/domain/picking/customer-note/customer-note.def.ts index 04692715ee..4a88217ae8 100644 --- a/libs/domain/picking/customer-note/customer-note.def.ts +++ b/libs/domain/picking/customer-note/customer-note.def.ts @@ -1,7 +1,9 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const customerNoteComponent = componentDef({ - name: 'oryx-customer-note', +export const pickingCustomerNoteComponent = componentDef({ + name: 'oryx-picking-customer-note', impl: () => - import('./customer-note.component').then((m) => m.CustomerNoteComponent), + import('./customer-note.component').then( + (m) => m.PickingCustomerNoteComponent + ), }); diff --git a/libs/domain/picking/customer-note/customer-note.styles.ts b/libs/domain/picking/customer-note/customer-note.styles.ts index e75c1a99ad..84fff271ec 100644 --- a/libs/domain/picking/customer-note/customer-note.styles.ts +++ b/libs/domain/picking/customer-note/customer-note.styles.ts @@ -17,7 +17,7 @@ export const customerNoteComponentStyles = css` flex-direction: column; } - oryx-navigate-back { + section oryx-button { align-self: flex-start; margin-block-end: 40px; } diff --git a/libs/domain/picking/customer-note/stories/demo.stories.ts b/libs/domain/picking/customer-note/stories/demo.stories.ts index 50fb6e527d..81c67ec209 100644 --- a/libs/domain/picking/customer-note/stories/demo.stories.ts +++ b/libs/domain/picking/customer-note/stories/demo.stories.ts @@ -14,7 +14,9 @@ export default { const Template: Story = (): TemplateResult => { return html` - + `; }; diff --git a/libs/domain/picking/discard-modal/discard-modal.component.spec.ts b/libs/domain/picking/discard-modal/discard-modal.component.spec.ts index 46c638372d..80e04aa711 100644 --- a/libs/domain/picking/discard-modal/discard-modal.component.spec.ts +++ b/libs/domain/picking/discard-modal/discard-modal.component.spec.ts @@ -1,19 +1,19 @@ import { fixture } from '@open-wc/testing-helpers'; import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; -import { DiscardPickingComponent } from './discard-modal.component'; -import { discardModalComponent } from './discard-modal.def'; +import { PickingDiscardModalComponent } from './discard-modal.component'; +import { pickingDiscardModalComponent } from './discard-modal.def'; -describe('DiscardModalComponent', () => { - let element: DiscardPickingComponent; +describe('PickingDiscardModalComponent', () => { + let element: PickingDiscardModalComponent; beforeAll(async () => { - await useComponent(discardModalComponent); + await useComponent(pickingDiscardModalComponent); }); beforeEach(async () => { element = await fixture( - html`` + html`` ); }); diff --git a/libs/domain/picking/discard-modal/discard-modal.component.ts b/libs/domain/picking/discard-modal/discard-modal.component.ts index 65a53ffcbb..ada05b52e2 100644 --- a/libs/domain/picking/discard-modal/discard-modal.component.ts +++ b/libs/domain/picking/discard-modal/discard-modal.component.ts @@ -5,7 +5,7 @@ import { LitElement, TemplateResult, html } from 'lit'; import { property } from 'lit/decorators.js'; import { discardModalStyles } from './discard-modal.styles'; -export class DiscardPickingComponent extends I18nMixin(LitElement) { +export class PickingDiscardModalComponent extends I18nMixin(LitElement) { static styles = discardModalStyles; @property({ type: Boolean }) open?: boolean; diff --git a/libs/domain/picking/discard-modal/discard-modal.def.ts b/libs/domain/picking/discard-modal/discard-modal.def.ts index 5cf800db22..e025c284f4 100644 --- a/libs/domain/picking/discard-modal/discard-modal.def.ts +++ b/libs/domain/picking/discard-modal/discard-modal.def.ts @@ -1,7 +1,9 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const discardModalComponent = componentDef({ - name: 'oryx-discard-picking', +export const pickingDiscardModalComponent = componentDef({ + name: 'oryx-picking-discard-modal', impl: () => - import('./discard-modal.component').then((m) => m.DiscardPickingComponent), + import('./discard-modal.component').then( + (m) => m.PickingDiscardModalComponent + ), }); diff --git a/libs/domain/picking/discard-modal/stories/demo.stories.ts b/libs/domain/picking/discard-modal/stories/demo.stories.ts index 65541db5c2..8f4dd873dd 100644 --- a/libs/domain/picking/discard-modal/stories/demo.stories.ts +++ b/libs/domain/picking/discard-modal/stories/demo.stories.ts @@ -17,7 +17,7 @@ export default { } as Meta; const Template: Story = (): TemplateResult => { - return html` `; + return html` `; }; export const Demo = Template.bind({}); diff --git a/libs/domain/picking/filter-button/filter-button.component.spec.ts b/libs/domain/picking/filter-button/filter-button.component.spec.ts index e86e59aca9..465a31ca13 100644 --- a/libs/domain/picking/filter-button/filter-button.component.spec.ts +++ b/libs/domain/picking/filter-button/filter-button.component.spec.ts @@ -8,19 +8,19 @@ import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of } from 'rxjs'; import { SpyInstance } from 'vitest'; -import { FilterButtonComponent } from './filter-button.component'; -import { filterButtonComponent } from './filter-button.def'; +import { PickingFilterButtonComponent } from './filter-button.component'; +import { pickingFilterButtonComponent } from './filter-button.def'; class MockPickingListService implements Partial { getSortingQualifier = vi.fn().mockReturnValue(of(defaultSortingQualifier)); } -describe('FilterButtonComponent', () => { - let element: FilterButtonComponent; +describe('PickingFilterButtonComponent', () => { + let element: PickingFilterButtonComponent; let service: MockPickingListService; beforeAll(async () => { - await useComponent(filterButtonComponent); + await useComponent(pickingFilterButtonComponent); }); beforeEach(async () => { diff --git a/libs/domain/picking/filter-button/filter-button.component.ts b/libs/domain/picking/filter-button/filter-button.component.ts index 7bc11ae9fa..58e821722d 100644 --- a/libs/domain/picking/filter-button/filter-button.component.ts +++ b/libs/domain/picking/filter-button/filter-button.component.ts @@ -12,7 +12,7 @@ import { query } from 'lit/decorators.js'; import { map, tap } from 'rxjs'; @signalAware() -export class FilterButtonComponent extends I18nMixin(LitElement) { +export class PickingFilterButtonComponent extends I18nMixin(LitElement) { protected pickingListService = resolve(PickingListService); @query('oryx-picking-filters') protected filters?: HTMLElement; diff --git a/libs/domain/picking/filter-button/filter-button.def.ts b/libs/domain/picking/filter-button/filter-button.def.ts index f32451e105..5150721d65 100644 --- a/libs/domain/picking/filter-button/filter-button.def.ts +++ b/libs/domain/picking/filter-button/filter-button.def.ts @@ -1,9 +1,13 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const filterButtonComponent = componentDef({ +export const pickingFilterButtonComponent = componentDef({ name: 'oryx-picking-filter-button', impl: () => - import('./filter-button.component').then((m) => m.FilterButtonComponent), + import('./filter-button.component').then( + (m) => m.PickingFilterButtonComponent + ), schema: () => - import('./filter-button.schema').then((m) => m.filterButtonComponentSchema), + import('./filter-button.schema').then( + (m) => m.pickingFilterButtonComponentSchema + ), }); diff --git a/libs/domain/picking/filter-button/filter-button.schema.ts b/libs/domain/picking/filter-button/filter-button.schema.ts index cf68c98a76..3cc3d987d5 100644 --- a/libs/domain/picking/filter-button/filter-button.schema.ts +++ b/libs/domain/picking/filter-button/filter-button.schema.ts @@ -1,7 +1,7 @@ import { ContentComponentSchema } from '@spryker-oryx/experience'; -import { FilterButtonComponent } from './filter-button.component'; +import { PickingFilterButtonComponent } from './filter-button.component'; -export const filterButtonComponentSchema: ContentComponentSchema = +export const pickingFilterButtonComponentSchema: ContentComponentSchema = { name: 'Filters', group: 'Picking', diff --git a/libs/domain/picking/filters/filters.component.spec.ts b/libs/domain/picking/filters/filters.component.spec.ts index 1dcb21ea04..56f21d42d9 100644 --- a/libs/domain/picking/filters/filters.component.spec.ts +++ b/libs/domain/picking/filters/filters.component.spec.ts @@ -9,8 +9,8 @@ import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of } from 'rxjs'; import { SpyInstance } from 'vitest'; -import { FiltersComponent } from './filters.component'; -import { filtersComponent } from './filters.def'; +import { PickingFiltersComponent } from './filters.component'; +import { pickingFiltersComponent } from './filters.def'; import { getFilterFields } from './filters.model'; class MockPickingListService implements Partial { @@ -22,13 +22,13 @@ class MockFormRenderer implements Partial { buildForm = vi.fn().mockReturnValue(html``); } -describe('FiltersComponent', () => { - let element: FiltersComponent; +describe('PickingFiltersComponent', () => { + let element: PickingFiltersComponent; let service: MockPickingListService; let renderer: MockFormRenderer; beforeAll(async () => { - await useComponent(filtersComponent); + await useComponent(pickingFiltersComponent); }); beforeEach(async () => { diff --git a/libs/domain/picking/filters/filters.component.ts b/libs/domain/picking/filters/filters.component.ts index 411e7272e1..dcb6f4c9fa 100644 --- a/libs/domain/picking/filters/filters.component.ts +++ b/libs/domain/picking/filters/filters.component.ts @@ -14,7 +14,7 @@ import { map } from 'rxjs'; import { getFilterFields } from './filters.model'; import { filtersComponentStyles } from './filters.styles'; -export class FiltersComponent extends I18nMixin(LitElement) { +export class PickingFiltersComponent extends I18nMixin(LitElement) { static styles = filtersComponentStyles; @property({ type: Boolean, reflect: true }) open = false; diff --git a/libs/domain/picking/filters/filters.def.ts b/libs/domain/picking/filters/filters.def.ts index dd1eec4cfc..9185acf0f6 100644 --- a/libs/domain/picking/filters/filters.def.ts +++ b/libs/domain/picking/filters/filters.def.ts @@ -1,6 +1,7 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const filtersComponent = componentDef({ +export const pickingFiltersComponent = componentDef({ name: 'oryx-picking-filters', - impl: () => import('./filters.component').then((m) => m.FiltersComponent), + impl: () => + import('./filters.component').then((m) => m.PickingFiltersComponent), }); diff --git a/libs/domain/picking/filters/filters.model.ts b/libs/domain/picking/filters/filters.model.ts index 5cbca034c9..b887e81ef4 100644 --- a/libs/domain/picking/filters/filters.model.ts +++ b/libs/domain/picking/filters/filters.model.ts @@ -1,7 +1,7 @@ import { FormFieldDefinition, FormFieldType } from '@spryker-oryx/form'; import { i18n } from '@spryker-oryx/utilities'; -export interface FiltersAttributes { +export interface PickingFiltersAttributes { open?: boolean; } diff --git a/libs/domain/picking/header/header.component.spec.ts b/libs/domain/picking/header/header.component.spec.ts index 2ca92ce6a6..e769c0cf11 100644 --- a/libs/domain/picking/header/header.component.spec.ts +++ b/libs/domain/picking/header/header.component.spec.ts @@ -2,22 +2,22 @@ import { fixture } from '@open-wc/testing-helpers'; import { SiteNavigationItemComponent } from '@spryker-oryx/site/navigation-item'; import { IconTypes } from '@spryker-oryx/ui/icon'; import { i18n, useComponent } from '@spryker-oryx/utilities'; -import HeaderComponent from './header.component'; -import { headerComponent } from './header.def'; +import PickingHeaderComponent from './header.component'; +import { pickingHeaderComponent } from './header.def'; -describe('Header Component', () => { - let element: HeaderComponent; +describe('Picking Header Component', () => { + let element: PickingHeaderComponent; beforeAll(async () => { - await useComponent([headerComponent]); + await useComponent([pickingHeaderComponent]); }); beforeEach(async () => { - element = await fixture(``); + element = await fixture(``); }); it('is defined', () => { - expect(element).toBeInstanceOf(HeaderComponent); + expect(element).toBeInstanceOf(PickingHeaderComponent); }); it('passes the a11y audit', async () => { diff --git a/libs/domain/picking/header/header.component.ts b/libs/domain/picking/header/header.component.ts index 058714ccf5..284ae04758 100644 --- a/libs/domain/picking/header/header.component.ts +++ b/libs/domain/picking/header/header.component.ts @@ -7,7 +7,7 @@ import { query } from 'lit/decorators.js'; import { styles } from './header.styles'; @signalAware() -export class HeaderComponent extends LitElement { +export class PickingHeaderComponent extends LitElement { static styles = styles; @query('oryx-site-navigation-item') @@ -36,4 +36,4 @@ export class HeaderComponent extends LitElement { } } -export default HeaderComponent; +export default PickingHeaderComponent; diff --git a/libs/domain/picking/header/header.def.ts b/libs/domain/picking/header/header.def.ts index 8f7148faa8..2ce0ae17e3 100644 --- a/libs/domain/picking/header/header.def.ts +++ b/libs/domain/picking/header/header.def.ts @@ -1,6 +1,7 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const headerComponent = componentDef({ - name: 'oryx-header', - impl: () => import('./header.component').then((m) => m.HeaderComponent), +export const pickingHeaderComponent = componentDef({ + name: 'oryx-picking-header', + impl: () => + import('./header.component').then((m) => m.PickingHeaderComponent), }); diff --git a/libs/domain/picking/header/stories/demo.stories.ts b/libs/domain/picking/header/stories/demo.stories.ts index df6e1ff8d3..2ed3f5c11e 100644 --- a/libs/domain/picking/header/stories/demo.stories.ts +++ b/libs/domain/picking/header/stories/demo.stories.ts @@ -14,7 +14,7 @@ export default { }; const Template: Story = (): TemplateResult => { - return html``; + return html``; }; export const Demo = Template.bind({}); diff --git a/libs/domain/picking/list-item/index.ts b/libs/domain/picking/list-item/index.ts new file mode 100644 index 0000000000..2e0735a9c7 --- /dev/null +++ b/libs/domain/picking/list-item/index.ts @@ -0,0 +1,3 @@ +export * from './list-item.component'; +export * from './list-item.model'; +export * from './list-item.styles'; diff --git a/libs/domain/picking/picking-list-item/picking-list-item.component.spec.ts b/libs/domain/picking/list-item/list-item.component.spec.ts similarity index 97% rename from libs/domain/picking/picking-list-item/picking-list-item.component.spec.ts rename to libs/domain/picking/list-item/list-item.component.spec.ts index fb32aa1d4b..7d343d4a23 100644 --- a/libs/domain/picking/picking-list-item/picking-list-item.component.spec.ts +++ b/libs/domain/picking/list-item/list-item.component.spec.ts @@ -8,8 +8,8 @@ import { i18n, useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of, throwError } from 'rxjs'; import { afterEach } from 'vitest'; -import { PickingListItemComponent } from './picking-list-item.component'; -import { pickingListItemComponent } from './picking-list-item.def'; +import { PickingListItemComponent } from './list-item.component'; +import { pickingListItemComponent } from './list-item.def'; class MockRouterService implements Partial { navigate = vi.fn(); } diff --git a/libs/domain/picking/picking-list-item/picking-list-item.component.ts b/libs/domain/picking/list-item/list-item.component.ts similarity index 89% rename from libs/domain/picking/picking-list-item/picking-list-item.component.ts rename to libs/domain/picking/list-item/list-item.component.ts index 9a67e3d566..6a65b6a2b3 100644 --- a/libs/domain/picking/picking-list-item/picking-list-item.component.ts +++ b/libs/domain/picking/list-item/list-item.component.ts @@ -8,8 +8,8 @@ import { I18nMixin, computed } from '@spryker-oryx/utilities'; import { LitElement, TemplateResult, html } from 'lit'; import { when } from 'lit/directives/when.js'; import { catchError, of, tap } from 'rxjs'; -import { PickingListItemAttributes } from './picking-list-item.model'; -import { pickingListItemComponentStyles } from './picking-list-item.styles'; +import { PickingListItemAttributes } from './list-item.model'; +import { pickingListItemComponentStyles } from './list-item.styles'; export class PickingListItemComponent extends I18nMixin(PickingListMixin(LitElement)) @@ -82,7 +82,7 @@ export class PickingListItemComponent
- ${this.i18n('picking.picking-list-item.-items', { + ${this.i18n('picking.list-item.-items', { count: this.$pickingList()?.itemsCount, })} ${when( @@ -94,9 +94,7 @@ export class PickingListItemComponent .color=${ButtonColor.Primary} .size=${ButtonSize.Md} .icon=${IconTypes.Info} - .label=${this.i18n( - 'picking.picking-list-item.show-customer-note' - )} + .label=${this.i18n('picking.list-item.show-customer-note')} @click=${this.showCustomerNote} > ` @@ -108,7 +106,7 @@ export class PickingListItemComponent class="start-picking" .color=${ButtonColor.Primary} .size=${ButtonSize.Lg} - .text=${this.i18n('picking.picking-list-item.start-picking')} + .text=${this.i18n('picking.list-item.start-picking')} ?loading=${this.$upcomingPickingListId() === this.$pickingList().id} ?disabled=${this.$upcomingPickingListId() && this.$upcomingPickingListId() !== this.$pickingList().id} diff --git a/libs/domain/picking/list-item/list-item.def.ts b/libs/domain/picking/list-item/list-item.def.ts new file mode 100644 index 0000000000..50dc8150ae --- /dev/null +++ b/libs/domain/picking/list-item/list-item.def.ts @@ -0,0 +1,9 @@ +import { componentDef } from '@spryker-oryx/utilities'; + +export const pickingListItemComponent = componentDef({ + name: 'oryx-picking-list-item', + impl: () => + import('./list-item.component').then((m) => m.PickingListItemComponent), + schema: () => + import('./list-item.schema').then((m) => m.pickingListItemComponentSchema), +}); diff --git a/libs/domain/picking/picking-list-item/picking-list-item.model.ts b/libs/domain/picking/list-item/list-item.model.ts similarity index 100% rename from libs/domain/picking/picking-list-item/picking-list-item.model.ts rename to libs/domain/picking/list-item/list-item.model.ts diff --git a/libs/domain/picking/picking-list-item/picking-list-item.schema.ts b/libs/domain/picking/list-item/list-item.schema.ts similarity index 65% rename from libs/domain/picking/picking-list-item/picking-list-item.schema.ts rename to libs/domain/picking/list-item/list-item.schema.ts index 83c6772e79..831793b256 100644 --- a/libs/domain/picking/picking-list-item/picking-list-item.schema.ts +++ b/libs/domain/picking/list-item/list-item.schema.ts @@ -1,8 +1,8 @@ import { ContentComponentSchema } from '@spryker-oryx/experience'; -import { PickingListItemComponent } from './picking-list-item.component'; +import { PickingListItemComponent } from './list-item.component'; export const pickingListItemComponentSchema: ContentComponentSchema = { - name: 'Picking list item', + name: 'List Item', group: 'Picking', }; diff --git a/libs/domain/picking/picking-list-item/picking-list-item.styles.ts b/libs/domain/picking/list-item/list-item.styles.ts similarity index 100% rename from libs/domain/picking/picking-list-item/picking-list-item.styles.ts rename to libs/domain/picking/list-item/list-item.styles.ts diff --git a/libs/domain/picking/picking-list-item/stories/demo.stories.ts b/libs/domain/picking/list-item/stories/demo.stories.ts similarity index 81% rename from libs/domain/picking/picking-list-item/stories/demo.stories.ts rename to libs/domain/picking/list-item/stories/demo.stories.ts index 6641ef6efa..4edafaa84b 100644 --- a/libs/domain/picking/picking-list-item/stories/demo.stories.ts +++ b/libs/domain/picking/list-item/stories/demo.stories.ts @@ -3,12 +3,12 @@ import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit'; import { TemplateResult } from 'lit/development'; import { storybookPrefix } from '../../.constants'; -import { PickingListItemAttributes } from '../picking-list-item.model'; +import { ListItemAttributes } from '../list-item.model'; const pickingListIds = mockPickingListData.map(({ id }) => id); export default { - title: `${storybookPrefix}/Picking list item`, + title: `${storybookPrefix}/List item`, args: { pickingListId: pickingListIds[0], }, @@ -25,7 +25,7 @@ export default { }, } as Meta; -const Template: Story = ({ +const Template: Story = ({ pickingListId, }): TemplateResult => { return html` diff --git a/libs/domain/picking/picking-list-item/stories/static/variants.stories.ts b/libs/domain/picking/list-item/stories/static/variants.stories.ts similarity index 92% rename from libs/domain/picking/picking-list-item/stories/static/variants.stories.ts rename to libs/domain/picking/list-item/stories/static/variants.stories.ts index 82dee1c574..1e9354335a 100644 --- a/libs/domain/picking/picking-list-item/stories/static/variants.stories.ts +++ b/libs/domain/picking/list-item/stories/static/variants.stories.ts @@ -4,7 +4,7 @@ import { TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../../.constants'; export default { - title: `${storybookPrefix}/Picking list item/Static`, + title: `${storybookPrefix}/List item/Static`, parameters: { chromatic: { viewports: [storybookDefaultViewports.mobile.min], diff --git a/libs/domain/picking/lists-header/index.ts b/libs/domain/picking/lists-header/index.ts new file mode 100644 index 0000000000..28f05701ec --- /dev/null +++ b/libs/domain/picking/lists-header/index.ts @@ -0,0 +1,2 @@ +export * from './lists-header.component'; +export * from './lists-header.styles'; diff --git a/libs/domain/picking/picking-lists-header/picking-lists-header.component.spec.ts b/libs/domain/picking/lists-header/lists-header.component.spec.ts similarity index 91% rename from libs/domain/picking/picking-lists-header/picking-lists-header.component.spec.ts rename to libs/domain/picking/lists-header/lists-header.component.spec.ts index 8c2340b638..66ed6e971a 100644 --- a/libs/domain/picking/picking-lists-header/picking-lists-header.component.spec.ts +++ b/libs/domain/picking/lists-header/lists-header.component.spec.ts @@ -5,8 +5,8 @@ import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import MockDate from 'mockdate'; import { of } from 'rxjs'; -import { PickingListsHeaderComponent } from './picking-lists-header.component'; -import { pickingListsHeaderComponent } from './picking-lists-header.def'; +import { PickingListsHeaderComponent } from './lists-header.component'; +import { pickingListsHeaderComponent } from './lists-header.def'; const mockedDate = new Date(1970, 1, 1); const formattedDate = 'formattedDate'; diff --git a/libs/domain/picking/picking-lists-header/picking-lists-header.component.ts b/libs/domain/picking/lists-header/lists-header.component.ts similarity index 92% rename from libs/domain/picking/picking-lists-header/picking-lists-header.component.ts rename to libs/domain/picking/lists-header/lists-header.component.ts index cda1032027..2b40701b0d 100644 --- a/libs/domain/picking/picking-lists-header/picking-lists-header.component.ts +++ b/libs/domain/picking/lists-header/lists-header.component.ts @@ -3,7 +3,7 @@ import { LocaleService } from '@spryker-oryx/i18n'; import { IconTypes } from '@spryker-oryx/ui/icon'; import { I18nMixin, signal } from '@spryker-oryx/utilities'; import { LitElement, TemplateResult, html } from 'lit'; -import { pickingListsHeaderComponentStyles } from './picking-lists-header.styles'; +import { pickingListsHeaderComponentStyles } from './lists-header.styles'; export class PickingListsHeaderComponent extends I18nMixin(LitElement) { static styles = pickingListsHeaderComponentStyles; @@ -37,7 +37,7 @@ export class PickingListsHeaderComponent extends I18nMixin(LitElement) { protected override render(): TemplateResult { return html` - +

@@ -59,7 +59,7 @@ export class PickingListsHeaderComponent extends I18nMixin(LitElement) { />

- + `; } } diff --git a/libs/domain/picking/picking-lists-header/picking-lists-header.def.ts b/libs/domain/picking/lists-header/lists-header.def.ts similarity index 80% rename from libs/domain/picking/picking-lists-header/picking-lists-header.def.ts rename to libs/domain/picking/lists-header/lists-header.def.ts index 63e7cbfa1d..8cd0c3ba57 100644 --- a/libs/domain/picking/picking-lists-header/picking-lists-header.def.ts +++ b/libs/domain/picking/lists-header/lists-header.def.ts @@ -3,7 +3,7 @@ import { componentDef } from '@spryker-oryx/utilities'; export const pickingListsHeaderComponent = componentDef({ name: 'oryx-picking-lists-header', impl: () => - import('./picking-lists-header.component').then( + import('./lists-header.component').then( (m) => m.PickingListsHeaderComponent ), }); diff --git a/libs/domain/picking/picking-lists-header/picking-lists-header.styles.ts b/libs/domain/picking/lists-header/lists-header.styles.ts similarity index 90% rename from libs/domain/picking/picking-lists-header/picking-lists-header.styles.ts rename to libs/domain/picking/lists-header/lists-header.styles.ts index 58d9c337a2..39e4dbf303 100644 --- a/libs/domain/picking/picking-lists-header/picking-lists-header.styles.ts +++ b/libs/domain/picking/lists-header/lists-header.styles.ts @@ -1,11 +1,11 @@ import { css } from 'lit'; export const pickingListsHeaderComponentStyles = css` - oryx-header { + oryx-picking-header { box-shadow: var(--oryx-elevation-2) var(--oryx-elevation-color-2); } - oryx-header div { + oryx-picking-header div { display: flex; width: 100%; justify-content: space-between; diff --git a/libs/domain/picking/picking-lists-header/stories/demo.stories.ts b/libs/domain/picking/lists-header/stories/demo.stories.ts similarity index 91% rename from libs/domain/picking/picking-lists-header/stories/demo.stories.ts rename to libs/domain/picking/lists-header/stories/demo.stories.ts index a7f7b6c14f..deda8d3e11 100644 --- a/libs/domain/picking/picking-lists-header/stories/demo.stories.ts +++ b/libs/domain/picking/lists-header/stories/demo.stories.ts @@ -4,7 +4,7 @@ import { TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../.constants'; export default { - title: `${storybookPrefix}/Picking list header`, + title: `${storybookPrefix}/List header`, parameters: { layout: 'fullscreen', chromatic: { diff --git a/libs/domain/picking/picking-lists-header/stories/static/variants.stories.ts b/libs/domain/picking/lists-header/stories/static/variants.stories.ts similarity index 95% rename from libs/domain/picking/picking-lists-header/stories/static/variants.stories.ts rename to libs/domain/picking/lists-header/stories/static/variants.stories.ts index f28275b7b7..9f9f1f3034 100644 --- a/libs/domain/picking/picking-lists-header/stories/static/variants.stories.ts +++ b/libs/domain/picking/lists-header/stories/static/variants.stories.ts @@ -7,7 +7,7 @@ import { LitElement, TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../../.constants'; export default { - title: `${storybookPrefix}/Picking list header/Static`, + title: `${storybookPrefix}/List header/Static`, parameters: { layout: 'fullscreen', chromatic: { diff --git a/libs/domain/picking/lists/index.ts b/libs/domain/picking/lists/index.ts new file mode 100644 index 0000000000..93ff3e52ef --- /dev/null +++ b/libs/domain/picking/lists/index.ts @@ -0,0 +1,2 @@ +export * from './lists.component'; +export * from './lists.styles'; diff --git a/libs/domain/picking/picking-lists/picking-lists.component.spec.ts b/libs/domain/picking/lists/lists.component.spec.ts similarity index 95% rename from libs/domain/picking/picking-lists/picking-lists.component.spec.ts rename to libs/domain/picking/lists/lists.component.spec.ts index 3c0d3cda8f..9981b142e9 100644 --- a/libs/domain/picking/picking-lists/picking-lists.component.spec.ts +++ b/libs/domain/picking/lists/lists.component.spec.ts @@ -2,7 +2,7 @@ import { fixture } from '@open-wc/testing-helpers'; import { App, AppRef } from '@spryker-oryx/core'; import { createInjector, destroyInjector } from '@spryker-oryx/di'; import { PickingListService } from '@spryker-oryx/picking'; -import { CustomerNoteModalComponent } from '@spryker-oryx/picking/customer-note-modal'; +import { PickingCustomerNoteModalComponent } from '@spryker-oryx/picking/customer-note-modal'; import { mockPickingListData } from '@spryker-oryx/picking/mocks'; import { PickingSyncActionHandlerService } from '@spryker-oryx/picking/offline'; import { CLOSE_EVENT, ModalComponent } from '@spryker-oryx/ui/modal'; @@ -10,8 +10,8 @@ import { i18n, useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of } from 'rxjs'; import { afterEach, beforeAll, beforeEach } from 'vitest'; -import { PickingListsComponent } from './picking-lists.component'; -import { pickingListsComponent } from './picking-lists.def'; +import { PickingListsComponent } from './lists.component'; +import { pickingListsComponent } from './lists.def'; const mockOfflineDataPlugin = { isRefreshing: vi.fn().mockReturnValue(of(false)), @@ -110,11 +110,13 @@ describe('PickingListsComponent', () => { }); describe('when picking lists is not empty', () => { - const getCustomerNoteModal = (): CustomerNoteModalComponent | null => - element.renderRoot.querySelector('oryx-customer-note-modal'); + const getCustomerNoteModal = (): PickingCustomerNoteModalComponent | null => + element.renderRoot.querySelector('oryx-picking-customer-note-modal'); const getPickingInProgressModal = (): ModalComponent | null => - element.renderRoot.querySelector('oryx-picking-in-progress-modal'); + element.renderRoot.querySelector( + 'oryx-picking-picking-in-progress-modal' + ); it('passes the a11y audit', async () => { await expect(element).shadowDom.to.be.accessible(); diff --git a/libs/domain/picking/picking-lists/picking-lists.component.ts b/libs/domain/picking/lists/lists.component.ts similarity index 96% rename from libs/domain/picking/picking-lists/picking-lists.component.ts rename to libs/domain/picking/lists/lists.component.ts index 4ae9d2d7dc..18909eea6e 100644 --- a/libs/domain/picking/picking-lists/picking-lists.component.ts +++ b/libs/domain/picking/lists/lists.component.ts @@ -9,6 +9,7 @@ import { OfflineDataPlugin, PickingSyncActionHandlerService, } from '@spryker-oryx/picking/offline'; +import { PickingInProgressModalComponent } from '@spryker-oryx/picking/picking-in-progress'; import { I18nMixin, i18n, signal, signalAware } from '@spryker-oryx/utilities'; import { LitElement, TemplateResult, html } from 'lit'; import { state } from 'lit/decorators.js'; @@ -16,8 +17,7 @@ import { createRef, ref } from 'lit/directives/ref.js'; import { repeat } from 'lit/directives/repeat.js'; import { when } from 'lit/directives/when.js'; import { Subject, distinctUntilChanged, map, startWith, switchMap } from 'rxjs'; -import { PickingInProgressModalComponent } from '../picking-in-progress/picking-in-progress.component'; -import { pickingListsComponentStyles } from './picking-lists.styles'; +import { pickingListsComponentStyles } from './lists.styles'; @signalAware() export class PickingListsComponent extends I18nMixin(LitElement) { @@ -67,12 +67,12 @@ export class PickingListsComponent extends I18nMixin(LitElement) { ${ref(this.pickingInProgressModal)} > - ${this.customerNote} - `; + `; } protected renderPickingLists(): TemplateResult { diff --git a/libs/domain/picking/lists/lists.def.ts b/libs/domain/picking/lists/lists.def.ts new file mode 100644 index 0000000000..b0915d1c25 --- /dev/null +++ b/libs/domain/picking/lists/lists.def.ts @@ -0,0 +1,8 @@ +import { componentDef } from '@spryker-oryx/utilities'; + +export const pickingListsComponent = componentDef({ + name: 'oryx-picking-lists', + impl: () => import('./lists.component').then((m) => m.PickingListsComponent), + schema: () => + import('./lists.schema').then((m) => m.pickingListsComponentSchema), +}); diff --git a/libs/domain/picking/picking-lists/picking-lists.schema.ts b/libs/domain/picking/lists/lists.schema.ts similarity index 66% rename from libs/domain/picking/picking-lists/picking-lists.schema.ts rename to libs/domain/picking/lists/lists.schema.ts index 2590657557..09ddb36c94 100644 --- a/libs/domain/picking/picking-lists/picking-lists.schema.ts +++ b/libs/domain/picking/lists/lists.schema.ts @@ -1,8 +1,8 @@ import { ContentComponentSchema } from '@spryker-oryx/experience'; -import { PickingListsComponent } from './picking-lists.component'; +import { PickingListsComponent } from './lists.component'; export const pickingListsComponentSchema: ContentComponentSchema = { - name: 'Picking lists', + name: 'Lists', group: 'Picking', }; diff --git a/libs/domain/picking/picking-lists/picking-lists.styles.ts b/libs/domain/picking/lists/lists.styles.ts similarity index 100% rename from libs/domain/picking/picking-lists/picking-lists.styles.ts rename to libs/domain/picking/lists/lists.styles.ts diff --git a/libs/domain/picking/picking-lists/stories/demo.stories.ts b/libs/domain/picking/lists/stories/demo.stories.ts similarity index 93% rename from libs/domain/picking/picking-lists/stories/demo.stories.ts rename to libs/domain/picking/lists/stories/demo.stories.ts index 8f357fa019..a8164fbc77 100644 --- a/libs/domain/picking/picking-lists/stories/demo.stories.ts +++ b/libs/domain/picking/lists/stories/demo.stories.ts @@ -8,7 +8,7 @@ import { TemplateResult } from 'lit/development'; import { storybookPrefix } from '../../.constants'; export default { - title: `${storybookPrefix}/Picking lists`, + title: `${storybookPrefix}/Lists`, parameters: { layout: 'fullscreen', chromatic: { diff --git a/libs/domain/picking/picking-lists/stories/static/data.stories.ts b/libs/domain/picking/lists/stories/static/data.stories.ts similarity index 94% rename from libs/domain/picking/picking-lists/stories/static/data.stories.ts rename to libs/domain/picking/lists/stories/static/data.stories.ts index 441037a89f..165a36d45c 100644 --- a/libs/domain/picking/picking-lists/stories/static/data.stories.ts +++ b/libs/domain/picking/lists/stories/static/data.stories.ts @@ -10,7 +10,7 @@ import { TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../../.constants'; export default { - title: `${storybookPrefix}/Picking lists/Static`, + title: `${storybookPrefix}/Lists/Static`, parameters: { layout: 'fullscreen', chromatic: { diff --git a/libs/domain/picking/picking-lists/stories/static/empty.stories.ts b/libs/domain/picking/lists/stories/static/empty.stories.ts similarity index 94% rename from libs/domain/picking/picking-lists/stories/static/empty.stories.ts rename to libs/domain/picking/lists/stories/static/empty.stories.ts index b5350c9fd5..39288f5f17 100644 --- a/libs/domain/picking/picking-lists/stories/static/empty.stories.ts +++ b/libs/domain/picking/lists/stories/static/empty.stories.ts @@ -10,7 +10,7 @@ import { TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../../.constants'; export default { - title: `${storybookPrefix}/Picking lists/Static`, + title: `${storybookPrefix}/Lists/Static`, parameters: { layout: 'fullscreen', chromatic: { diff --git a/libs/domain/picking/login/login.component.spec.ts b/libs/domain/picking/login/login.component.spec.ts index fc033599a7..71dc72d263 100644 --- a/libs/domain/picking/login/login.component.spec.ts +++ b/libs/domain/picking/login/login.component.spec.ts @@ -1,18 +1,18 @@ import { fixture } from '@open-wc/testing-helpers'; import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; -import { LoginPageComponent } from './login.component'; -import { loginPageComponent } from './login.def'; +import { PickingLoginComponent } from './login.component'; +import { pickingLoginComponent } from './login.def'; -describe('LoginPageComponent', () => { - let element: LoginPageComponent; +describe('PickingLoginPageComponent', () => { + let element: PickingLoginComponent; beforeAll(async () => { - await useComponent([loginPageComponent]); + await useComponent([pickingLoginComponent]); }); beforeEach(async () => { - element = await fixture(html` { diff --git a/libs/domain/picking/login/login.component.ts b/libs/domain/picking/login/login.component.ts index a82d910941..66b3a7e082 100644 --- a/libs/domain/picking/login/login.component.ts +++ b/libs/domain/picking/login/login.component.ts @@ -2,7 +2,7 @@ import { I18nMixin } from '@spryker-oryx/utilities'; import { html, LitElement, TemplateResult } from 'lit'; import { loginComponentStyles } from './login.styles'; -export class LoginPageComponent extends I18nMixin(LitElement) { +export class PickingLoginComponent extends I18nMixin(LitElement) { static styles = loginComponentStyles; protected override render(): TemplateResult { @@ -17,5 +17,3 @@ export class LoginPageComponent extends I18nMixin(LitElement) { >`; } } - -export default LoginPageComponent; diff --git a/libs/domain/picking/login/login.def.ts b/libs/domain/picking/login/login.def.ts index acee7d2b40..b0e8dab644 100644 --- a/libs/domain/picking/login/login.def.ts +++ b/libs/domain/picking/login/login.def.ts @@ -1,6 +1,6 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const loginPageComponent = componentDef({ - name: 'oryx-login-page', - impl: () => import('./login.component').then((m) => m.default), +export const pickingLoginComponent = componentDef({ + name: 'oryx-picking-login', + impl: () => import('./login.component').then((m) => m.PickingLoginComponent), }); diff --git a/libs/domain/picking/navigate-back/index.ts b/libs/domain/picking/navigate-back/index.ts deleted file mode 100644 index 489056ba9c..0000000000 --- a/libs/domain/picking/navigate-back/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './navigate-back.component'; -export * from './navigate-back.model'; -export * from './navigate-back.styles'; diff --git a/libs/domain/picking/navigate-back/navigate-back.component.spec.ts b/libs/domain/picking/navigate-back/navigate-back.component.spec.ts deleted file mode 100644 index 19d926e1ca..0000000000 --- a/libs/domain/picking/navigate-back/navigate-back.component.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { fixture } from '@open-wc/testing-helpers'; -import { destroyInjector } from '@spryker-oryx/di'; -import { useComponent } from '@spryker-oryx/utilities'; -import { html } from 'lit'; -import { NavigateBackComponent } from './navigate-back.component'; -import { navigateBackComponent } from './navigate-back.def'; - -describe('NavigateBackComponent', () => { - let element: NavigateBackComponent; - - beforeAll(async () => { - await useComponent(navigateBackComponent); - }); - - beforeEach(async () => { - element = await fixture(html``); - }); - - afterEach(() => { - destroyInjector(); - vi.clearAllMocks(); - }); - - describe('when there is no url provided', () => { - it('should use default url', () => { - expect(element.renderRoot.querySelector('oryx-button')).toHaveProperty( - 'href', - '/' - ); - }); - }); - - describe('when url prop is provided', () => { - const url = '/url'; - - beforeEach(async () => { - element = await fixture(html``); - }); - - it('should build the url based on provided url', () => { - expect(element.renderRoot.querySelector('oryx-button')).toHaveProperty( - 'href', - url - ); - }); - }); -}); diff --git a/libs/domain/picking/navigate-back/navigate-back.component.ts b/libs/domain/picking/navigate-back/navigate-back.component.ts deleted file mode 100644 index 069c4a542a..0000000000 --- a/libs/domain/picking/navigate-back/navigate-back.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { ButtonColor, ButtonSize, ButtonType } from '@spryker-oryx/ui/button'; -import { IconTypes } from '@spryker-oryx/ui/icon'; -import { I18nMixin } from '@spryker-oryx/utilities'; -import { LitElement, TemplateResult, html } from 'lit'; -import { property } from 'lit/decorators.js'; -import { NavigateBackAttributes } from './navigate-back.model'; -import { navigateBackComponentStyles } from './navigate-back.styles'; - -export class NavigateBackComponent - extends I18nMixin(LitElement) - implements NavigateBackAttributes -{ - static styles = navigateBackComponentStyles; - - @property() - url = '/'; - - protected override render(): TemplateResult { - return html` - - `; - } -} diff --git a/libs/domain/picking/navigate-back/navigate-back.def.ts b/libs/domain/picking/navigate-back/navigate-back.def.ts deleted file mode 100644 index 7b23e99209..0000000000 --- a/libs/domain/picking/navigate-back/navigate-back.def.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { componentDef } from '@spryker-oryx/utilities'; - -export const navigateBackComponent = componentDef({ - name: 'oryx-navigate-back', - impl: () => - import('./navigate-back.component').then((m) => m.NavigateBackComponent), - schema: () => - import('./navigate-back.schema').then((m) => m.navigateBackComponentSchema), -}); diff --git a/libs/domain/picking/navigate-back/navigate-back.model.ts b/libs/domain/picking/navigate-back/navigate-back.model.ts deleted file mode 100644 index 4e81bc5994..0000000000 --- a/libs/domain/picking/navigate-back/navigate-back.model.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface NavigateBackAttributes { - url?: string; -} diff --git a/libs/domain/picking/navigate-back/navigate-back.schema.ts b/libs/domain/picking/navigate-back/navigate-back.schema.ts deleted file mode 100644 index b87374af97..0000000000 --- a/libs/domain/picking/navigate-back/navigate-back.schema.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ContentComponentSchema } from '@spryker-oryx/experience'; -import { NavigateBackComponent } from './navigate-back.component'; - -export const navigateBackComponentSchema: ContentComponentSchema = - { - name: 'Navigate back', - group: 'Picking', - }; diff --git a/libs/domain/picking/navigate-back/navigate-back.styles.ts b/libs/domain/picking/navigate-back/navigate-back.styles.ts deleted file mode 100644 index ce13daf244..0000000000 --- a/libs/domain/picking/navigate-back/navigate-back.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { css } from 'lit'; - -export const navigateBackComponentStyles = css` - oryx-icon, - button { - color: var(--oryx-color-neutral-11); - } -`; diff --git a/libs/domain/picking/navigate-back/stories/demo.stories.ts b/libs/domain/picking/navigate-back/stories/demo.stories.ts deleted file mode 100644 index 9751136296..0000000000 --- a/libs/domain/picking/navigate-back/stories/demo.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Meta, Story } from '@storybook/web-components'; -import { TemplateResult, html } from 'lit'; -import { storybookPrefix } from '../../.constants'; -import { NavigateBackAttributes } from '../navigate-back.model'; - -export default { - title: `${storybookPrefix}/Navigate back`, - args: { url: '/test/url' }, - parameters: { - layout: 'fullscreen', - chromatic: { disableSnapshot: true }, - }, -} as Meta; - -const Template: Story = (props): TemplateResult => { - return html` - - - `; -}; - -export const Demo = Template.bind({}); diff --git a/libs/domain/picking/picker-header/index.ts b/libs/domain/picking/picker-header/index.ts new file mode 100644 index 0000000000..34b51255c8 --- /dev/null +++ b/libs/domain/picking/picker-header/index.ts @@ -0,0 +1 @@ +export * from './picker-header.component'; diff --git a/libs/domain/picking/picking-header/picking-header.component.spec.ts b/libs/domain/picking/picker-header/picker-header.component.spec.ts similarity index 77% rename from libs/domain/picking/picking-header/picking-header.component.spec.ts rename to libs/domain/picking/picker-header/picker-header.component.spec.ts index e455e1d54e..cef9fc436d 100644 --- a/libs/domain/picking/picking-header/picking-header.component.spec.ts +++ b/libs/domain/picking/picker-header/picker-header.component.spec.ts @@ -10,9 +10,9 @@ import { BACK_EVENT, CLOSE_EVENT } from '@spryker-oryx/ui/modal'; import { i18n, useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { BehaviorSubject, of } from 'rxjs'; -import { discardModalComponent } from '../discard-modal/discard-modal.def'; -import { PickingHeaderComponent } from './picking-header.component'; -import { pickingHeaderComponent } from './picking-header.def'; +import { pickingDiscardModalComponent } from '../discard-modal/discard-modal.def'; +import { PickingPickerHeaderComponent } from './picker-header.component'; +import { pickingPickerHeaderComponent } from './picker-header.def'; class MockPickingListService implements Partial { get = vi.fn().mockReturnValue(of([mockPickingListData[0]])); @@ -31,14 +31,17 @@ class MockRouterService implements Partial { back = vi.fn(); } -describe('PickingHeaderComponent', () => { - let element: PickingHeaderComponent; +describe('PickingPickerHeaderComponent', () => { + let element: PickingPickerHeaderComponent; let service: MockPickingListService; let routerService: MockRouterService; let pickingHeaderService: MockPickingHeaderService; beforeAll(async () => { - await useComponent([pickingHeaderComponent, discardModalComponent]); + await useComponent([ + pickingPickerHeaderComponent, + pickingDiscardModalComponent, + ]); }); beforeEach(async () => { @@ -60,7 +63,9 @@ describe('PickingHeaderComponent', () => { }); element = await fixture( - html`` + html`` ); service = testInjector.inject( @@ -82,12 +87,14 @@ describe('PickingHeaderComponent', () => { describe('when component is created', () => { beforeEach(async () => { element = await fixture( - html`` + html`` ); }); it('is defined', () => { - expect(element).toBeInstanceOf(PickingHeaderComponent); + expect(element).toBeInstanceOf(PickingPickerHeaderComponent); }); it('passes the a11y audit', async () => { @@ -95,12 +102,12 @@ describe('PickingHeaderComponent', () => { }); it('should render header component', () => { - expect(element).toContainElement('oryx-header'); + expect(element).toContainElement('oryx-picking-header'); }); it('should render back button', () => { const backButton = element.renderRoot.querySelector( - 'oryx-header oryx-button:first-of-type' + 'oryx-picking-header oryx-button:first-of-type' ); expect(backButton).toHaveProperty( @@ -120,11 +127,13 @@ describe('PickingHeaderComponent', () => { }); it('should render discard modal', () => { - expect(element).toContainElement('oryx-discard-picking'); + expect(element).toContainElement('oryx-picking-discard-modal'); }); it('should not show discard modal', () => { - expect(element).toContainElement('oryx-discard-picking:not([open])'); + expect(element).toContainElement( + 'oryx-picking-discard-modal:not([open])' + ); }); }); @@ -137,7 +146,7 @@ describe('PickingHeaderComponent', () => { it('should provide the note text to customer-note-modal component', () => { const customerNodeModal = element.renderRoot.querySelector( - 'oryx-customer-note-modal' + 'oryx-picking-customer-note-modal' ); expect(customerNodeModal?.hasAttribute('open')).toBe(true); expect(customerNodeModal?.textContent?.trim()).toBe( @@ -151,7 +160,9 @@ describe('PickingHeaderComponent', () => { service.get = vi.fn().mockReturnValue(of([mockPickingListData[1]])); element = await fixture( - html`` + html`` ); }); @@ -165,7 +176,7 @@ describe('PickingHeaderComponent', () => { it('should not render customer note modal', () => { expect( - element.renderRoot.querySelector('oryx-customer-note-modal') + element.renderRoot.querySelector('oryx-picking-customer-note-modal') ).toBeNull(); }); }); @@ -173,7 +184,7 @@ describe('PickingHeaderComponent', () => { describe('when back button is clicked', () => { beforeEach(() => { element.renderRoot - .querySelector('oryx-header oryx-button') + .querySelector('oryx-picking-header oryx-button') ?.click(); }); @@ -188,20 +199,22 @@ describe('PickingHeaderComponent', () => { }); it('should open discard modal', () => { - expect(element).toContainElement('oryx-discard-picking[open]'); + expect(element).toContainElement('oryx-picking-discard-modal[open]'); }); describe('and close button is clicked', () => { beforeEach(() => { element.renderRoot - .querySelector('oryx-discard-picking') + .querySelector('oryx-picking-discard-modal') ?.dispatchEvent( new CustomEvent(CLOSE_EVENT, { bubbles: true, composed: true }) ); }); it('should close discard modal', () => { - expect(element).toContainElement('oryx-discard-picking:not([open])'); + expect(element).toContainElement( + 'oryx-picking-discard-modal:not([open])' + ); }); it('should call picking header service cancel', () => { @@ -212,7 +225,7 @@ describe('PickingHeaderComponent', () => { describe('and discard button is clicked', () => { beforeEach(() => { element.renderRoot - .querySelector('oryx-discard-picking') + .querySelector('oryx-picking-discard-modal') ?.dispatchEvent( new CustomEvent(BACK_EVENT, { bubbles: true, composed: true }) ); diff --git a/libs/domain/picking/picking-header/picking-header.component.ts b/libs/domain/picking/picker-header/picker-header.component.ts similarity index 70% rename from libs/domain/picking/picking-header/picking-header.component.ts rename to libs/domain/picking/picker-header/picker-header.component.ts index 32a0344dee..c72c9ef1a3 100644 --- a/libs/domain/picking/picking-header/picking-header.component.ts +++ b/libs/domain/picking/picker-header/picker-header.component.ts @@ -1,16 +1,21 @@ import { resolve } from '@spryker-oryx/di'; import { PickingHeaderService, PickingListMixin } from '@spryker-oryx/picking'; -import { DiscardPickingComponent } from '@spryker-oryx/picking/discard-modal'; +import { PickingDiscardModalComponent } from '@spryker-oryx/picking/discard-modal'; import { RouterService } from '@spryker-oryx/router'; import { ButtonSize, ButtonType } from '@spryker-oryx/ui/button'; import { IconTypes } from '@spryker-oryx/ui/icon'; -import { I18nMixin, subscribe } from '@spryker-oryx/utilities'; +import { + I18nMixin, + elementEffect, + signal, + signalAware, +} from '@spryker-oryx/utilities'; import { LitElement, TemplateResult, html } from 'lit'; import { query, state } from 'lit/decorators.js'; -import { tap } from 'rxjs'; -import { styles } from './picking-header.styles'; +import { styles } from './picker-header.styles'; -export class PickingHeaderComponent extends I18nMixin( +@signalAware() +export class PickingPickerHeaderComponent extends I18nMixin( PickingListMixin(LitElement) ) { static styles = styles; @@ -18,19 +23,17 @@ export class PickingHeaderComponent extends I18nMixin( protected routerService = resolve(RouterService); protected pickingHeaderService = resolve(PickingHeaderService); - @query('oryx-discard-picking') - protected discardModal?: DiscardPickingComponent; + @query('oryx-picking-discard-modal') + protected discardModal?: PickingDiscardModalComponent; @state() isCartNoteVisible?: boolean; - @subscribe() - protected showDialog$ = this.pickingHeaderService - .showDialog() - .pipe( - tap((showDialog) => - showDialog ? this.openDiscardModal() : this.closeDiscardModal() - ) - ); + protected $showDialog = signal(this.pickingHeaderService.showDialog()); + + @elementEffect() + protected $modalAction = (): void => { + this.$showDialog() ? this.openDiscardModal() : this.closeDiscardModal(); + }; protected renderCartNoteButton(): TemplateResult { return html`${this.$pickingList()?.cartNote @@ -42,19 +45,19 @@ export class PickingHeaderComponent extends I18nMixin( .icon=${IconTypes.Info} @click=${() => (this.isCartNoteVisible = true)} > - (this.isCartNoteVisible = false)} > ${this.$pickingList()?.cartNote} - + ` : ''}`; } protected override render(): TemplateResult { return html` - +
${this.$pickingList()?.orderReferences[0]}
${this.renderCartNoteButton()} - { this.pickingHeaderService.cancel(); this.closeDiscardModal(); }} @oryx.back=${this.leave} - > - + > + `; } @@ -92,4 +95,4 @@ export class PickingHeaderComponent extends I18nMixin( } } -export default PickingHeaderComponent; +export default PickingPickerHeaderComponent; diff --git a/libs/domain/picking/picker-header/picker-header.def.ts b/libs/domain/picking/picker-header/picker-header.def.ts new file mode 100644 index 0000000000..10bbf497e6 --- /dev/null +++ b/libs/domain/picking/picker-header/picker-header.def.ts @@ -0,0 +1,9 @@ +import { componentDef } from '@spryker-oryx/utilities'; + +export const pickingPickerHeaderComponent = componentDef({ + name: 'oryx-picking-picker-header', + impl: () => + import('./picker-header.component').then( + (m) => m.PickingPickerHeaderComponent + ), +}); diff --git a/libs/domain/picking/picking-header/picking-header.styles.ts b/libs/domain/picking/picker-header/picker-header.styles.ts similarity index 75% rename from libs/domain/picking/picking-header/picking-header.styles.ts rename to libs/domain/picking/picker-header/picker-header.styles.ts index 7000c4ef06..52c638b178 100644 --- a/libs/domain/picking/picking-header/picking-header.styles.ts +++ b/libs/domain/picking/picker-header/picker-header.styles.ts @@ -5,8 +5,8 @@ export const styles = css` --oryx-icon-color: var(--oryx-color-primary-9); } - oryx-discard-picking, - oryx-customer-note-modal { + oryx-picking-discard-modal, + oryx-picking-customer-note-modal { margin-inline-start: -12px; } diff --git a/libs/domain/picking/picking-header/stories/demo.stories.ts b/libs/domain/picking/picker-header/stories/demo.stories.ts similarity index 72% rename from libs/domain/picking/picking-header/stories/demo.stories.ts rename to libs/domain/picking/picker-header/stories/demo.stories.ts index 98642fd78f..5925389f8c 100644 --- a/libs/domain/picking/picking-header/stories/demo.stories.ts +++ b/libs/domain/picking/picker-header/stories/demo.stories.ts @@ -1,13 +1,13 @@ +import { ListItemAttributes } from '@spryker-oryx/picking/list-item'; import { mockPickingListData } from '@spryker-oryx/picking/mocks'; import { Meta, Story } from '@storybook/web-components'; import { TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../.constants'; -import { PickingListItemAttributes } from '../../picking-list-item/picking-list-item.model'; const pickingListIds = mockPickingListData.map(({ id }) => id); export default { - title: `${storybookPrefix}/Picking header`, + title: `${storybookPrefix}/Picker header`, parameters: { chromatic: { disableSnapshot: true, @@ -22,12 +22,12 @@ export default { }, } as Meta; -const Template: Story = ({ +const Template: Story = ({ pickingListId, }): TemplateResult => { - return html``; + >`; }; export const Demo = Template.bind({}); diff --git a/libs/domain/picking/picking-header/stories/static/variants.stories.ts b/libs/domain/picking/picker-header/stories/static/variants.stories.ts similarity index 73% rename from libs/domain/picking/picking-header/stories/static/variants.stories.ts rename to libs/domain/picking/picker-header/stories/static/variants.stories.ts index ef40934074..c0a48535d3 100644 --- a/libs/domain/picking/picking-header/stories/static/variants.stories.ts +++ b/libs/domain/picking/picker-header/stories/static/variants.stories.ts @@ -7,7 +7,7 @@ import { TemplateResult, html } from 'lit'; import { storybookPrefix } from '../../../.constants'; export default { - title: `${storybookPrefix}/Picking header/Static`, + title: `${storybookPrefix}/Picker header/Static`, decorators: [OverlaysDecorator(320, 568)], parameters: { chromatic: { @@ -18,12 +18,14 @@ export default { const Template: Story = (): TemplateResult => { return html`

With cart note

- +

Without cart note

- `; + >`; }; export const Variants = Template.bind({}); diff --git a/libs/domain/picking/picker/index.ts b/libs/domain/picking/picker/index.ts new file mode 100644 index 0000000000..b245d0b192 --- /dev/null +++ b/libs/domain/picking/picker/index.ts @@ -0,0 +1,2 @@ +export * from './picker.component'; +export * from './picker.styles'; diff --git a/libs/domain/picking/picking/picking.component.spec.ts b/libs/domain/picking/picker/picker.component.spec.ts similarity index 93% rename from libs/domain/picking/picking/picking.component.spec.ts rename to libs/domain/picking/picker/picker.component.spec.ts index aa08ab5636..d226b1e0f2 100644 --- a/libs/domain/picking/picking/picking.component.spec.ts +++ b/libs/domain/picking/picker/picker.component.spec.ts @@ -12,8 +12,8 @@ import { i18n, useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of } from 'rxjs'; import { beforeEach } from 'vitest'; -import { PickingComponent } from './picking.component'; -import { pickingComponent } from './picking.def'; +import { PickingPickerComponent } from './picker.component'; +import { pickingPickerComponent } from './picker.def'; class MockPickingListService implements Partial { get = vi.fn().mockReturnValue(of([mockPickingListData[0]])); @@ -31,8 +31,8 @@ class MockRouterService implements Partial { Element.prototype.scrollIntoView = vi.fn(); -describe('PickingComponent', () => { - let element: PickingComponent; +describe('PickingPickerComponent', () => { + let element: PickingPickerComponent; let service: MockPickingListService; let routerService: MockRouterService; let pickingHeaderService: MockPickingHeaderService; @@ -53,7 +53,7 @@ describe('PickingComponent', () => { }; beforeAll(async () => { - await useComponent([pickingComponent, tabsComponent]); + await useComponent([pickingPickerComponent, tabsComponent]); }); beforeEach(async () => { @@ -87,7 +87,7 @@ describe('PickingComponent', () => { ) as unknown as MockPickingHeaderService; element = await fixture( - html`` + html`` ); }); @@ -130,7 +130,7 @@ describe('PickingComponent', () => { service.get = vi.fn().mockReturnValue(of([])); element = await fixture( - html`` + html`` ); }); @@ -163,7 +163,7 @@ describe('PickingComponent', () => { .mockReturnValue(of(mockPickingListData[1])); element = await fixture( - html`` + html`` ); }); @@ -230,7 +230,7 @@ describe('PickingComponent', () => { .mockReturnValue(of(partiallyPickedPickingList)); element = await fixture( - html`` + html`` ); }); diff --git a/libs/domain/picking/picking/picking.component.ts b/libs/domain/picking/picker/picker.component.ts similarity index 97% rename from libs/domain/picking/picking/picking.component.ts rename to libs/domain/picking/picker/picker.component.ts index 0f41f1f2b0..e94d2e813b 100644 --- a/libs/domain/picking/picking/picking.component.ts +++ b/libs/domain/picking/picker/picker.component.ts @@ -9,6 +9,7 @@ import { PickingTab, ProductItemPickedEvent, } from '@spryker-oryx/picking'; +import { PickingProductCardComponent } from '@spryker-oryx/picking/product-card'; import { RouterService } from '@spryker-oryx/router'; import { ButtonColor, ButtonType } from '@spryker-oryx/ui/button'; import { ChipComponent } from '@spryker-oryx/ui/chip'; @@ -22,10 +23,11 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'; import { repeat } from 'lit/directives/repeat.js'; import { when } from 'lit/directives/when.js'; import { catchError, of, tap } from 'rxjs'; -import { PickingProductCardComponent } from '../picking-product-card'; -import { pickingComponentStyles } from './picking.styles'; +import { pickingComponentStyles } from './picker.styles'; -export class PickingComponent extends I18nMixin(PickingListMixin(LitElement)) { +export class PickingPickerComponent extends I18nMixin( + PickingListMixin(LitElement) +) { static styles = pickingComponentStyles; protected routerService = resolve(RouterService); @@ -175,9 +177,9 @@ export class PickingComponent extends I18nMixin(PickingListMixin(LitElement)) { const tabs = this.buildTabs(); return html` - + > + import('./picker.component').then((m) => m.PickingPickerComponent), +}); diff --git a/libs/domain/picking/picking/picking.styles.ts b/libs/domain/picking/picker/picker.styles.ts similarity index 100% rename from libs/domain/picking/picking/picking.styles.ts rename to libs/domain/picking/picker/picker.styles.ts diff --git a/libs/domain/picking/picking-header/index.ts b/libs/domain/picking/picking-header/index.ts deleted file mode 100644 index e1de0a0ab7..0000000000 --- a/libs/domain/picking/picking-header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './picking-header.component'; diff --git a/libs/domain/picking/picking-header/picking-header.def.ts b/libs/domain/picking/picking-header/picking-header.def.ts deleted file mode 100644 index 0bcaa8404e..0000000000 --- a/libs/domain/picking/picking-header/picking-header.def.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { componentDef } from '@spryker-oryx/utilities'; - -export const pickingHeaderComponent = componentDef({ - name: 'oryx-picking-header', - impl: () => - import('./picking-header.component').then((m) => m.PickingHeaderComponent), -}); diff --git a/libs/domain/picking/picking-list-item/index.ts b/libs/domain/picking/picking-list-item/index.ts deleted file mode 100644 index 07bdf2aa44..0000000000 --- a/libs/domain/picking/picking-list-item/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './picking-list-item.component'; -export * from './picking-list-item.model'; -export * from './picking-list-item.styles'; diff --git a/libs/domain/picking/picking-list-item/picking-list-item.def.ts b/libs/domain/picking/picking-list-item/picking-list-item.def.ts deleted file mode 100644 index d6049cef32..0000000000 --- a/libs/domain/picking/picking-list-item/picking-list-item.def.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { componentDef } from '@spryker-oryx/utilities'; - -export const pickingListItemComponent = componentDef({ - name: 'oryx-picking-list-item', - impl: () => - import('./picking-list-item.component').then( - (m) => m.PickingListItemComponent - ), - schema: () => - import('./picking-list-item.schema').then( - (m) => m.pickingListItemComponentSchema - ), -}); diff --git a/libs/domain/picking/picking-lists-header/index.ts b/libs/domain/picking/picking-lists-header/index.ts deleted file mode 100644 index 3516ea0a57..0000000000 --- a/libs/domain/picking/picking-lists-header/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './picking-lists-header.component'; -export * from './picking-lists-header.styles'; diff --git a/libs/domain/picking/picking-lists/index.ts b/libs/domain/picking/picking-lists/index.ts deleted file mode 100644 index d1c5c17633..0000000000 --- a/libs/domain/picking/picking-lists/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './picking-lists.component'; -export * from './picking-lists.model'; -export * from './picking-lists.styles'; diff --git a/libs/domain/picking/picking-lists/picking-lists.def.ts b/libs/domain/picking/picking-lists/picking-lists.def.ts deleted file mode 100644 index 09af3304b2..0000000000 --- a/libs/domain/picking/picking-lists/picking-lists.def.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { componentDef } from '@spryker-oryx/utilities'; - -export const pickingListsComponent = componentDef({ - name: 'oryx-picking-lists', - impl: () => - import('./picking-lists.component').then((m) => m.PickingListsComponent), - schema: () => - import('./picking-lists.schema').then((m) => m.pickingListsComponentSchema), -}); diff --git a/libs/domain/picking/picking-product-card/index.ts b/libs/domain/picking/picking-product-card/index.ts deleted file mode 100644 index c496c6902b..0000000000 --- a/libs/domain/picking/picking-product-card/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './picking-product-card.component'; -export * from './picking-product-card.styles'; diff --git a/libs/domain/picking/picking/index.ts b/libs/domain/picking/picking/index.ts deleted file mode 100644 index e9fb7f7f8d..0000000000 --- a/libs/domain/picking/picking/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './picking.component'; -export * from './picking.styles'; diff --git a/libs/domain/picking/picking/picking.def.ts b/libs/domain/picking/picking/picking.def.ts deleted file mode 100644 index 60d05331e3..0000000000 --- a/libs/domain/picking/picking/picking.def.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { componentDef } from '@spryker-oryx/utilities'; - -export const pickingComponent = componentDef({ - name: 'oryx-picking', - impl: () => import('./picking.component').then((m) => m.default), -}); diff --git a/libs/domain/picking/product-card/index.ts b/libs/domain/picking/product-card/index.ts new file mode 100644 index 0000000000..01d504085f --- /dev/null +++ b/libs/domain/picking/product-card/index.ts @@ -0,0 +1,2 @@ +export * from './product-card.component'; +export * from './product-card.styles'; diff --git a/libs/domain/picking/picking-product-card/picking-product-card.component.spec.ts b/libs/domain/picking/product-card/product-card.component.spec.ts similarity index 97% rename from libs/domain/picking/picking-product-card/picking-product-card.component.spec.ts rename to libs/domain/picking/product-card/product-card.component.spec.ts index 59f4d7ef5c..f612a91b6a 100644 --- a/libs/domain/picking/picking-product-card/picking-product-card.component.spec.ts +++ b/libs/domain/picking/product-card/product-card.component.spec.ts @@ -5,8 +5,8 @@ import { mockPickingListData } from '@spryker-oryx/picking/mocks'; import { ImageComponent } from '@spryker-oryx/ui/image'; import { useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; -import { PickingProductCardComponent } from './picking-product-card.component'; -import { pickingProductCardComponent } from './picking-product-card.def'; +import { PickingProductCardComponent } from './product-card.component'; +import { pickingProductCardComponent } from './product-card.def'; describe('PickingProductCardComponent', () => { let element: PickingProductCardComponent; diff --git a/libs/domain/picking/picking-product-card/picking-product-card.component.ts b/libs/domain/picking/product-card/product-card.component.ts similarity index 83% rename from libs/domain/picking/picking-product-card/picking-product-card.component.ts rename to libs/domain/picking/product-card/product-card.component.ts index 78d2fb695e..b55c903c26 100644 --- a/libs/domain/picking/picking-product-card/picking-product-card.component.ts +++ b/libs/domain/picking/product-card/product-card.component.ts @@ -15,7 +15,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { Ref, createRef, ref } from 'lit/directives/ref.js'; import { when } from 'lit/directives/when.js'; -import { pickingProductCardComponentStyles } from './picking-product-card.styles'; +import { pickingProductCardComponentStyles } from './product-card.styles'; export class PickingProductCardComponent extends I18nMixin(LitElement) { static styles = pickingProductCardComponentStyles; @@ -139,36 +139,38 @@ export class PickingProductCardComponent extends I18nMixin(LitElement) { } protected renderEditStatus(): TemplateResult { - let text = ''; - let label = ''; - let subtext = ''; - if (!this.productItem) { return html``; } + let count: number; + let label = ''; + let subtext = ''; + + const { quantity, numberOfPicked, numberOfNotPicked } = this.productItem; + if (this.status === ItemsFilters.Picked) { - text = `${this.productItem.numberOfPicked}/${this.productItem.quantity}`; + count = numberOfPicked; - if (this.productItem.numberOfPicked < this.productItem.quantity) { - label = this.i18n('picking.product-card.items-picked') as string; + if (numberOfPicked < quantity) { + label = 'picking.product-card.items-picked'; } else { - subtext = this.i18n('picking.product-card.all-items-picked') as string; + subtext = 'picking.product-card.all-items-picked'; } - } else if (this.status === ItemsFilters.NotFound) { - text = `${this.productItem.numberOfNotPicked}/${this.productItem.quantity}`; + } else { + count = numberOfNotPicked; - if (this.productItem.numberOfNotPicked < this.productItem.quantity) { - label = this.i18n('picking.product-card.items-not-found') as string; + if (numberOfNotPicked < quantity) { + label = 'picking.product-card.items-not-found'; } else { - subtext = this.i18n('picking.product-card.no-items-found') as string; + subtext = 'picking.product-card.no-items-found'; } } return html`
-

${text} ${label}

- ${when(subtext, () => html`

${subtext}

`)} +

${count}/${quantity} ${this.i18n(label)}

+ ${when(subtext, () => html`

${this.i18n(subtext)}

`)}
- import('./picking-product-card.component').then( + import('./product-card.component').then( (m) => m.PickingProductCardComponent ), schema: () => - import('./picking-product-card.schema').then( + import('./product-card.schema').then( (m) => m.pickingProductCardComponentSchema ), }); diff --git a/libs/domain/picking/picking-product-card/picking-product-card.schema.ts b/libs/domain/picking/product-card/product-card.schema.ts similarity index 63% rename from libs/domain/picking/picking-product-card/picking-product-card.schema.ts rename to libs/domain/picking/product-card/product-card.schema.ts index ee6818aece..b685cc200b 100644 --- a/libs/domain/picking/picking-product-card/picking-product-card.schema.ts +++ b/libs/domain/picking/product-card/product-card.schema.ts @@ -1,8 +1,8 @@ import { ContentComponentSchema } from '@spryker-oryx/experience'; -import { PickingProductCardComponent } from './picking-product-card.component'; +import { PickingProductCardComponent } from './product-card.component'; export const pickingProductCardComponentSchema: ContentComponentSchema = { - name: 'Picking product card', + name: 'Product Card', group: 'Picking', }; diff --git a/libs/domain/picking/picking-product-card/picking-product-card.styles.ts b/libs/domain/picking/product-card/product-card.styles.ts similarity index 100% rename from libs/domain/picking/picking-product-card/picking-product-card.styles.ts rename to libs/domain/picking/product-card/product-card.styles.ts diff --git a/libs/domain/picking/src/components.ts b/libs/domain/picking/src/components.ts index 20d704b5ff..a88ab4bd42 100644 --- a/libs/domain/picking/src/components.ts +++ b/libs/domain/picking/src/components.ts @@ -4,14 +4,13 @@ export * from '../discard-modal/discard-modal.def'; export * from '../filter-button/filter-button.def'; export * from '../filters/filters.def'; export * from '../header/header.def'; +export * from '../list-item/list-item.def'; +export * from '../lists-header/lists-header.def'; +export * from '../lists/lists.def'; export * from '../login/login.def'; -export * from '../navigate-back/navigate-back.def'; -export * from '../picking-header/picking-header.def'; +export * from '../picker-header/picker-header.def'; +export * from '../picker/picker.def'; export * from '../picking-in-progress/picking-in-progress.def'; -export * from '../picking-list-item/picking-list-item.def'; -export * from '../picking-lists-header/picking-lists-header.def'; -export * from '../picking-lists/picking-lists.def'; -export * from '../picking-product-card/picking-product-card.def'; -export * from '../picking/picking.def'; +export * from '../product-card/product-card.def'; export * from '../user-profile/user-profile.def'; export * from '../warehouse-assignment/warehouse-assignment.def'; diff --git a/libs/domain/picking/src/feature.ts b/libs/domain/picking/src/feature.ts index 587cb1538b..6cc1ebed34 100644 --- a/libs/domain/picking/src/feature.ts +++ b/libs/domain/picking/src/feature.ts @@ -7,23 +7,22 @@ import { Provider } from '@spryker-oryx/di'; import { provideLitRoutes } from '@spryker-oryx/router/lit'; import { ComponentsInfo } from '@spryker-oryx/utilities'; import { - customerNoteComponent, - customerNoteModalComponent, - discardModalComponent, - filterButtonComponent, - filtersComponent, - headerComponent, - loginPageComponent, - navigateBackComponent, - pickingComponent, + pickingCustomerNoteComponent, + pickingCustomerNoteModalComponent, + pickingDiscardModalComponent, + pickingFilterButtonComponent, + pickingFiltersComponent, pickingHeaderComponent, pickingInProgressModalComponent, pickingListItemComponent, pickingListsComponent, pickingListsHeaderComponent, + pickingLoginComponent, + pickingPickerComponent, + pickingPickerHeaderComponent, pickingProductCardComponent, - userProfileComponent, - warehouseAssignmentComponent, + pickingUserProfileComponent, + pickingWarehouseAssignmentComponent, } from './components'; import { PickingConfig, providePickingConfig } from './config.provider'; import { defaultPickingRoutes } from './routes'; @@ -45,23 +44,22 @@ import { } from './services'; export const pickingComponents = [ - customerNoteComponent, - customerNoteModalComponent, - discardModalComponent, - filterButtonComponent, - filtersComponent, - loginPageComponent, - headerComponent, - navigateBackComponent, + pickingCustomerNoteComponent, + pickingCustomerNoteModalComponent, + pickingDiscardModalComponent, + pickingFilterButtonComponent, + pickingFiltersComponent, + pickingLoginComponent, + pickingHeaderComponent, pickingListsComponent, pickingListsHeaderComponent, pickingListItemComponent, pickingProductCardComponent, pickingInProgressModalComponent, - pickingComponent, - userProfileComponent, - pickingHeaderComponent, - warehouseAssignmentComponent, + pickingPickerComponent, + pickingUserProfileComponent, + pickingPickerHeaderComponent, + pickingWarehouseAssignmentComponent, ]; export interface PickingFeatureConfig extends PickingConfig { diff --git a/libs/domain/picking/src/mixins/picking-list.mixin.ts b/libs/domain/picking/src/mixins/picking-list.mixin.ts index d9deb704d8..663cb99cca 100644 --- a/libs/domain/picking/src/mixins/picking-list.mixin.ts +++ b/libs/domain/picking/src/mixins/picking-list.mixin.ts @@ -1,5 +1,5 @@ import { resolve } from '@spryker-oryx/di'; -import { PickingListComponentProperties } from '@spryker-oryx/picking/picking-lists'; +import { PickingListComponentProperties } from '@spryker-oryx/picking'; import { Signal, Type, diff --git a/libs/domain/picking/src/models/index.ts b/libs/domain/picking/src/models/index.ts index b9ec5de23e..5a0e32e21b 100644 --- a/libs/domain/picking/src/models/index.ts +++ b/libs/domain/picking/src/models/index.ts @@ -1,3 +1,4 @@ +export * from './lists-component'; export * from './pageable-qualifier'; export * from './picking-list'; export * from './picking-list-qualifier'; diff --git a/libs/domain/picking/picking-lists/picking-lists.model.ts b/libs/domain/picking/src/models/lists-component.ts similarity index 100% rename from libs/domain/picking/picking-lists/picking-lists.model.ts rename to libs/domain/picking/src/models/lists-component.ts diff --git a/libs/domain/picking/src/routes.ts b/libs/domain/picking/src/routes.ts index 8008eb272b..bcea153c0c 100644 --- a/libs/domain/picking/src/routes.ts +++ b/libs/domain/picking/src/routes.ts @@ -12,19 +12,27 @@ export const defaultPickingRoutes: RouteConfig[] = [ { path: '/warehouse-selection', render: () => - html``, + html``, }, { path: '/picking-list/picking/:id', render: ({ id }) => - html``, + html``, leave: (): Observable => resolve(PickingHeaderService).guardWithDialog(), }, { path: '/customer-note-info/:id', render: ({ id }) => html` - + `, }, ]; diff --git a/libs/domain/picking/user-profile/user-profile.component.spec.ts b/libs/domain/picking/user-profile/user-profile.component.spec.ts index 5f31cefacb..fe1b351582 100644 --- a/libs/domain/picking/user-profile/user-profile.component.spec.ts +++ b/libs/domain/picking/user-profile/user-profile.component.spec.ts @@ -7,8 +7,8 @@ import { RouterService } from '@spryker-oryx/router'; import { i18n, nextTick, useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { catchError, of, switchMap, throwError } from 'rxjs'; -import { UserProfileComponent } from './user-profile.component'; -import { userProfileComponent } from './user-profile.def'; +import { PickingUserProfileComponent } from './user-profile.component'; +import { pickingUserProfileComponent } from './user-profile.def'; const mockOfflineDataPlugin = { refreshData: vi.fn().mockReturnValue( @@ -42,15 +42,15 @@ class MockStorageService implements Partial { get = vi.fn().mockReturnValue(of(undefined)); } -describe('UserProfileComponent', () => { - let element: UserProfileComponent; +describe('PickingUserProfileComponent', () => { + let element: PickingUserProfileComponent; let routerService: MockRouterService; let syncSchedulerService: MockSyncSchedulerService; let authService: MockAuthService; let storageService: MockStorageService; beforeAll(async () => { - await useComponent(userProfileComponent); + await useComponent(pickingUserProfileComponent); }); beforeEach(async () => { @@ -107,7 +107,7 @@ describe('UserProfileComponent', () => { }); it('should be provided', () => { - expect(element).toBeInstanceOf(UserProfileComponent); + expect(element).toBeInstanceOf(PickingUserProfileComponent); }); it('should render its components', () => { diff --git a/libs/domain/picking/user-profile/user-profile.component.ts b/libs/domain/picking/user-profile/user-profile.component.ts index 0fdc035683..e3c2bcf354 100644 --- a/libs/domain/picking/user-profile/user-profile.component.ts +++ b/libs/domain/picking/user-profile/user-profile.component.ts @@ -24,7 +24,7 @@ import { import { userProfileComponentStyles } from './user-profile.styles'; @signalAware() -export class UserProfileComponent extends I18nMixin(LitElement) { +export class PickingUserProfileComponent extends I18nMixin(LitElement) { static styles = userProfileComponentStyles; protected routerService = resolve(RouterService); diff --git a/libs/domain/picking/user-profile/user-profile.def.ts b/libs/domain/picking/user-profile/user-profile.def.ts index 6703207d49..e2bdfe60fe 100644 --- a/libs/domain/picking/user-profile/user-profile.def.ts +++ b/libs/domain/picking/user-profile/user-profile.def.ts @@ -1,7 +1,9 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const userProfileComponent = componentDef({ +export const pickingUserProfileComponent = componentDef({ name: 'oryx-picking-user-profile', impl: () => - import('./user-profile.component').then((m) => m.UserProfileComponent), + import('./user-profile.component').then( + (m) => m.PickingUserProfileComponent + ), }); diff --git a/libs/domain/picking/warehouse-assignment/stories/demo.stories.ts b/libs/domain/picking/warehouse-assignment/stories/demo.stories.ts index 3f562e7497..b7db6c9a12 100644 --- a/libs/domain/picking/warehouse-assignment/stories/demo.stories.ts +++ b/libs/domain/picking/warehouse-assignment/stories/demo.stories.ts @@ -15,7 +15,9 @@ export default { } as Meta; const Template: Story = (): TemplateResult => { - return html` `; + return html` + + `; }; export const Demo = Template.bind({}); diff --git a/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.spec.ts b/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.spec.ts index ff2963cd63..44ea0a3f5d 100644 --- a/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.spec.ts +++ b/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.spec.ts @@ -3,7 +3,7 @@ import { App, AppRef } from '@spryker-oryx/core'; import { createInjector, destroyInjector } from '@spryker-oryx/di'; import { WarehouseUserAssignmentsService, - warehouseAssignmentComponent, + pickingWarehouseAssignmentComponent, } from '@spryker-oryx/picking'; import { mockWarehouseUserAssignments } from '@spryker-oryx/picking/mocks'; import { RouterService } from '@spryker-oryx/router'; @@ -12,7 +12,7 @@ import { i18n, nextTick, useComponent } from '@spryker-oryx/utilities'; import { html } from 'lit'; import { of, switchMap } from 'rxjs'; import { beforeEach, vi } from 'vitest'; -import { WarehouseAssignmentComponent } from './warehouse-assignment.component'; +import { PickingWarehouseAssignmentComponent } from './warehouse-assignment.component'; const mockOfflineDataPlugin = { refreshData: vi.fn().mockReturnValue( @@ -42,14 +42,14 @@ class MockRouterService implements Partial { navigate = vi.fn(); } -describe('WarehouseAssignmentComponent', () => { - let el: WarehouseAssignmentComponent; +describe('PickingWarehouseAssignmentComponent', () => { + let el: PickingWarehouseAssignmentComponent; let service: MockWarehouseUserAssignmentsService; let routerService: RouterService; beforeAll(async () => { - await useComponent(warehouseAssignmentComponent); + await useComponent(pickingWarehouseAssignmentComponent); }); beforeEach(async () => { @@ -85,7 +85,7 @@ describe('WarehouseAssignmentComponent', () => { beforeEach(async () => { service.getList.mockReturnValue(of(mockWarehouseUserAssignments)); el = await fixture( - html`` + html`` ); }); @@ -100,7 +100,7 @@ describe('WarehouseAssignmentComponent', () => { }); it('should render header', () => { - expect(el).toContainElement('oryx-header'); + expect(el).toContainElement('oryx-picking-header'); }); mockWarehouseUserAssignments.forEach((item, index) => { @@ -140,7 +140,7 @@ describe('WarehouseAssignmentComponent', () => { of(mockWarehouseUserAssignments.slice(0, 1)) ); el = await fixture( - html`` + html`` ); }); @@ -164,7 +164,7 @@ describe('WarehouseAssignmentComponent', () => { of(mockWarehouseUserAssignments.slice(0, 0)) ); el = await fixture( - html`` + html`` ); }); diff --git a/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.ts b/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.ts index 2425a232e1..92566ca0ce 100644 --- a/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.ts +++ b/libs/domain/picking/warehouse-assignment/warehouse-assignment.component.ts @@ -12,7 +12,7 @@ import { switchMap } from 'rxjs'; import { styles } from './warehouse-assignment.styles'; @signalAware() -export class WarehouseAssignmentComponent extends LitElement { +export class PickingWarehouseAssignmentComponent extends LitElement { static styles = styles; protected warehouseUserAssignmentsService = resolve( @@ -32,7 +32,7 @@ export class WarehouseAssignmentComponent extends LitElement { protected override render(): TemplateResult { return html` - + ${when( this.$locations() === null || this.$locations()?.length === 1, () => this.renderLoading(), diff --git a/libs/domain/picking/warehouse-assignment/warehouse-assignment.def.ts b/libs/domain/picking/warehouse-assignment/warehouse-assignment.def.ts index 97c8767954..3970ac7a5a 100644 --- a/libs/domain/picking/warehouse-assignment/warehouse-assignment.def.ts +++ b/libs/domain/picking/warehouse-assignment/warehouse-assignment.def.ts @@ -1,9 +1,9 @@ import { componentDef } from '@spryker-oryx/utilities'; -export const warehouseAssignmentComponent = componentDef({ - name: 'oryx-warehouse-assignment', +export const pickingWarehouseAssignmentComponent = componentDef({ + name: 'oryx-picking-warehouse-assignment', impl: () => import('./warehouse-assignment.component').then( - (m) => m.WarehouseAssignmentComponent + (m) => m.PickingWarehouseAssignmentComponent ), }); diff --git a/libs/domain/picking/warehouse-assignment/warehouse-assignment.styles.ts b/libs/domain/picking/warehouse-assignment/warehouse-assignment.styles.ts index a91dcf2fa1..d16a1bf2a2 100644 --- a/libs/domain/picking/warehouse-assignment/warehouse-assignment.styles.ts +++ b/libs/domain/picking/warehouse-assignment/warehouse-assignment.styles.ts @@ -7,7 +7,7 @@ export const styles = css` background: var(--oryx-color-neutral-3); } - oryx-header { + oryx-picking-header { box-shadow: var(--oryx-elevation-2) var(--oryx-elevation-color-2); } diff --git a/libs/platform/auth/src/bapi/routes.ts b/libs/platform/auth/src/bapi/routes.ts index 2b18a5f0b2..8afab6c09e 100644 --- a/libs/platform/auth/src/bapi/routes.ts +++ b/libs/platform/auth/src/bapi/routes.ts @@ -8,7 +8,7 @@ export const defaultBapiRoutes = ( ): RouteConfig[] => [ { path: loginPath, - render: () => html``, + render: () => html``, }, { path: callbackPath, diff --git a/tsconfig.base.json b/tsconfig.base.json index 7751eaba3f..717b1a7f5f 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -124,30 +124,25 @@ ], "@spryker-oryx/picking/filters": ["libs/domain/picking/filters/index.ts"], "@spryker-oryx/picking/header": ["libs/domain/picking/header/index.ts"], + "@spryker-oryx/picking/list-item": [ + "libs/domain/picking/list-item/index.ts" + ], + "@spryker-oryx/picking/lists": ["libs/domain/picking/lists/index.ts"], + "@spryker-oryx/picking/lists-header": [ + "libs/domain/picking/lists-header/index.ts" + ], "@spryker-oryx/picking/login": ["libs/domain/picking/login/index.ts"], "@spryker-oryx/picking/mocks": ["libs/domain/picking/mocks/index.ts"], - "@spryker-oryx/picking/navigate-back": [ - "libs/domain/picking/navigate-back/index.ts" - ], "@spryker-oryx/picking/offline": ["libs/domain/picking/offline/index.ts"], - "@spryker-oryx/picking/picking": ["libs/domain/picking/picking/index.ts"], - "@spryker-oryx/picking/picking-header": [ - "libs/domain/picking/picking-header/index.ts" + "@spryker-oryx/picking/picker": ["libs/domain/picking/picker/index.ts"], + "@spryker-oryx/picking/picker-header": [ + "libs/domain/picking/picker-header/index.ts" ], "@spryker-oryx/picking/picking-in-progress": [ "libs/domain/picking/picking-in-progress/index.ts" ], - "@spryker-oryx/picking/picking-list-item": [ - "libs/domain/picking/picking-list-item/index.ts" - ], - "@spryker-oryx/picking/picking-lists": [ - "libs/domain/picking/picking-lists/index.ts" - ], - "@spryker-oryx/picking/picking-lists-header": [ - "libs/domain/picking/picking-lists-header/index.ts" - ], - "@spryker-oryx/picking/picking-product-card": [ - "libs/domain/picking/picking-product-card/index.ts" + "@spryker-oryx/picking/product-card": [ + "libs/domain/picking/product-card/index.ts" ], "@spryker-oryx/picking/user-profile": [ "libs/domain/picking/user-profile/index.ts"