- 2. Shipping Method
+
- 3. Payment Information
+
{
);
} else {
- const loginButton = isGuestCheckout ? (
-
-
+ const signInContainerElement = isGuestCheckout ? (
+
+
-
+
+
) : null;
@@ -279,7 +289,6 @@ const CheckoutPage = props => {
);
checkoutContent = (
- {loginButton}
{
/>
{headerText}
+ {signInContainerElement}
@@ -311,7 +321,14 @@ const CheckoutPage = props => {
const addressBookElement = !isGuestCheckout ? (
+ ) : null;
+
+ const signInElement = isGuestCheckout ? (
+
) : null;
@@ -328,6 +345,7 @@ const CheckoutPage = props => {
{checkoutContent}
{addressBookElement}
+ {signInElement}
);
};
diff --git a/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap b/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
index 3c4b324f9f..71d138b5a2 100644
--- a/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
@@ -14,10 +14,16 @@ exports[`renders empty form without data 1`] = `
- Communications
+
- We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive.
+
- {cancelButton}
{submitButton}
+ {cancelButton}
);
@@ -171,7 +177,7 @@ CreateAccount.propTypes = {
lastName: string
}),
isCancelButtonHidden: bool,
- onSubmit: func.isRequired,
+ onSubmit: func,
onCancel: func
};
diff --git a/packages/venia-ui/lib/components/Dialog/__tests__/__snapshots__/dialog.spec.js.snap b/packages/venia-ui/lib/components/Dialog/__tests__/__snapshots__/dialog.spec.js.snap
index d663a877eb..9b0b8a8a79 100644
--- a/packages/venia-ui/lib/components/Dialog/__tests__/__snapshots__/dialog.spec.js.snap
+++ b/packages/venia-ui/lib/components/Dialog/__tests__/__snapshots__/dialog.spec.js.snap
@@ -45,7 +45,10 @@ exports[`does not render a close X button in modal mode 1`] = `
- Cancel
+
- Follow Us!
+
- Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+
- Terms of Use
+
-
- Privacy Policy
+
- Cancel
+
diff --git a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.css b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.css
index 31ce814bc5..777a270058 100644
--- a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.css
+++ b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.css
@@ -14,7 +14,7 @@
}
.cancelButton {
- composes: root_normalPriority from '../../Button/button.css';
+ composes: root_lowPriority from '../../Button/button.css';
min-width: 9rem;
}
diff --git a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js
index 55e142b592..6129c78552 100644
--- a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js
+++ b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js
@@ -39,7 +39,7 @@ const ForgotPasswordForm = props => {
className={classes.cancelButton}
disabled={isResettingPassword}
type="button"
- priority="normal"
+ priority="low"
onClick={onCancel}
>
- Recover Password
+
- Recover Password
+
Please enter the email address associated with this account.
diff --git a/packages/venia-ui/lib/components/LegacyMiniCart/editFormFragment.gql.js b/packages/venia-ui/lib/components/LegacyMiniCart/editFormFragment.gql.js
new file mode 100644
index 0000000000..7b6e6d38ca
--- /dev/null
+++ b/packages/venia-ui/lib/components/LegacyMiniCart/editFormFragment.gql.js
@@ -0,0 +1,50 @@
+import { gql } from '@apollo/client';
+
+export const EditFormFragment = gql`
+ fragment EditFormFragment on ProductInterface {
+ id
+ name
+ sku
+ url_key
+ __typename
+ ... on ConfigurableProduct {
+ configurable_options {
+ attribute_code
+ attribute_id
+ id
+ label
+ values {
+ default_label
+ label
+ store_label
+ use_default_value
+ value_index
+ swatch_data {
+ ... on ImageSwatchData {
+ thumbnail
+ }
+ value
+ }
+ }
+ }
+ variants {
+ attributes {
+ code
+ value_index
+ }
+ product {
+ id
+ media_gallery_entries {
+ id
+ disabled
+ file
+ label
+ position
+ }
+ sku
+ stock_status
+ }
+ }
+ }
+ }
+`;
diff --git a/packages/venia-ui/lib/components/LegacyMiniCart/editItem.js b/packages/venia-ui/lib/components/LegacyMiniCart/editItem.js
index 765e6bd436..024684d209 100644
--- a/packages/venia-ui/lib/components/LegacyMiniCart/editItem.js
+++ b/packages/venia-ui/lib/components/LegacyMiniCart/editItem.js
@@ -5,6 +5,7 @@ import { useEditItem } from '@magento/peregrine/lib/talons/LegacyMiniCart/useEdi
import LoadingIndicator from '../LoadingIndicator';
import CartOptions from './cartOptions';
+import { EditFormFragment } from './editFormFragment.gql';
const ERROR_TEXT = 'Unable to fetch item options.';
const LOADING_TEXT = 'Fetching Item Options...';
@@ -55,51 +56,10 @@ export const PRODUCT_DETAILS = gql`
query productDetailBySku($sku: String) {
products(filter: { sku: { eq: $sku } }) {
items {
- __typename
id
- name
- sku
- url_key
- ... on ConfigurableProduct {
- configurable_options {
- attribute_code
- attribute_id
- id
- label
- values {
- default_label
- label
- store_label
- use_default_value
- value_index
- swatch_data {
- ... on ImageSwatchData {
- thumbnail
- }
- value
- }
- }
- }
- variants {
- attributes {
- code
- value_index
- }
- product {
- id
- media_gallery_entries {
- id
- disabled
- file
- label
- position
- }
- sku
- stock_status
- }
- }
- }
+ ...EditFormFragment
}
}
}
+ ${EditFormFragment}
`;
diff --git a/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.gql.js b/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.gql.js
deleted file mode 100644
index bcb8a52fbe..0000000000
--- a/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.gql.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_STORE_CODE = gql`
- query getStoreCode {
- storeConfig {
- id
- code
- }
- }
-`;
-
-export default {
- queries: {
- getStoreCode: GET_STORE_CODE
- }
-};
diff --git a/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.js b/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.js
index 971c718d92..45f216e7e7 100644
--- a/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.js
+++ b/packages/venia-ui/lib/components/MagentoRoute/magentoRoute.js
@@ -1,44 +1,36 @@
import React from 'react';
import { useIntl } from 'react-intl';
import ErrorView from '../ErrorView';
-import {
- INTERNAL_ERROR,
- NOT_FOUND,
- useMagentoRoute
-} from '@magento/peregrine/lib/talons/MagentoRoute';
+import { useMagentoRoute } from '@magento/peregrine/lib/talons/MagentoRoute';
import { fullPageLoadingIndicator } from '../LoadingIndicator';
-import { GET_STORE_CODE } from './magentoRoute.gql';
const MESSAGES = new Map()
- .set(NOT_FOUND, 'That page could not be found. Please try again.')
- .set(INTERNAL_ERROR, 'Something went wrong. Please try again.');
+ .set('NOT_FOUND', 'That page could not be found. Please try again.')
+ .set('INTERNAL_ERROR', 'Something went wrong. Please try again.');
const MagentoRoute = () => {
const { formatMessage } = useIntl();
- const magentoRouteProps = { getStoreCode: GET_STORE_CODE };
- // If we have a specific store view code configured pass it into the url resolver
-
- const talonProps = useMagentoRoute(magentoRouteProps);
+ const talonProps = useMagentoRoute();
const {
component: RootComponent,
id,
isLoading,
- isRedirect,
- routeError
+ isNotFound,
+ isRedirect
} = talonProps;
if (isLoading || isRedirect) {
return fullPageLoadingIndicator;
} else if (RootComponent) {
return ;
- } else if (routeError === NOT_FOUND) {
+ } else if (isNotFound) {
return (
{formatMessage({
id: 'magentoRoute.routeError',
- defaultMessage: MESSAGES.get(routeError)
+ defaultMessage: MESSAGES.get('NOT_FOUND')
})}
@@ -50,7 +42,7 @@ const MagentoRoute = () => {
{formatMessage({
id: 'magentoRoute.internalError',
- defaultMessage: MESSAGES.get(INTERNAL_ERROR)
+ defaultMessage: MESSAGES.get('INTERNAL_ERROR')
})}
diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
index fe0fb53461..4057a0897d 100644
--- a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
+++ b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
@@ -66,7 +66,15 @@ www.venia.com/p1 2560w"
- Qty :
+
00
- ea.
+
- Qty :
+
00
- ea.
+
- Qty :
+
00
- ea.
+
- Items
+
- Subtotal:
+
$420
@@ -102,7 +113,10 @@ exports[`it renders correctly 1`] = `
/>
- CHECKOUT
+
diff --git a/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap b/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
index f9c9ef1c7b..b7239d9d0e 100644
--- a/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
+++ b/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
@@ -10,7 +10,10 @@ exports[`should render error message if token is falsy 1`] = `
- Uh oh, something went wrong. Check the link or try again.
+
@@ -30,7 +33,10 @@ exports[`should render formErrors 1`] = `
onSubmit={[Function]}
>
- Please enter your email address and new password.
+
-
-
- Gooseton
-
-
- Jr
-
-
-
+
+ Gooseton Jr
+
+
2134, Apt 123, Goose Drive
-
-
- Austin, TX, 78451
-
+
- USA
+ Austin, TX 78451 USA
`;
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap
index e7768276df..7e5b589bf2 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap
@@ -4,7 +4,7 @@ exports[`should render properly 1`] = `
-
- Product 1
+
@@ -45,8 +56,7 @@ exports[`should render properly 1`] = `
-
-
- $100.00
-
-
- Saved Payments - Venia
+ Saved Payments
-
- Credit Cards saved here will be available during checkout.
-
+
-
+ You have no saved payments.
`;
+
+exports[`renders loading indicator when isLoading is true 1`] = `
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js
new file mode 100644
index 0000000000..890ca23145
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import CreditCard from '../creditCard';
+
+import { createTestInstance } from '@magento/peregrine';
+
+const props = {
+ details: {
+ maskedCC: '1234',
+ type: 'VI',
+ expirationDate: '12/12/2022'
+ }
+};
+
+test('Should render properly', () => {
+ const instance = createTestInstance();
+
+ expect(instance.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js
new file mode 100644
index 0000000000..10773e5229
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PaymentCard from '../paymentCard';
+
+import { createTestInstance } from '@magento/peregrine';
+
+jest.mock('../savedPaymentTypes', () => ({
+ braintree: props =>
+}));
+
+const props = {
+ payment_method_code: 'braintree',
+ details: {
+ maskedCC: '1234',
+ type: 'VI',
+ expirationDate: '12/12/2022'
+ }
+};
+
+test('Should render properly', () => {
+ const instance = createTestInstance();
+
+ expect(instance.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
index 435e5aa7cf..dff14ad0a9 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
@@ -7,7 +7,6 @@ import SavedPaymentsPage from '../savedPaymentsPage';
jest.mock('@magento/venia-ui/lib/classify');
jest.mock('../../Head', () => ({ Title: () => 'Title' }));
-jest.mock('../../Icon', () => 'Icon');
jest.mock(
'@magento/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage',
() => {
@@ -16,14 +15,35 @@ jest.mock(
};
}
);
+jest.mock('../paymentCard', () => props => );
const props = {};
const talonProps = {
- savedPayments: [],
- handleAddPayment: jest.fn().mockName('handleAddPayment')
+ savedPayments: [
+ {
+ public_hash: '78asfg87ibafv',
+ payment_method_code: 'braintree',
+ details: {
+ maskedCC: '1234',
+ type: 'VI',
+ expirationDate: '12/12/2022'
+ }
+ }
+ ]
};
-it('renders correctly when there are no existing saved payments', () => {
+test('renders correctly when there are no existing saved payments', () => {
+ // Arrange.
+ useSavedPaymentsPage.mockReturnValueOnce({ savedPayments: [] });
+
+ // Act.
+ const instance = createTestInstance();
+
+ // Assert.
+ expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders correctly when there are existing saved payments', () => {
// Arrange.
useSavedPaymentsPage.mockReturnValueOnce(talonProps);
@@ -34,13 +54,12 @@ it('renders correctly when there are no existing saved payments', () => {
expect(instance.toJSON()).toMatchSnapshot();
});
-it('renders correctly when there are existing saved payments', () => {
+test('renders loading indicator when isLoading is true', () => {
// Arrange.
- const myTalonProps = {
+ useSavedPaymentsPage.mockReturnValueOnce({
...talonProps,
- savedPayments: ['a', 'b', 'c']
- };
- useSavedPaymentsPage.mockReturnValueOnce(myTalonProps);
+ isLoading: true
+ });
// Act.
const instance = createTestInstance();
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
new file mode 100644
index 0000000000..bf8fb00200
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -0,0 +1,48 @@
+.root {
+ border-radius: 0.375rem;
+ border: 2px solid rgb(var(--venia-global-color-gray-400));
+ column-gap: 1rem;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ min-height: 10rem;
+ min-width: 20rem;
+ padding: 1.5rem 2rem;
+}
+
+.root_selected {
+ composes: root;
+ border-color: rgb(var(--venia-brand-color-1-600));
+}
+
+.title {
+ font-weight: var(--venia-global-fontWeight-semibold);
+ grid-column: 1 / span 1;
+ grid-row: 1 / span 1;
+}
+
+.number {
+ grid-column: 1 / span 1;
+ grid-row: 2 / span 1;
+}
+
+.expiry_date {
+ grid-column: 1 / span 1;
+ grid-row: 3 / span 1;
+}
+
+.delete {
+ grid-column: 2 / span 1;
+ grid-row: 1 / span 3;
+}
+
+.deleteButton {
+ composes: root from '../LinkButton/linkButton.css';
+ text-decoration: none;
+ visibility: hidden;
+}
+
+@media (max-width: 960px) {
+ .deleteText {
+ display: none;
+ }
+}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
new file mode 100644
index 0000000000..c8fd5f013b
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -0,0 +1,98 @@
+import React, { useCallback, useMemo } from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Trash2 as DeleteIcon } from 'react-feather';
+
+import LinkButton from '../LinkButton';
+import Icon from '../Icon';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './creditCard.css';
+
+/**
+ * Enumerated list of supported credit card types from
+ *
+ * https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Payment/view/base/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js
+ */
+const cardTypeMapper = {
+ AE: 'American Express',
+ AU: 'Aura',
+ DI: 'Discover',
+ DN: 'Diners',
+ ELO: 'Elo',
+ HC: 'Hipercard',
+ JCB: 'JCB',
+ MC: 'MasterCard',
+ MD: 'Maestro Domestic',
+ MI: 'Maestro International',
+ UN: 'UnionPay',
+ VI: 'Visa'
+};
+
+const CreditCard = props => {
+ const { classes: propClasses, details } = props;
+ const classes = mergeClasses(defaultClasses, propClasses);
+
+ const number = `**** ${details.maskedCC} \u00A0\u00A0 ${cardTypeMapper[
+ details.type
+ ] || ''}`;
+ const cardExpiryDate = useMemo(() => {
+ const [month, year] = details.expirationDate.split('/');
+ const shortMonth = new Date(+year, +month - 1).toLocaleString(
+ 'default',
+ { month: 'short' }
+ );
+
+ return `${shortMonth}. ${year}`;
+ }, [details.expirationDate]);
+
+ // Should be moved to a talon in the future
+ const handleDelete = useCallback(() => {}, []);
+ const deleteButton = (
+
+
+
+
+
+
+ );
+
+ return (
+
+
+
+
+
{number}
+
{cardExpiryDate}
+
{deleteButton}
+
-
{payment_method_code}
-
{JSON.stringify(details, null, 2)}
-
{title}
{title}
-
{subHeading}
-
-
-
- {addButtonText}
-
- {savedPaymentElements}
-
+
{savedPaymentElements}
+
{noSavedPayments}
);
};
diff --git a/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap b/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap
index f2db72c34a..a0ceb9ea45 100644
--- a/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap
@@ -3,7 +3,10 @@
exports[`renders correctly 1`] = `
- Product Suggestions
+
`;
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
new file mode 100644
index 0000000000..33eaab5fc2
--- /dev/null
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
@@ -0,0 +1,798 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Page Component error view does not render when data is present 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component error view renders when data is not present and not loading 1`] = `
+
+
+
+`;
+
+exports[`Search Page Component filter button/modal does not render if there are no filters 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component filter button/modal renders when there are filters 1`] = `
+
+
+
+ 0 items
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component loading indicator does not render when data is present 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component loading indicator renders when data is not present 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component search results does not render if data returned has empty array 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component search results heading renders a generic message if no search term 1`] = `
+
+
+
+ 1 items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component search results heading renders a specific message if search term 1`] = `
+
+
+
+ 1 items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component search results renders if data has items 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component sort button/container does not render if total count is 0 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component sort button/container renders when total count > 0 1`] = `
+
+
+
+ 1 items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component total count renders 0 items if data.products.total_count is falsy 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Search Page Component total count renders results from data 1`] = `
+
+
+
+ 1 items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js b/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js
new file mode 100644
index 0000000000..b074b9e4cd
--- /dev/null
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/searchPage.spec.js
@@ -0,0 +1,225 @@
+import React from 'react';
+import createTestInstance from '@magento/peregrine/lib/util/createTestInstance';
+import { useSearchPage } from '@magento/peregrine/lib/talons/SearchPage/useSearchPage';
+import SearchPage from '../searchPage';
+
+jest.mock('@magento/peregrine/lib/talons/SearchPage/useSearchPage', () => ({
+ useSearchPage: jest.fn()
+}));
+
+jest.mock('../../Gallery', () => 'Gallery');
+jest.mock('../../FilterModal', () => 'FilterModal');
+jest.mock('../../ProductSort', () => 'ProductSort');
+jest.mock('../../../components/Pagination', () => 'Pagination');
+jest.mock('@magento/venia-ui/lib/classify');
+
+const talonProps = {
+ data: {
+ products: {
+ items: [{}]
+ }
+ },
+ error: null,
+ filters: [],
+ loading: false,
+ openDrawer: jest.fn(),
+ pageControl: {
+ currentPage: 1,
+ setPage: jest.fn(),
+ totalPages: 6
+ },
+ sortProps: [
+ {
+ sortText: 'Best Match',
+ sortAttribute: 'relevance',
+ sortDirection: 'DESC'
+ },
+ jest.fn()
+ ]
+};
+
+describe('Search Page Component', () => {
+ describe('loading indicator', () => {
+ test('does not render when data is present', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ loading: true
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ test('renders when data is not present', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ loading: true,
+ data: undefined
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+
+ describe('error view', () => {
+ test('does not render when data is present', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ error: true
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ test('renders when data is not present and not loading', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ error: true,
+ loading: false,
+ data: undefined
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+
+ describe('search results', () => {
+ test('does not render if data returned has empty array', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ loading: true,
+ data: {
+ products: {
+ items: []
+ }
+ }
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ test('renders if data has items', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ loading: true,
+ data: {
+ products: {
+ items: [{}]
+ }
+ }
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+
+ describe('total count', () => {
+ test('renders results from data', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ data: {
+ products: {
+ items: [{}],
+ total_count: 1
+ }
+ }
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ test('renders 0 items if data.products.total_count is falsy', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ data: {
+ products: {
+ items: [],
+ total_count: 0
+ }
+ }
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+
+ describe('filter button/modal', () => {
+ test('does not render if there are no filters', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ filters: []
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ test('renders when there are filters', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ filters: [{}]
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+
+ describe('sort button/container', () => {
+ test('does not render if total count is 0', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ data: {
+ products: {
+ items: [],
+ total_count: 0
+ }
+ }
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ test('renders when total count > 0', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ data: {
+ products: {
+ items: [{}],
+ total_count: 1
+ }
+ }
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+
+ describe('search results heading', () => {
+ test('renders a generic message if no search term', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ data: {
+ products: {
+ items: [{}],
+ total_count: 1
+ }
+ },
+ searchTerm: false
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ test('renders a specific message if search term', () => {
+ useSearchPage.mockReturnValueOnce({
+ ...talonProps,
+ data: {
+ products: {
+ items: [{}],
+ total_count: 1
+ }
+ },
+ searchTerm: 'Search Term',
+ searchCategory: 'Search Category'
+ });
+ const tree = createTestInstance();
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ });
+});
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.gql.js b/packages/venia-ui/lib/components/SearchPage/searchPage.gql.js
deleted file mode 100644
index 2243ad49e1..0000000000
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.gql.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_PAGE_SIZE = gql`
- query getPageSize {
- storeConfig {
- id
- grid_per_page
- }
- }
-`;
-
-export default {
- queries: {
- getPageSize: GET_PAGE_SIZE
- }
-};
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 7976c0b65d..4aa0698e57 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -5,23 +5,19 @@ import { shape, string } from 'prop-types';
import { useSearchPage } from '@magento/peregrine/lib/talons/SearchPage/useSearchPage';
import { mergeClasses } from '../../classify';
-import Gallery from '../Gallery';
+import Pagination from '../../components/Pagination';
import FilterModal from '../FilterModal';
+import Gallery from '../Gallery';
import { fullPageLoadingIndicator } from '../LoadingIndicator';
-import Pagination from '../../components/Pagination';
-import defaultClasses from './searchPage.css';
-import { GET_PAGE_SIZE } from './searchPage.gql';
import ProductSort from '../ProductSort';
import Button from '../Button';
+import defaultClasses from './searchPage.css';
+
const SearchPage = props => {
const classes = mergeClasses(defaultClasses, props.classes);
- const talonProps = useSearchPage({
- queries: {
- getPageSize: GET_PAGE_SIZE
- }
- });
+ const talonProps = useSearchPage();
const {
data,
@@ -38,22 +34,24 @@ const SearchPage = props => {
const [currentSort] = sortProps;
- if (loading && !data) return fullPageLoadingIndicator;
- if (error) {
- return (
-
-
-
- );
+ if (!data) {
+ if (loading) return fullPageLoadingIndicator;
+ else if (error) {
+ return (
+
+
+
+ );
+ }
}
let content;
- if (!data || data.products.items.length === 0) {
+ if (data.products.items.length === 0) {
content = (
{
);
}
- const totalCount = data ? data.products.total_count : 0;
+ const totalCount = data.products.total_count || 0;
const maybeFilterButtons =
filters && filters.length ? (
diff --git a/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap b/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap
index a8b6258be5..963f97729b 100644
--- a/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap
+++ b/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap
@@ -7,7 +7,10 @@ exports[`displays an error message if there is a sign in error 1`] = `
- Sign-in to Your Account
+
- Sign-in to Your Account
+
- An item in your cart is currently out-of-stock and must be removed in order to Checkout.
+
`;
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/createWishlist.ee.spec.js.snap b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/createWishlist.ee.spec.js.snap
index 83ed619730..5c3383eed7 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/createWishlist.ee.spec.js.snap
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/createWishlist.ee.spec.js.snap
@@ -50,7 +50,10 @@ exports[`renders correctly 1`] = `
- Create a list
+
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlist.spec.js.snap b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlist.spec.js.snap
index 60f86304a3..9ce183b461 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlist.spec.js.snap
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlist.spec.js.snap
@@ -195,7 +195,10 @@ exports[`render open with no items 1`] = `
className="content"
>
- There are currently no items in this list
+
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistConfirmRemoveProductDialog.spec.js.snap b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistConfirmRemoveProductDialog.spec.js.snap
index 13c993c996..75336b8fa4 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistConfirmRemoveProductDialog.spec.js.snap
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistConfirmRemoveProductDialog.spec.js.snap
@@ -21,7 +21,10 @@ exports[`renders correctly 1`] = `
- Are you sure you want to delete this product from the list?
+
@@ -48,7 +51,10 @@ exports[`renders correctly when closed 1`] = `
- Are you sure you want to delete this product from the list?
+
@@ -75,7 +81,10 @@ exports[`renders correctly when removal is in progress 1`] = `
- Are you sure you want to delete this product from the list?
+
@@ -102,12 +111,18 @@ exports[`renders correctly with error 1`] = `
- There was an error deleting this product. Please try again later.
+
- Are you sure you want to delete this product from the list?
+
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistMoreActionsDialog.spec.js.snap b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistMoreActionsDialog.spec.js.snap
index 9a869bf474..d1c46aac75 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistMoreActionsDialog.spec.js.snap
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistMoreActionsDialog.spec.js.snap
@@ -60,7 +60,10 @@ exports[`renders correctly when closed 1`] = `
- Move to
+
- Copy to
+
- Remove
+
@@ -258,7 +267,10 @@ exports[`renders correctly when open 1`] = `
- Move to
+
- Copy to
+
- Remove
+
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap
index f84850b459..40235b8579 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap
@@ -7,13 +7,19 @@ exports[`renders disabled feature error 1`] = `
- Favorites Lists
+
- Sorry, this feature has been disabled.
+
@@ -26,7 +32,10 @@ exports[`renders general fetch error 1`] = `
- Favorites Lists
+
- Something went wrong. Please refresh and try again.
+
@@ -112,7 +124,10 @@ exports[`renders loading indicator 1`] = `
- Fetching Data...
+
`;
@@ -124,7 +139,10 @@ exports[`renders wishlist data 1`] = `
- Favorites Lists
+
{
+ const savedPaymentTypes = new SavedPaymentTypes(venia);
+
+ expect(savedPaymentTypes).toMatchSnapshot();
+});
+
+test('Should add new import when add is called', () => {
+ const savedPaymentTypes = new SavedPaymentTypes(venia);
+
+ const paymentCode = 'braintree';
+ const importPath = 'path/to/the/component.js';
+ savedPaymentTypes.add({
+ paymentCode,
+ importPath
+ });
+
+ expect(add).toHaveBeenCalledWith(
+ `import ${paymentCode} from '${importPath}'`
+ );
+});
diff --git a/packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap b/packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap
new file mode 100644
index 0000000000..374ab24583
--- /dev/null
+++ b/packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should return correct shape 1`] = `
+SavedPaymentTypes {
+ "_methods": Object {
+ "add": [MockFunction esModuleObject.add],
+ },
+}
+`;
diff --git a/packages/venia-ui/lib/targets/__tests__/makeRoutesTarget.spec.js b/packages/venia-ui/lib/targets/__tests__/makeRoutesTarget.spec.js
new file mode 100644
index 0000000000..205bd4acf5
--- /dev/null
+++ b/packages/venia-ui/lib/targets/__tests__/makeRoutesTarget.spec.js
@@ -0,0 +1,66 @@
+const {
+ mockTargetProvider
+} = require('@magento/pwa-buildpack/lib/TestHelpers');
+
+const makeRoutesTarget = require('../makeRoutesTarget');
+const TargetableSet = require('@magento/pwa-buildpack/lib/WebpackTools/targetables/TargetableSet');
+
+const FAKE_ADDED_ROUTE = 'ADDED_ROUTE';
+
+const targets = mockTargetProvider(
+ '@magento/venia-ui',
+ (_, dep) =>
+ ({
+ '@magento/pwa-buildpack': {
+ specialFeatures: {
+ tap: jest.fn()
+ },
+ transformModules: {
+ tapPromise: jest.fn()
+ }
+ }
+ }[dep])
+);
+const targetable = TargetableSet.using(targets);
+const mockPrependJSX = jest.fn();
+
+jest.mock(
+ '../../defaultRoutes.json',
+ () => [
+ {
+ name: 'Single path route',
+ pattern: '/simple',
+ exact: true,
+ path: '../AccountInformationPage'
+ },
+ {
+ name: 'Multiple path route',
+ pattern: ['/one', '/two'],
+ exact: true,
+ path: '../AccountInformationPage'
+ }
+ ],
+ { virtual: true }
+);
+
+beforeAll(() => {
+ jest.spyOn(targetable, 'reactComponent').mockImplementation(() => ({
+ addReactLazyImport: () => FAKE_ADDED_ROUTE,
+ prependJSX: mockPrependJSX
+ }));
+});
+
+test('Call prependJSX with the correct path patterns', async () => {
+ makeRoutesTarget(targetable);
+
+ expect(mockPrependJSX).toHaveBeenNthCalledWith(
+ 1,
+ 'Switch',
+ `<${FAKE_ADDED_ROUTE}/>`
+ );
+ expect(mockPrependJSX).toHaveBeenNthCalledWith(
+ 2,
+ 'Switch',
+ `<${FAKE_ADDED_ROUTE}/>`
+ );
+});
diff --git a/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js b/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
index 9937e5016c..790ee034e7 100644
--- a/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
+++ b/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
@@ -99,18 +99,18 @@ test('uses routes to inject client-routed pages', async () => {
expect(built.bundle).toContain('DynamicCheckout');
});
-test('declares payments target', async () => {
+test('declares checkoutPagePaymentTypes target', async () => {
const bus = mockBuildBus({
context: __dirname,
dependencies: [thisDep]
});
bus.runPhase('declare');
- const { payments } = bus.getTargetsOf('@magento/venia-ui');
+ const { checkoutPagePaymentTypes } = bus.getTargetsOf('@magento/venia-ui');
const interceptor = jest.fn();
// no implementation testing in declare phase
- payments.tap('test', interceptor);
- payments.call('woah');
+ checkoutPagePaymentTypes.tap('test', interceptor);
+ checkoutPagePaymentTypes.call('woah');
expect(interceptor).toHaveBeenCalledWith('woah');
});
@@ -125,36 +125,21 @@ test('uses RichContentRenderers to default strategy Payment Method', async () =>
}
);
- const payments = built.run();
- expect(payments).toHaveProperty('braintree');
+ const checkoutPagePaymentTypes = built.run();
+ expect(checkoutPagePaymentTypes).toHaveProperty('braintree');
});
-test('declares payments target', async () => {
+test('declares savedPaymentTypes target', async () => {
const bus = mockBuildBus({
context: __dirname,
dependencies: [thisDep]
});
bus.runPhase('declare');
- const { payments } = bus.getTargetsOf('@magento/venia-ui');
+ const { savedPaymentTypes } = bus.getTargetsOf('@magento/venia-ui');
const interceptor = jest.fn();
// no implementation testing in declare phase
- payments.tap('test', interceptor);
- payments.call('woah');
+ savedPaymentTypes.tap('test', interceptor);
+ savedPaymentTypes.call('woah');
expect(interceptor).toHaveBeenCalledWith('woah');
});
-
-test('uses RichContentRenderers to default strategy Payment Method', async () => {
- jest.setTimeout(WEBPACK_BUILD_TIMEOUT);
-
- const built = await buildModuleWith(
- '../../components/CheckoutPage/PaymentInformation/paymentMethodCollection.js',
- {
- context: __dirname,
- dependencies: ['@magento/peregrine', thisDep]
- }
- );
-
- const payments = built.run();
- expect(payments).toHaveProperty('braintree');
-});
diff --git a/packages/venia-ui/lib/targets/makeRoutesTarget.js b/packages/venia-ui/lib/targets/makeRoutesTarget.js
index 834f6c8220..54b252246d 100644
--- a/packages/venia-ui/lib/targets/makeRoutesTarget.js
+++ b/packages/venia-ui/lib/targets/makeRoutesTarget.js
@@ -13,9 +13,9 @@ function addRoutes(routeList, routes) {
const AddedRoute = routeList.addReactLazyImport(route.path, route.name);
routeList.prependJSX(
'Switch',
- `<${AddedRoute}/>`
+ )}}><${AddedRoute}/>`
);
}
}
diff --git a/packages/venia-ui/lib/targets/venia-ui-declare.js b/packages/venia-ui/lib/targets/venia-ui-declare.js
index 19eadf58aa..fb85ba8ed0 100644
--- a/packages/venia-ui/lib/targets/venia-ui-declare.js
+++ b/packages/venia-ui/lib/targets/venia-ui-declare.js
@@ -66,25 +66,48 @@ module.exports = targets => {
routes: new targets.types.AsyncSeriesWaterfall(['routes']),
/**
- * Provides access to Venia's payment methods
+ * Provides access to Venia's checkout page payment methods
*
- * This target lets you add new payment to your storefronts.
+ * This target lets you add new checkout page payment to your storefronts.
*
* @member {tapable.SyncHook}
*
* @see [Intercept function signature]{@link paymentInterceptFunction}
- * @see [PaymentMethodList]{@link #PaymentMethodList}
- * @see [Payment definition object]{@link PaymentDefinition}
+ * @see [CheckoutPaymentTypes]{@link #CheckoutPaymentTypesDefinition}
+ * @see [CheckoutPayment definition object]{@link CheckoutPaymentDefinition}
*
* @example Add a payment
- * targets.of('@magento/venia-ui').payments.tap(
- * payments => payments.add({
+ * targets.of('@magento/venia-ui').checkoutPagePaymentTypes.tap(
+ * checkoutPagePaymentTypes => checkoutPagePaymentTypes.add({
* paymentCode: 'braintree',
* importPath: '@magento/braintree_payment'
* })
* );
*/
- payments: new targets.types.Sync(['payments'])
+ checkoutPagePaymentTypes: new targets.types.Sync([
+ 'checkoutPagePaymentTypes'
+ ]),
+
+ /**
+ * Provides access to Venia's saved payment methods
+ *
+ * This target lets you add new saved payment method to your storefronts.
+ *
+ * @member {tapable.SyncHook}
+ *
+ * @see [Intercept function signature]{@link savedPaymentInterceptFunction}
+ * @see [SavedPaymentTypes]{@link #SavedPaymentTypesDefinition}
+ * @see [SavedPayment definition object]{@link SavedPaymentDefinition}
+ *
+ * @example Add a payment
+ * targets.of('@magento/venia-ui').savedPaymentTypes.tap(
+ * savedPaymentTypes => savedPaymentTypes.add({
+ * paymentCode: 'braintree',
+ * importPath: '@magento/braintree_payment'
+ * })
+ * );
+ */
+ savedPaymentTypes: new targets.types.Sync(['savedPaymentTypes'])
});
};
@@ -181,24 +204,24 @@ module.exports = targets => {
* }
*/
-/** Type definition related to: payments */
+/** Type definition related to: checkoutPagePaymentTypes */
/**
- * Intercept function signature for the `payments` target.
+ * Intercept function signature for the `checkoutPagePaymentTypes` target.
*
- * Interceptors of `payments` should call `.add` on the provided [payment list]{@link #PaymentMethodList}.
+ * Interceptors of `checkoutPagePaymentTypes` should call `.add` on the provided [payment list]{@link #CheckoutPaymentTypesDefinition}.
*
* @callback paymentInterceptFunction
*
- * @param {PaymentMethodList} renderers The list of payments registered
+ * @param {CheckoutPaymentTypesDefinition} renderers The list of payments registered
* so far in the build.
*
*/
/**
- * A payment definition object that describes a payment in your storefront.
+ * A payment definition object that describes a checkout page payment in your storefront.
*
- * @typedef {Object} PaymentDefinition
+ * @typedef {Object} CheckoutPaymentDefinition
* @property {string} paymentCode is use to map your payment
* @property {string} importPath Resolvable path to the component the
* Route component will render
@@ -210,24 +233,24 @@ module.exports = targets => {
* }
*/
-/** Type definition related to: payments */
+/** Type definition related to: savedPaymentTypes */
/**
- * Intercept function signature for the `payments` target.
+ * Intercept function signature for the `savedPaymentTypes` target.
*
- * Interceptors of `payments` should call `.add` on the provided [payment list]{@link #PaymentMethodList}.
+ * Interceptors of `savedPaymentTypes` should call `.add` on the provided [payment list]{@link #SavedPaymentTypesDefinition}.
*
- * @callback paymentInterceptFunction
+ * @callback savedPaymentInterceptFunction
*
- * @param {PaymentMethodList} renderers The list of payments registered
+ * @param {SavedPaymentTypesDefinition} renderers The list of saved payments registered
* so far in the build.
*
*/
/**
- * A payment definition object that describes a payment in your storefront.
+ * A payment definition object that describes a saved payment in your storefront.
*
- * @typedef {Object} PaymentDefinition
+ * @typedef {Object} SavedPaymentDefinition
* @property {string} paymentCode is use to map your payment
* @property {string} importPath Resolvable path to the component the
* Route component will render
@@ -235,6 +258,6 @@ module.exports = targets => {
* @example A custom payment method
* const myCustomPayment = {
* paymentCode: 'cc',
- * importPath: '@partner/module/path_to_your_component'
+ * importPath: '@partner/module/path_to_your_component'
* }
*/
diff --git a/packages/venia-ui/lib/targets/venia-ui-intercept.js b/packages/venia-ui/lib/targets/venia-ui-intercept.js
index 4d41478a1c..cf2ea3f59a 100644
--- a/packages/venia-ui/lib/targets/venia-ui-intercept.js
+++ b/packages/venia-ui/lib/targets/venia-ui-intercept.js
@@ -4,7 +4,8 @@
const { Targetables } = require('@magento/pwa-buildpack');
const RichContentRendererList = require('./RichContentRendererList');
const makeRoutesTarget = require('./makeRoutesTarget');
-const PaymentMethodList = require('./PaymentMethodList');
+const CheckoutPagePaymentsList = require('./CheckoutPagePaymentsList');
+const SavedPaymentTypes = require('./SavedPaymentTypes');
module.exports = veniaTargets => {
const venia = Targetables.using(veniaTargets);
@@ -27,10 +28,17 @@ module.exports = veniaTargets => {
importPath: './plainHtmlRenderer'
});
- const paymentMethodList = new PaymentMethodList(venia);
- paymentMethodList.add({
+ const checkoutPagePaymentsList = new CheckoutPagePaymentsList(venia);
+ checkoutPagePaymentsList.add({
paymentCode: 'braintree',
importPath:
'@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard'
});
+
+ const savedPaymentTypes = new SavedPaymentTypes(venia);
+ savedPaymentTypes.add({
+ paymentCode: 'braintree',
+ importPath:
+ '@magento/venia-ui/lib/components/SavedPaymentsPage/creditCard'
+ });
};
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
index 1cf8c1f49c..197025a30f 100644
--- a/packages/venia-ui/package.json
+++ b/packages/venia-ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@magento/venia-ui",
- "version": "5.0.0",
+ "version": "6.0.0",
"publishConfig": {
"access": "public"
},
@@ -76,8 +76,8 @@
"peerDependencies": {
"@apollo/client": "~3.1.2",
"@magento/babel-preset-peregrine": "~1.1.0",
- "@magento/peregrine": "~8.0.0",
- "@magento/pwa-buildpack": "~7.0.0",
+ "@magento/peregrine": "~9.0.0",
+ "@magento/pwa-buildpack": "~8.0.0",
"apollo-cache-persist": "~0.1.1",
"braintree-web-drop-in": "~1.16.0",
"graphql": "~15.3.0",
diff --git a/packages/venia-ui/upward.yml b/packages/venia-ui/upward.yml
index a0d009723a..42ff06420b 100644
--- a/packages/venia-ui/upward.yml
+++ b/packages/venia-ui/upward.yml
@@ -31,6 +31,14 @@ staticFromRoot:
resolver: inline
inline:
content-type: contentTypeFromExtension
+ cache-control:
+ when:
+ - matches: env.NODE_ENV
+ pattern: 'production'
+ use:
+ inline: public, max-age=604800
+ default:
+ inline: no-cache, no-store, must-revalidate
body:
resolver: file
parse:
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/css-modules/index.md b/pwa-devdocs/_archived/css-modules/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/pwa-studio-fundamentals/css-modules/index.md
rename to pwa-devdocs/_archived/css-modules/index.md
diff --git a/pwa-devdocs/src/tutorials/hello-upward/adding-react/index.md b/pwa-devdocs/_archived/hello-upward/adding-react/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/hello-upward/adding-react/index.md
rename to pwa-devdocs/_archived/hello-upward/adding-react/index.md
diff --git a/pwa-devdocs/src/tutorials/hello-upward/simple-server/index.md b/pwa-devdocs/_archived/hello-upward/simple-server/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/hello-upward/simple-server/index.md
rename to pwa-devdocs/_archived/hello-upward/simple-server/index.md
diff --git a/pwa-devdocs/src/tutorials/hello-upward/using-template-resolver/index.md b/pwa-devdocs/_archived/hello-upward/using-template-resolver/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/hello-upward/using-template-resolver/index.md
rename to pwa-devdocs/_archived/hello-upward/using-template-resolver/index.md
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/manage-state/index.md b/pwa-devdocs/_archived/manage-state/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/pwa-studio-fundamentals/manage-state/index.md
rename to pwa-devdocs/_archived/manage-state/index.md
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/using-component-props/images/prop-types-error.png b/pwa-devdocs/_archived/using-component-props/images/prop-types-error.png
similarity index 100%
rename from pwa-devdocs/src/tutorials/pwa-studio-fundamentals/using-component-props/images/prop-types-error.png
rename to pwa-devdocs/_archived/using-component-props/images/prop-types-error.png
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/using-component-props/index.md b/pwa-devdocs/_archived/using-component-props/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/pwa-studio-fundamentals/using-component-props/index.md
rename to pwa-devdocs/_archived/using-component-props/index.md
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/work-with-graphql/index.md b/pwa-devdocs/_archived/work-with-graphql/index.md
similarity index 100%
rename from pwa-devdocs/src/tutorials/pwa-studio-fundamentals/work-with-graphql/index.md
rename to pwa-devdocs/_archived/work-with-graphql/index.md
diff --git a/pwa-devdocs/package.json b/pwa-devdocs/package.json
index 75ad6c817a..150fcdd829 100644
--- a/pwa-devdocs/package.json
+++ b/pwa-devdocs/package.json
@@ -1,7 +1,7 @@
{
"name": "pwa-devdocs",
"private": true,
- "version": "8.0.0",
+ "version": "9.0.0",
"description": "A documentation site for Magento PWA",
"main": "gulpfile.js",
"dependencies": {
diff --git a/pwa-devdocs/src/_data/getting-started.yml b/pwa-devdocs/src/_data/getting-started.yml
index a03f618a47..dc0397de2b 100644
--- a/pwa-devdocs/src/_data/getting-started.yml
+++ b/pwa-devdocs/src/_data/getting-started.yml
@@ -56,6 +56,9 @@ entries:
- label: Configuration management
url: /pwa-buildpack/configuration-management/
+ - label: Extensibility framework
+ url: /pwa-buildpack/extensibility-framework/
+
- label: Scaffolding
url: /pwa-buildpack/scaffolding/
diff --git a/pwa-devdocs/src/_data/home-sections.yml b/pwa-devdocs/src/_data/home-sections.yml
index ef21fea73c..0157830ed2 100644
--- a/pwa-devdocs/src/_data/home-sections.yml
+++ b/pwa-devdocs/src/_data/home-sections.yml
@@ -4,7 +4,7 @@
- title: Tutorials
content: Step-by-step instructions to help you become familiar with PWA Studio tools and concepts.
- url: /tutorials/pwa-studio-fundamentals/
+ url: /tutorials/
- title: Basic Concepts
content: Things you need to know to work with the Magento PWA Studio tools.
diff --git a/pwa-devdocs/src/_data/tutorials.yml b/pwa-devdocs/src/_data/tutorials.yml
index a628a98f2f..31b9c8a6db 100644
--- a/pwa-devdocs/src/_data/tutorials.yml
+++ b/pwa-devdocs/src/_data/tutorials.yml
@@ -1,63 +1,45 @@
title: Tutorials
+
entries:
- - label: Overview
+ - label: Getting Started
url: /tutorials/
+ entries:
+
+ - label: Setup your project
+ url: /tutorials/pwa-studio-fundamentals/project-setup/
- - label: Magento Cloud deployment
- url: /tutorials/cloud-deploy/
+ - label: Explore the project structure
+ url: /tutorials/pwa-studio-fundamentals/project-structure/
- - label: Hello UPWARD
+ - label: Basic modifications
entries:
- - label: Creating a simple server
- url: /tutorials/hello-upward/simple-server/
- - label: Using the TemplateResolver
- url: /tutorials/hello-upward/using-template-resolver/
+ - label: Enable SASS or LESS support
+ url: /tutorials/enable-sass-less-support/
- - label: Adding React
- url: /tutorials/hello-upward/adding-react/
+ - label: Add a static route
+ url: /tutorials/pwa-studio-fundamentals/add-a-static-route/
- - label: Create a TagList component
- url: /tutorials/create-taglist-component/
+ - label: Modify the site footer
+ url: /tutorials/pwa-studio-fundamentals/modify-site-footer/
- - label: Enable SASS or LESS support
- url: /tutorials/enable-sass-less-support/
+ - label: Create a TagList component
+ url: /tutorials/create-taglist-component/
- - label: Intercept a Target
+ - label: Target interception
url: /tutorials/intercept-a-target/
entries:
+
- label: Modify talon results
url: /tutorials/intercept-a-target/modify-talon-results/
- label: Add a new environment variable
url: /tutorials/intercept-a-target/add-new-environment-variable/
- - label: PWA Studio fundamentals
- url: /tutorials/pwa-studio-fundamentals/
+ - label: Production deployments
+ url: /tutorials/pwa-studio-fundamentals/production-launch-checklist/
entries:
- - label: Project setup
- url: /tutorials/pwa-studio-fundamentals/project-setup/
-
- - label: Project structure
- url: /tutorials/pwa-studio-fundamentals/project-structure/
-
- - label: Add a static route
- url: /tutorials/pwa-studio-fundamentals/add-a-static-route/
-
- - label: Modify the site footer
- url: /tutorials/pwa-studio-fundamentals/modify-site-footer/
-
- - label: Using component props
- url: /tutorials/pwa-studio-fundamentals/using-component-props/
-
- - label: CSS modules
- url: /tutorials/pwa-studio-fundamentals/css-modules/
-
- - label: Manage state
- url: /tutorials/pwa-studio-fundamentals/manage-state/
- - label: Work with GraphQL
- url: /tutorials/pwa-studio-fundamentals/work-with-graphql/
+ - label: Deploy to Magento Cloud
+ url: /tutorials/cloud-deploy/
- - label: Production launch checklist
- url: /tutorials/pwa-studio-fundamentals/production-launch-checklist/
diff --git a/pwa-devdocs/src/_includes/layout/toc.html b/pwa-devdocs/src/_includes/layout/toc.html
index 903133510e..435c6c5694 100644
--- a/pwa-devdocs/src/_includes/layout/toc.html
+++ b/pwa-devdocs/src/_includes/layout/toc.html
@@ -10,7 +10,7 @@ {{toc.title}}
{% if entry.url %}
{{ entry.label }}
{% else %}
- {{ entry.label }}
+ {{ entry.label }}
{% endif %}
{% if entry.entries.size > 0 %}
diff --git a/pwa-devdocs/src/frequently-asked-questions/index.md b/pwa-devdocs/src/frequently-asked-questions/index.md
index acc2b59465..e1f7f3e0f8 100644
--- a/pwa-devdocs/src/frequently-asked-questions/index.md
+++ b/pwa-devdocs/src/frequently-asked-questions/index.md
@@ -26,8 +26,6 @@ The Tutorials section of this site contains a number of tutorials which cover cu
- [How to add a static route][]
- [How to modify the site footer][]
-- [How to use component props][]
-- [How to use CSS modules][]
## Are there any live stores built using PWA Studio
@@ -101,10 +99,6 @@ _**Note:** For testing, resize the viewport manually instead of using the native
[how to modify the site footer]: <{%link tutorials/pwa-studio-fundamentals/modify-site-footer/index.md %}>
-[how to use component props]: <{%link tutorials/pwa-studio-fundamentals/using-component-props/index.md %}>
-
-[how to use css modules]: <{%link tutorials/pwa-studio-fundamentals/css-modules/index.md %}>
-
[magento cloud deployment]: <{% link tutorials/cloud-deploy/index.md %}>
[project repository]: https://github.com/magento/pwa-studio
diff --git a/pwa-devdocs/src/peregrine/routing/index.md b/pwa-devdocs/src/peregrine/routing/index.md
index ba9aab5332..46abb9b834 100644
--- a/pwa-devdocs/src/peregrine/routing/index.md
+++ b/pwa-devdocs/src/peregrine/routing/index.md
@@ -26,8 +26,6 @@ Early versions of the Venia storefront used this approach, but
in the current version, every page request now returns the same HTML with the application shell.
The application decides how the page should render based on the request.
-If you want a better idea of how UPWARD works, follow the [Hello UPWARD tutorial][].
-
### Client-side routing
Client-side routing happens inside the storefront application.
@@ -73,7 +71,6 @@ The [`resolveUnknownRoute()`][] function is a utility function for fetching page
The `getRouteComponent()` function uses the information from this query to get the correct root component from an object that maps page types to root components.
[upward]: {%link venia-pwa-concept/features/modular-components/index.md %}
-[hello upward tutorial]: {%link tutorials/hello-upward/simple-server/index.md %}
[peregrine talon]: {%link peregrine/talons/index.md %}
[app component]: https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/App/app.js
diff --git a/pwa-devdocs/src/pwa-buildpack/configuration-management/index.md b/pwa-devdocs/src/pwa-buildpack/configuration-management/index.md
index 1e6481838d..c6422f39c1 100644
--- a/pwa-devdocs/src/pwa-buildpack/configuration-management/index.md
+++ b/pwa-devdocs/src/pwa-buildpack/configuration-management/index.md
@@ -122,7 +122,7 @@ class MyWebpackPlugin {
**Good**: passing plain objects created by the Configuration object
```js
-const projectConfig = loadEnvironment(__dirname);
+const projectConfig = await loadEnvironment(__dirname);
await PWADevServer.configure({
publicPath: config.output.publicPath,
graphqlPlayground: true,
diff --git a/pwa-devdocs/src/pwa-buildpack/extensibility-framework/images/extensibility-overview.svg b/pwa-devdocs/src/pwa-buildpack/extensibility-framework/images/extensibility-overview.svg
new file mode 100644
index 0000000000..a4fc8e39d3
--- /dev/null
+++ b/pwa-devdocs/src/pwa-buildpack/extensibility-framework/images/extensibility-overview.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pwa-devdocs/src/pwa-buildpack/extensibility-framework/images/interceptor-pattern.svg b/pwa-devdocs/src/pwa-buildpack/extensibility-framework/images/interceptor-pattern.svg
new file mode 100644
index 0000000000..4356a6b4ea
--- /dev/null
+++ b/pwa-devdocs/src/pwa-buildpack/extensibility-framework/images/interceptor-pattern.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/pwa-devdocs/src/pwa-buildpack/extensibility-framework/index.md b/pwa-devdocs/src/pwa-buildpack/extensibility-framework/index.md
new file mode 100644
index 0000000000..35ba489123
--- /dev/null
+++ b/pwa-devdocs/src/pwa-buildpack/extensibility-framework/index.md
@@ -0,0 +1,227 @@
+---
+title: Extensibility framework
+---
+
+PWA Studio's extensibility framework provides the tools you need to customize and extend your storefront without copying over code from the core PWA Studio project.
+The extensibility framework gives developers the ability to:
+
+- Extend the base Venia storefront with minimal core code duplication
+- Create and install extensions for PWA Studio storefronts
+- Create their own extendible modules and storefronts
+
+## How it works
+
+The extensibility framework uses a modular approach for modifying application behavior.
+It applies configurations and customizations defined inside extensions you install in the project.
+
+_Extensions_ for PWA Studio storefronts are normal NPM packages you install as a project dependency.
+These packages contain instructions that affect the build process and static code output for the generated application bundles.
+By modifying the output code during build time, there is no runtime performance cost associated with changing the storefront behavior.
+
+The following diagram illustrates the general build process for a basic storefront with no extensions and a storefront that installs an extension.
+
+![extensibility-overview][]
+
+This is different from a _plugin architecture_ where the application detects and dispatches plugins as the front end loads in the browser.
+The more plugins you install with this architecture, the slower the application gets as it becomes bloated with overhead processes.
+
+### Interceptor pattern
+
+The extensibility framework implements an [interceptor pattern][] to allow changes to the build process.
+The interceptor pattern lets a module **C** intercept the flow of logic between module **A** and module **B** and add its own logic.
+
+![interceptor-pattern-image][]
+
+In PWA Studio, the points where a module may intercept the normal flow of logic and add their own are [Targets][].
+The framework uses the [BuildBus][] to gather instructions from each extension's [Intercept File][intercept files].
+These files determine which Targets the extension intercepts and extends during the build process.
+
+## Targets
+
+_Targets_ are objects that represent areas in code you can access and intercept.
+These extension points are variants of a simple, common JavaScript pattern called the [Tapable hook][tapable] and share some functionality with NodeJS's [`EventEmitter` class][].
+
+Targets let you choose a code process's extension point _by name_ and let you run interceptor code when that process executes.
+Unlike `EventEmmitter` objects, Targets have defined behavior for how and in what order they run their interceptors.
+How those interceptors change the logic is also a defined behavior for Targets.
+
+Targets are part of a package's public API along with the modules it exports.
+They provide another layer of customization on top of using plain code composition techniques with modules.
+
+### TargetProviders
+
+A _TargetProvider_ is an object that manages the connections between modules and their Targets.
+This object is available to your module's [intercept file][intercept files] and is the API you use to access Targets or declare them.
+
+Each extension receives its own TargetProvider in its intercept and declare files.
+Use this object to declare a module's own targets, intercept its own targets, or intercept the targets of other extensions.
+
+### Example
+
+An example of a Target is the [`richContentRenderers` target][] declared by the Venia UI package.
+This Target lets you change the behavior of the `RichContent` component across your project by adding a rendering strategy.
+Tapping into this Target gives access to a `richContentRenders` list object in your intercept function.
+Calling the `add()` function on this object lets you add a custom rendering strategy for your storefront.
+
+The [Page Builder extension][] provides an example of how to intercept this Target.
+It taps the Target and provides an intercept function that adds a custom renderer for any detected Page Builder content.
+
+```js
+targets
+ .of('@magento/venia-ui')
+ .richContentRenderers.tap(richContentRenderers => {
+ richContentRenderers.add({
+ componentName: 'PageBuilder',
+ importPath: '@magento/pagebuilder'
+ });
+ });
+```
+
+## Declare files
+
+A _declare file_ lists the Targets available for interception in an extension or package.
+During build time, the framework looks for this file using the value set for `pwa-studio.targets.declare` in your project's `package.json` file.
+The framework registers the Targets in all the declare files it finds in the project and dependencies before it runs any [intercept files][].
+This guarantees Target availability to any dependent interceptor.
+
+Declare files must export a function that accepts a TargetProvider object as a parameter.
+It provides a `declare()` function to register your project's Targets by providing it a dictionary object,
+which maps a unique name to its Target.
+
+When you register your Target, the dictionary key is the named property a developer uses to access that Target.
+In the Page Builder example, the dictionary key for the rich content renderers Target that Venia UI declares is `richContentRenderers`.
+
+The value associated with the key is a variant of a Tapable hook created using one of the class constructors available under the TargetProvider object's `types` property.
+Each class constructor accepts an optional array of strings that represent the list of arguments passed to the [intercept function][].
+
+The TargetProvider object exposes the same classes as the [Tapable][] package except their names do not end with 'Hook'.
+This is intentional to avoid confusion with the concept of React Hooks.
+For example, the `SyncWaterfallHook` class from Tapable is `SyncWaterfall` under the TargetProvider object's `types` property.
+
+See the [Hook types][] section of the Tapable documentation to learn about the available hook types.
+
+### Example declare file content
+
+```js
+module.exports = targets => {
+ targets.declare({
+ perfReport: new targets.types.AsyncParallel(['report'])
+ socialIcons: new targets.types.SyncWaterfall(['iconlist'])
+ });
+}
+```
+
+The example provided declares two Targets that this project or other modules can intercept, a `perfReport` Target and a `socialIcons` Target.
+Intercept files can access these Targets using `targets.of().perfReport` and `targets.of().socialIcons` respectively.
+
+The `perfReport` key maps to a Target type that runs its interceptors asynchronously and in parallel.
+This is appropriate for logging and monitoring interceptors that do not affect functionality.
+
+The `socialIcons` key maps to a Target type that runs its interceptors synchronously and in subscription order, which passes its return values as arguments to the next interceptor.
+This is appropriate for customizations that must happen in a predictable order.
+
+Both targets passes in a single parameter to their intercept functions, a `report` argument and an `iconlist` argument.
+
+## Intercept files
+
+The _intercept file_ describes the targets you want to intercept and define or extend.
+During build time, the framework looks for this file using the value for `pwa-studio.targets.intercept` in your project's `package.json` file.
+These files execute after all the declare files register their Targets.
+
+Your intercept files must export a function that accepts a TargetProvider object as a parameter.
+This object gives you access to all available Targets in your project that let you make customizations, gather data, change the build itself, or develop and call your own declared targets.
+The TargetProvider object provides an `of()` function and an `own` property to access Targets in other packages or Targets within its own module respectively.
+
+For more information on how intercept files work, see the tutorial on how to [Intercept a Target][].
+
+### Example intercept file content
+
+```js
+module.exports = targets => {
+
+ const builtins = targets.of("@magento/pwa-buildpack");
+ builtins.specialFeatures.tap((featuresByModule) => {
+ featuresByModule["my-extension"] = {
+ esModules: true,
+ };
+ });
+};
+}
+```
+
+The example provided defines an intercept file that intercepts the `specialFeatures` target in the `@magento/pwa-buildpack` package.
+It adds a webpack configuration for the `my-extension` package that lets the build process know that the package uses ES modules.
+
+### Intercept functions
+
+When you call the `tap()` function on a Target, you supply it with an _intercept function_.
+An intercept function is a callback function that provides the interception logic for a specific Target.
+Calling the `tap()` function registers your intercept function with that Target.
+When the framework builds your project, it generates code that calls your intercept function when the project runs the Target code.
+
+The function signature for an intercept function depends on the tapped Target.
+In the Page Builder example, the intercept function signature when you tap the `richContentRenderers` target is a function that receives a list object, which lets you add custom rendering strategies.
+Other Targets may require you to return a modified value, use an object with a specific API, or provide a configuration.
+
+Read the reference API on this site or in doc blocks in the source code to learn about the intercept function signatures for each Target.
+
+## Writing intercept and declare files
+
+When writing intercept and declare files, keep in mind the following requirements:
+
+- Both files must export a function that accepts a TargetProvider object as a parameter.
+- Both files are CommonJS modules that run in Node.
+- You can create these files anywhere in your project, but you must specify their paths in your `package.json` file.
+
+As shown in the previous examples, a common practice when authoring these files involve assigning the TargetProvider object to a `targets` variable.
+
+## Targets in PWA Studio packages
+
+When you create a new storefront project using the scaffolding tool, you have access to all the same PWA Studio Targets as the Venia storefront.
+The following is a list of PWA Studio packages that contain Targets.
+
+[Buildpack][]
+: Targets in the Buildpack are low level and generic.
+They are often used as building blocks for more complicated feature Targets.
+You can also find Targets that let you add environment variables or change UPWARD behavior in this package.
+
+[Peregrine][]
+: Targets in the Peregrine package focus mainly on the set of talons it provides.
+The `talons` Target lets you [wrap a Talon][] with your own module.
+
+[Venia UI][]
+: Targets in the Venia UI provide access to the list of items used in the UI components.
+These Targets let you add new routes, rendering strategies, and payment methods.
+
+## Extension examples
+
+The PWA Studio scaffolding tool also installs extensions on all new storefront projects.
+These extensions use the framework to add useful features on top of the base application.
+They are also examples of what a PWA Studio storefront extension looks like.
+
+[@magento/upward-security-headers][]
+: This extension adds security headers to UPWARD by tapping into the `transformUpward` Target in Buildpack.
+
+[@magento/venia-sample-language-packs][]
+: This extension provides sample translations for PWA Studio's internationalization feature.
+
+[`richcontentrenderers` target]: <{% link venia-ui/reference/targets/index.md %}#richContentRenderers>
+[intercept a target]: <{% link tutorials/intercept-a-target/index.md %}>
+[buildpack]: <{% link pwa-buildpack/reference/targets/index.md %}>
+[peregrine]: <{% link peregrine/reference/targets/index.md %}>
+[wrap a talon]: <{% link tutorials/intercept-a-target/modify-talon-results/index.md %}>
+[venia ui]: <{% link venia-ui/reference/targets/index.md %}>
+
+[interceptor pattern]: https://en.wikipedia.org/wiki/Interceptor_pattern
+[interceptor-pattern-image]: ./images/interceptor-pattern.svg
+[extensibility-overview]: ./images/extensibility-overview.svg
+[buildbus]: https://github.com/magento/pwa-studio/blob/develop/packages/pwa-buildpack/lib/BuildBus/BuildBus.js
+[targets]: #targets
+[intercept files]: #intercept-files
+[intercept function]: #intercept-functions
+[tapable]: https://github.com/webpack/tapable
+[hook types]: https://github.com/webpack/tapable#hook-types
+[`eventemitter` class]: https://nodejs.org/api/events.html#events_class_eventemitter
+[page builder extension]: https://github.com/magento/pwa-studio/blob/develop/packages/pagebuilder/lib/intercept.js
+[@magento/upward-security-headers]: https://github.com/magento/pwa-studio/tree/develop/packages/extensions/upward-security-headers
+[@magento/venia-sample-language-packs]: https://github.com/magento/pwa-studio/tree/develop/packages/extensions/venia-sample-language-packs
diff --git a/pwa-devdocs/src/pwa-buildpack/reference/buildpack-cli/load-env/index.md b/pwa-devdocs/src/pwa-buildpack/reference/buildpack-cli/load-env/index.md
index 6e0ad5b889..f310e3779c 100644
--- a/pwa-devdocs/src/pwa-buildpack/reference/buildpack-cli/load-env/index.md
+++ b/pwa-devdocs/src/pwa-buildpack/reference/buildpack-cli/load-env/index.md
@@ -37,7 +37,7 @@ Loads a given directory's `.env` file and provides a [configuration object][].
```js
const { loadEnvironment } = require('@magento/pwa-buildpack');
-const configuration = loadEnvironment(process.cwd());
+const configuration = await loadEnvironment(process.cwd());
```
#### Parameters
@@ -91,7 +91,7 @@ import { loadEnvironment } from '@magento/pwa-buildpack';
// Give `loadEnvironment` the path to the project root.
// If the current file is in project root, use the Node builtin `__dirname`.
-const configuration = loadEnvironment('/Users/me/path/to/project');
+const configuration = await loadEnvironment('/Users/me/path/to/project');
// `loadEnvironment` has now read the contents of
// `/Users/me/path/to/project/.env` and merged it with any environment
diff --git a/pwa-devdocs/src/pwa-buildpack/troubleshooting/index.md b/pwa-devdocs/src/pwa-buildpack/troubleshooting/index.md
index 9f5ba25c7b..39d625e16e 100644
--- a/pwa-devdocs/src/pwa-buildpack/troubleshooting/index.md
+++ b/pwa-devdocs/src/pwa-buildpack/troubleshooting/index.md
@@ -22,6 +22,7 @@ Paste the result console output into the issue. Thank you!
* [Webpack hangs for a long time before beginning compilation](#webpack-hangs)
* [Browser cannot resolve the `.local.pwadev` site](#cannot-resolve-site)
* [Browser does not trust the generated SSL certificate](#untrusted-ssl-cert)
+* [Watcher runs out of memory](#watcher-out-of-memory)
## Resolutions
@@ -95,6 +96,11 @@ Some users have suggested deleting the `devcert` folder to trigger certificate r
${User}\AppData\Local\devcert
```
+**Watcher runs out of memory**{:#watcher-out-of-memory}
+
+If you leave the `yarn watch` process running for an extended amount of time, it runs out of memory and shows an error.
+The solution is to restart the watch process and make sure it does not run for an extended amount of time.
+
[create an issue]: https://github.com/magento/pwa-buildpack/issues
[Slack channel]: https://magentocommeng.slack.com/messages/C71HNKYS2/team/UAFV915FB/
[host file]: https://en.wikipedia.org/wiki/Hosts_(file)
diff --git a/pwa-devdocs/src/technologies/overview/index.md b/pwa-devdocs/src/technologies/overview/index.md
index 1876869653..fe41d3f8ab 100644
--- a/pwa-devdocs/src/technologies/overview/index.md
+++ b/pwa-devdocs/src/technologies/overview/index.md
@@ -18,6 +18,13 @@ The following features define a basic PWA website:
- **Mobile "Install"** - Mobile users can add PWA sites to their home screens and even receive Push notifications from the site.
- **Shareable content** - Each page in a PWA site has a unique URL that can be shared with other apps or social media.
+This strategy is known as the [RAIL](https://web.dev/rail/) model:
+
+- **Response** – An application is receptive to the user's request.
+- **Animation** – It shows a movement to keep the user pausing.
+- **Idle** – A PWA utilizes the "idle" second to cache content.
+- **Load** – It loads under a moment.
+
## What is the Magento PWA Studio project
![pwa studio overview][]
diff --git a/pwa-devdocs/src/tutorials/cloud-deploy/index.md b/pwa-devdocs/src/tutorials/cloud-deploy/index.md
index eebf29f48f..76817b5704 100644
--- a/pwa-devdocs/src/tutorials/cloud-deploy/index.md
+++ b/pwa-devdocs/src/tutorials/cloud-deploy/index.md
@@ -2,238 +2,227 @@
title: Magento Cloud deployment
---
-## Prerequisites
-
-- An existing Magento Cloud project
-- Composer
-- Yarn or NPM
-- A [Magento PWA Studio][] storefront managed by NPM or Yarn.
- You are not required to publish to npmjs.com, but
- NPM or Yarn should be able to access your project code through Git.
+[Magento Commerce Cloud][] is a managed, automated hosting platform for the Magento Commerce software.
+You can use this platform to host your storefront code by installing packages developed specifically to connect your storefront with Magento on the same server.
-For this tutorial, the [`@magento/venia-concept`][] package for the [Venia storefront][] is used as a template, but any PWA available though NPM with an UPWARD compatible YAML file is supported.
+This tutorial provides the general steps for adding your storefront onto your Magento Commerce Cloud project and setting it as the front end application.
+By the end of this tutorial, you will have a Cloud project setup that includes your storefront project's code bundles.
+You can use this setup to update and deploy your storefront project in Magento Commerce Cloud.
-These instructions provide a method for building your application bundle in the Magento Cloud, but
-you can get the same results by building locally with the same environment variables as your targeted production environment, and then checking your local build artifacts into source control.
-
-{: .bs-callout .bs-callout-warning}
-Magento Cloud does not support node processes, so you cannot use UPWARD-JS to serve your storefront project.
-You must use the [magento2-upward-connector][] module with [UPWARD-PHP][] to deploy your storefront in Magento Cloud.
+## Prerequisites
-## Add Composer dependencies
+Before you follow this tutorial, you should be familiar with Cloud's [Starter workflow][] or [Pro workflow][] depending on your plan.
+Make sure you complete the [Cloud onboarding tasks][] to avoid account or access issues.
-Use the `composer` CLI command to include the UPWARD module in the Magento installation:
+Verify that your Magento instance is [compatible][] with the PWA Studio version you use in your storefront project.
-```sh
-composer require magento/module-upward-connector
-```
+This tutorial requires the following tools:
-This command modifies the `composer.json` file and adds the package entry to the `require` section of the `composer.json` file.
+- [Magento Cloud CLI][]
+- Git
+- [Composer][]
+- Yarn or NPM (depends on your storefront project configuration)
-```json
-"magento/module-upward-connector": "^1.0.1"
-```
+If you need to do more advanced Cloud tasks, see the [Cloud technologies and requirements][] for the full list of tools you need to fully manage the rest of your Cloud project.
-## Add Venia sample data (optional)
+You also need an existing storefront project to do this tutorial.
+Follow the instructions on the [Project setup][] page to set up your storefront project using the scaffolding tool.
-The Venia storefront works best with the Venia sample data installed. There is an [automated script](https://pwastudio.io/venia-pwa-concept/install-sample-data/) in the `@magento/venia-concept` package, or you can follow the manual steps here.
+## Tasks overview
-If you are deploying your own custom storefront, you may skip this step and continue to the next section.
+1. Clone your Cloud project
+1. Add required Magento extensions
+1. Set environment variables
+1. Build your storefront application
+1. Add your storefront project code
+1. Deploy changes
-### Add sample data repository information
+## Clone your Cloud project
-Use the `composer` CLI to add the sample data repositories to the `composer.json` file:
+Use the Magento Cloud CLI tool to login and clone your Cloud project.
-```sh
-composer config repositories.catalog-venia vcs https://github.com/PMET-public/module-catalog-sample-data-venia
-```
+Run the following command:
```sh
-composer config repositories.configurable-venia vcs https://github.com/PMET-public/module-configurable-sample-data-venia
+magento-cloud
```
-```sh
-composer config repositories.customer-venia vcs https://github.com/PMET-public/module-customer-sample-data-venia
-```
+If this is your first time running this command, the tool takes you through the login process.
+After you login or when you run this command again, it presents a table of all the projects you have permission to access.
```sh
-composer config repositories.tax-venia vcs https://github.com/PMET-public/module-tax-sample-data-venia
+Your projects are:
++---------------+------------------+---------------------------------------------------+
+| ID | Title | URL |
++---------------+------------------+---------------------------------------------------+
+| yswqmrbknvqjz | My Magento Store | https://us-4.magento.cloud/projects/yswqmrbknvqjz |
++---------------+------------------+---------------------------------------------------+
```
-```sh
-composer config repositories.sales-venia vcs https://github.com/PMET-public/module-sales-sample-data-venia
-```
+Find the Cloud project you want to add your storefront to and use the Magento Cloud CLI to clone the project by specifying its ID.
```sh
-composer config repositories.media-venia vcs https://github.com/PMET-public/sample-data-media-venia
-```
-
-These commands add the following entries to the `composer.json` file:
-
-```json
-"catalog-venia": {
- "type": "vcs",
- "url": "https://github.com/PMET-public/module-catalog-sample-data-venia"
-
-},
- "configurable-venia": {
- "type": "vcs",
- "url": "https://github.com/PMET-public/module-configurable-sample-data-venia"
-
- },
- "customer-venia": {
- "type": "vcs",
- "url": "https://github.com/PMET-public/module-customer-sample-data-venia"
-
- },
- "tax-venia": {
- "type": "vcs",
- "url": "https://github.com/PMET-public/module-tax-sample-data-venia"
-
- },
- "sales-venia": {
- "type": "vcs",
- "url": "https://github.com/PMET-public/module-sales-sample-data-venia"
-
- },
- "media-venia": {
- "type": "vcs",
- "url": "https://github.com/PMET-public/sample-data-media-venia"
-
- },
+magento-cloud get yswqmrbknvqjz
```
-### Require the sample data modules
+This command creates a project directory and initializes the Git repository associated with your Cloud project.
+Depending on your access permissions for the default environment, this directory may appear empty.
-Run the following `composer` CLI commands to install the sample data modules into Magento:
+Navigate to the project directory and use the Magento Cloud CLI to list the environments for this project.
```sh
-composer require magento/sample-data-media-venia:dev-master
+magento-cloud environment:list
```
-```sh
-composer require magento/module-catalog-sample-data-venia:dev-master
-```
+This command displays a table of environments which lists their ID, Title, and Status.
```sh
-composer require magento/module-configurable-sample-data-venia:dev-master
+Your environments are:
++----------------------+----------------------+-------------+
+| ID | Title | Status |
++----------------------+----------------------+-------------+
+| production* | Production | Active |
+| staging | Staging | Active |
+| myStorefront-develop | myStorefront-develop | In progress |
+| myStorefront-cicd | myStorefront-cicd | Active |
++----------------------+----------------------+-------------+
+* - Indicates the current environment
```
-```sh
-composer require magento/module-customer-sample-data-venia:dev-master
-```
+Use the Magento Cloud CLI to checkout the environment where you want to add your storefront code, such as the `staging` environment.
```sh
-composer require magento/module-tax-sample-data-venia:dev-master
+magento-cloud checkout staging
```
-```sh
-composer require magento/module-sales-sample-data-venia:dev-master
-```
+## Add required Magento extensions
+Magento Cloud does not support node processes, so you cannot use UPWARD-JS to serve your storefront project.
+You must use the [magento2-upward-connector][] module with [UPWARD-PHP][] to deploy your storefront in Magento Cloud.
-These commands modify the `composer.json` file and adds the sample data modules to the `require` section:
+Use the `composer` CLI command to add the magento2-upward-connector module to the Magento installation:
-```json
-"magento/module-catalog-sample-data-venia": "dev-master",
-"magento/module-configurable-sample-data-venia": "dev-master",
-"magento/module-customer-sample-data-venia": "dev-master",
-"magento/module-tax-sample-data-venia": "dev-master",
-"magento/module-sales-sample-data-venia": "dev-master",
-"magento/sample-data-media-venia": "dev-master",
+```sh
+composer require magento/module-upward-connector
```
-## Install dependencies
+This command modifies the `composer.json` file and adds the package entry to the `require` section of the `composer.json` file.
-### Composer dependencies
+```text
+"magento/module-upward-connector": "^1.1.2"
+```
-_Optional_: If you manually modified the `composer.json` file to make the changes described in the previous steps, update your `composer.lock` with these new dependencies:
+{: .bs-callout .bs-callout-info}
+UPWARD-PHP is a dependency of the magento2-upward-connector, so
+you do not need to add it manually to your project.
-```sh
-composer update
-```
+## Set environment variables
-## Specify Cloud server environment
+PWA Studio storefronts require you to set the following [environment variables][] in your project for the build and runtime processes:
-{: .bs-callout .bs-callout-info}
-If you build your project locally and check the build artifacts into your Magento Cloud project, skip the **Install NPX and Yarn** and **Update build hooks** sections.
+| Name | Buildtime | Runtime | Description |
+| ------------------------------------ | --------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------- |
+| `CONFIG__DEFAULT__WEB__UPWARD__PATH` | | check_box | Absolute path to UPWARD YAML configuration |
+| `NODE_ENV` | check_box | check_box | Specifies the node environment type |
+| `MAGENTO_BACKEND_URL` | check_box | check_box | URL of your Magento backend |
+| `CHECKOUT_BRAINTREE_TOKEN` | check_box | | Braintree token associated with your Magento backend |
+| `MAGENTO_BACKEND_EDITION` | check_box | | Must be `EE` since Cloud only supports Magento Enterprise Edition |
+| `IMAGE_OPTIMIZING_ORIGIN` | check_box | | Origin to use for images in the UI |
-### Install NPX and Yarn
+### Set runtime variables
-If your project supports Yarn, which is the case for `venia-concept`, add the following entry to the `.magento.app.yaml` file.
+To set your Cloud project's runtime variables, edit the [`.magento.app.yaml`][] file and add entries to the `variables.env` section.
-```yaml
-dependencies:
- nodejs:
- yarn: "*"
+```text
+variables:
+ env:
+ CONFIG__DEFAULT__WEB__UPWARD__PATH: "/app/pmu35riuj7btw_stg/pwa/upward.yml"
+ NODE_ENV: "production"
+ MAGENTO_BACKEND_URL: "https://[your-cloud-url-here]/"
```
-### Update build hooks
+### Set buildtime variables
-The `venia-concept` storefront uses a newer version of Node than the default environment provides.
-It also uses Yarn to install its dependencies.
+To set your environment variables for buildtime, navigate or open a new terminal to _your storefront project_ and edit the `.env` file.
+Your `.env` file should have entries that look like the following:
-The following update to the `hooks.build` section of `.magento.app.yaml` installs NVM and the latest LTS release of Node.
+```text
+NODE_ENV=production
+MAGENTO_BACKEND_URL=https://[your-cloud-url-here]/
+CHECKOUT_BRAINTREE_TOKEN=
+MAGENTO_BACKEND_EDITION=EE
+IMAGE_OPTIMIZING_ORIGIN=backend
+```
+
+### Finding the correct UPWARD path value
-It also uses NPX to run the `buildpack` CLI tool with the `create-project` sub-command to scaffold the application using the `venia-concept` template.
-After scaffolding completes, it installs and builds the application and moves the build artifact to a persistent area on the file system.
+The `CONFIG_DEFAULT_WEB_UPWARD_PATH` variable specifies the _absolute_ path to the UPWARD configuration file in the deployed Cloud instance.
+If this value is incorrect or not set, the Magento 2 UPWARD connector extension cannot serve your storefront application and your frontend appears broken.
-```yaml
-hooks:
- # We run build hooks before your application has been packaged.
- build: |
- set -e
+In the previous example, `/app/pmu35riuj7btw_stg/` is the Magento application root directory on the deployed instance.
+This value is different for each environment in your Cloud project, so you must configure each of your project environments with the path specific to each instance.
+To find the correct root directory path for an environment, [SSH][] into the remote server and use the `pwd` command to find the Magento application root directory.
- unset NPM_CONFIG_PREFIX
- curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.1/install.sh | bash
- export NVM_DIR="$HOME/.nvm"
- [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
- nvm install --lts=dubnium
+## Build your storefront application
- npx @magento/pwa-buildpack create-project /tmp/pwa --template venia-concept --backend-url https://[your-cloud-url-here] --name Venia --author Magento --install false --npm-client yarn
- cd /tmp/pwa
- # Override this environment variable at runtime given all scaffolded dependencies are devDependencies
- NODE_ENV=development yarn install --ignore-optional
- yarn build
- cp -p -r dist/ "$HOME/pwa"
- cd $HOME
+In _your storefront project_ directory, use `yarn` or `npm` to install project dependencies and run the project's build command.
- php ./vendor/bin/ece-tools build:generate
- php ./vendor/bin/ece-tools build:transfer
+```sh
+yarn install &&
+yarn build
```
-### Add required environment variables
+These commands install project dependencies and runs the build process, which creates a `dist` folder that contains code bundles for your storefront application.
+It also copies over the static assets your application needs from your project into this folder.
-Use the Magento Cloud GUI or modify the `variables.env` entry in `.magento.app.yaml` to add any required environment variables.
+## Add your storefront project code
-The following table lists the required environment variables for the Venia storefront:
+*In your Cloud project*, create a `pwa` folder and copy into it the content inside your storefront project's `dist` folder.
-| Name | Value |
-| ------------------------------------ | ------------------------------------------------------------------------------------------------------- |
-| `CONFIG__DEFAULT__WEB__UPWARD__PATH` | `/app/pwa/upward.yml` (absolute path to UPWARD YAML configuration) |
-| `NODE_ENV` | `production` |
-| `MAGENTO_BACKEND_URL` | `https://[your-cloud-url-here]` |
-| `CHECKOUT_BRAINTREE_TOKEN` | `` |
-| `MAGENTO_BACKEND_EDITION` | `EE` (enable Magento Commerce features) |
-| `IMAGE_OPTIMIZING_ORIGIN` | `backend` (use Fastly for image optimization) |
+```sh
+mkdir pwa && cp -r /dist/* pwa
+```
+
+If you are updating your existing storefront code, you must delete the content inside the `pwa` directory before you copy the new `dist` content to avoid keeping the old bundles the application no longer uses.
-## Commit modified files
+## Deploy changes
-Commit all changes to the following files:
+At this point in the tutorial, your Cloud project should have changes in the following files and directories:
- `.magento.app.yaml`
- `composer.json`
- `composer.lock`
+- `pwa`
+
+Edit your Cloud project's `.gitignore` file and add the following entries to track the `pwa` directory in git:
-## Push changes
+```text
+!/pwa
+!/pwa/**
+```
+
+Use the Git CLI tool to stage, commit, and push these changes to your Cloud project.
-Push your local changes for your deployment and wait for it to complete.
+```sh
+git add . &&
+git commit -m "Added storefront file bundles" &&
+git push origin
+```
-## Congratulations
+After you push changes to your Cloud project, the remote build process runs and deploys a live instance of your site to the Magento Commerce Cloud service.
-You have installed a PWA storefront on the Cloud!
+### Merging environments
-You should be able to navigate to the frontend URL of your Cloud instance and see your PWA storefront.
+The Cloud topic on how to [Deploy your store][] provides more details on the deployment process.
+It also includes instructions for merging environment branches, such as integration to staging or staging to production.
+
+If your workflow involves merging environment branches,
+you must rebuild your application bundle with the correct environment variables before you push your changes to the Magento Cloud service because
+variables, such as `CONFIG__DEFAULT__WEB__UPWARD__PATH` and `MAGENTO_BACKEND_URL`, can vary between these environments.
+
+[compatible]: <{%link technologies/magento-compatibility/index.md %}>
+[environment variables]: <{%link pwa-buildpack/reference/environment-variables/core-definitions/index.md %}>
+[project setup]: <{%link tutorials/pwa-studio-fundamentals/project-setup/index.md %}>
[magento pwa studio]: http://pwastudio.io
[`@magento/venia-concept`]: https://www.npmjs.com/package/@magento/venia-concept
@@ -242,3 +231,15 @@ You should be able to navigate to the frontend URL of your Cloud instance and se
[magento2-upward-connector]: https://github.com/magento/magento2-upward-connector
[upward-php]: https://github.com/magento/upward-php
+
+[magento commerce cloud]: https://devdocs.magento.com/cloud/bk-cloud.html
+[features and workflows]: https://devdocs.magento.com/cloud/architecture/cloud-architecture.html
+[starter workflow]: https://devdocs.magento.com/cloud/architecture/starter-develop-deploy-workflow.html
+[pro workflow]: https://devdocs.magento.com/cloud/architecture/pro-develop-deploy-workflow.html
+[cloud onboarding tasks]: https://devdocs.magento.com/cloud/onboarding/onboarding-tasks.html
+[magento cloud cli]: https://devdocs.magento.com/cloud/reference/cli-ref-topic.html
+[`.magento.app.yaml`]: https://devdocs.magento.com/cloud/project/magento-env-yaml.html
+[deploy your store]: https://devdocs.magento.com/cloud/live/stage-prod-live.html
+[ssh]: https://devdocs.magento.com/cloud/env/environments-ssh.html
+[composer]: https://getcomposer.org/
+[cloud technologies and requirements]: https://devdocs.magento.com/cloud/requirements/cloud-requirements.html
diff --git a/pwa-devdocs/src/tutorials/index.md b/pwa-devdocs/src/tutorials/index.md
index bde89e5c52..578d196584 100644
--- a/pwa-devdocs/src/tutorials/index.md
+++ b/pwa-devdocs/src/tutorials/index.md
@@ -1,26 +1,32 @@
---
-title: Tutorials
+title: Getting started
---
-This section contains links to tutorials that will help you become familiar with the different tools provided by PWA Studio.
+PWA Studio is a library of tools and packages designed to help you create a Magento PWA storefront.
+In this section you will learn how to set up your storefront project using the scaffolding tool and learn about the different files and folders in your project.
-## Recommended tutorials
+## Prerequisites
-### UPWARD
+- A basic understanding of working with [React][]
+- Node >= 10.14.1
+- Yarn (recommended) or NPM
-This three part tutorial provides an introduction to the concepts introduced in the UPWARD spec.
-By the end of this tutorial, you should have a simple React application running on top of an UPWARD server.
+### Node 12 deprecation warning
-1. [Creating a simple UPWARD server][] - Teaches the very basics of reading and writing an UPWARD specification file for your projects
-2. [Using the TemplateResolver][] - Introduces the concept of using templates and the TemplateResolver to keep your UPWARD specification file lean
-3. [Adding React][] - Add React and Webpack into your UPWARD project
+If you are using Node 12, you may see the following deprecation warning in the log when you run `yarn watch:venia`.
-### Magento Cloud deployment
+```sh
+(node:89176) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
+```
-[Magento Cloud deployment][] - Provides steps for deploying a PWA Studio storefront into the Magento Cloud.
-This tutorial uses the Venia example storefront to illustrate the general process.
+This is caused by a project dependency used by PWA Studio and not by PWA Studio itself.
-[creating a simple upward server]: <{%link tutorials/hello-upward/simple-server/index.md%}>
-[using the templateresolver]: <{%link tutorials/hello-upward/using-template-resolver/index.md%}>
-[adding react]: <{%link tutorials/hello-upward/adding-react/index.md%}>
-[magento cloud deployment]: <{%link tutorials/cloud-deploy/index.md %}>
+## First steps
+
+- [Setup your project][]
+- [Explore the project structure][]
+
+[setup your project]: <{%link tutorials/pwa-studio-fundamentals/project-setup/index.md %}>
+[explore the project structure]: <{%link tutorials/pwa-studio-fundamentals/project-structure/index.md %}>
+
+[react]: https://reactjs.org/
\ No newline at end of file
diff --git a/pwa-devdocs/src/tutorials/intercept-a-target/index.md b/pwa-devdocs/src/tutorials/intercept-a-target/index.md
index c0b2613932..ac8b6801cb 100644
--- a/pwa-devdocs/src/tutorials/intercept-a-target/index.md
+++ b/pwa-devdocs/src/tutorials/intercept-a-target/index.md
@@ -1,5 +1,5 @@
---
-title: Intercept a Target
+title: Target interception
---
Target interception is a feature provided by PWA Studio's extensibility framework.
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/index.md b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/index.md
index 58feb5c73a..7f9ae22109 100644
--- a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/index.md
+++ b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/index.md
@@ -33,10 +33,6 @@ This is caused by a project dependency used by PWA Studio and not by PWA Studio
- [Project Structure][] - Learn about the project structure of your new project
- [Add a static route][] - Add a static route to your PWA Studio app
- [Modify the site footer][] - Learn how to modify existing components by modifying the site footer
-- [Using component props][] - Learn how to use props in your custom components
-- [CSS modules][] - Learn how to use CSS modules in you custom components
-- [Manage state][] - Learn how to manage internal and global state in your components
-- [Work with GraphQL][] - Learn how to work with GraphQL from Magento
- [Production launch checklist][] - Make sure your storefront is production ready with this checklist
## Related content
@@ -51,10 +47,6 @@ This is caused by a project dependency used by PWA Studio and not by PWA Studio
[project structure]: {%link tutorials/pwa-studio-fundamentals/project-structure/index.md %}
[add a static route]: {%link tutorials/pwa-studio-fundamentals/add-a-static-route/index.md %}
[modify the site footer]: {%link tutorials/pwa-studio-fundamentals/modify-site-footer/index.md %}
-[using component props]: {%link tutorials/pwa-studio-fundamentals/using-component-props/index.md %}
-[css modules]: {%link tutorials/pwa-studio-fundamentals/css-modules/index.md %}
-[manage state]: {%link tutorials/pwa-studio-fundamentals/manage-state/index.md %}
-[work with graphql]: {%link tutorials/pwa-studio-fundamentals/work-with-graphql/index.md %}
[production launch checklist]: {%link tutorials/pwa-studio-fundamentals/production-launch-checklist/index.md %}
[react]: https://reactjs.org/
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/production-launch-checklist/index.md b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/production-launch-checklist/index.md
index 6105432ed7..91540b29e9 100644
--- a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/production-launch-checklist/index.md
+++ b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/production-launch-checklist/index.md
@@ -46,6 +46,10 @@ yarn start
This command starts a production UPWARD-JS server that runs your production build.
+## Remove development packages
+
+Edit your project's `package.json` file and remove any packages you only use in your development environment. For example, the `venia-sample-backends` is an extension included in projects built using the scaffolding tool.
+
## Audit with Lighthouse
[Lighthouse][] is a web developer tool that audits your website.
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-setup/index.md b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-setup/index.md
index 265b9f3490..77685c18af 100644
--- a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-setup/index.md
+++ b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-setup/index.md
@@ -137,6 +137,10 @@ Apply these fixes to address common issues you may encounter during project setu
If you encounter any other issues, ask the Magento community in the [#PWA][] Slack channel.
+## Next
+
+[Explore the project structure][]
+
[scaffolding]: {%link pwa-buildpack/scaffolding/index.md %}
[peregrine]: {%link peregrine/index.md %}
[venia concept storefront]: {%link venia-pwa-concept/index.md %}
@@ -149,6 +153,7 @@ If you encounter any other issues, ask the Magento community in the [#PWA][] Sla
[compiled successfully screen-shot]: {%link tutorials/pwa-studio-fundamentals/project-setup/images/compiled-successfully.png %}
[clear storage]: {%link tutorials/pwa-studio-fundamentals/project-setup/images/clear-storage.png %}
[privacy error]: {%link tutorials/pwa-studio-fundamentals/project-setup/images/privacy-error.png %}
+[explore the project structure]: <{%link tutorials/pwa-studio-fundamentals/project-structure/index.md %}>
[venia.magento.com]: http://venia.magento.com/
[n]: https://github.com/tj/n
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-structure/index.md b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-structure/index.md
index 67b3201cc2..a7b98cc274 100644
--- a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-structure/index.md
+++ b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/project-structure/index.md
@@ -99,7 +99,7 @@ It uses [`configureWebpack`][] from PWA Studio's buildpack to create a configura
#### `upward.yml`
The `upward.yml` file is an [UPWARD][] configuration file.
-It provides provides instructions for how an UPWARD server implementation should respond to a request.
+It provides instructions for how an UPWARD server implementation should respond to a request.
The `status`, `headers`, and `body` values defined in the default `upward.yml` file uses values from the `veniaResponse` object.
This object is defined in the [venia-ui package's `upward.yml` file][].
@@ -129,6 +129,20 @@ Use the following values for `NODE_ENV`:
For more information on loading environment variables, see: [Load environment file][]
+## Next steps
+
+Now that you have a storefront project setup and understand its structure, lets learn about some basic customizations you can make to your project:
+
+- [Enable SASS or LESS support][]
+- [Add a static route][]
+- [Modify the site footer][]
+- [Create a TagList component][]
+
+
+[enable sass or less support]: <{%link tutorials/enable-sass-less-support/index.md %}>
+[add a static route]: <{%link tutorials/pwa-studio-fundamentals/add-a-static-route/index.md %}>
+[modify the site footer]: <{%link tutorials/pwa-studio-fundamentals/modify-site-footer/index.md %}>
+[create a taglist component]: <{%link tutorials/create-taglist-component/index.md %}>
[modular components]: <{%link venia-pwa-concept/features/modular-components/index.md %}>
[project setup]: <{%link tutorials/pwa-studio-fundamentals/index.md %}>
[`configurewebpack`]: <{%link pwa-buildpack/reference/configure-webpack/index.md %}>
diff --git a/scripts/monorepo-introduction.js b/scripts/monorepo-introduction.js
index 830b7c9053..7138a6fbf4 100644
--- a/scripts/monorepo-introduction.js
+++ b/scripts/monorepo-introduction.js
@@ -82,9 +82,10 @@ async function prepare() {
return () => {};
}
});
- const customOrigin = loadEnvironment(veniaPath, nullLogger).section(
- 'customOrigin'
- );
+ const customOrigin = await loadEnvironment(
+ veniaPath,
+ nullLogger
+ ).section('customOrigin');
if (customOrigin.enabled) {
const customOriginConfig = await configureHost(
Object.assign(customOrigin, {
diff --git a/yarn.lock b/yarn.lock
index b79daa1515..6e58fb9455 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,13 @@
# yarn lockfile v1
+"@adobe/adobe-client-data-layer@~1.1.3":
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/@adobe/adobe-client-data-layer/-/adobe-client-data-layer-1.1.3.tgz#1b3746407d789a24858348c96ca32493933928fc"
+ integrity sha512-pEYEHprHaaIJROe6QRuTme7sUN46bn2/jpGUBeqfd8cTL+sNsOUTcg3TN7bCAnwunS4Y7NAMs6cXHEeksAgNPA==
+ dependencies:
+ lodash "^4.17.15"
+
"@adobe/apollo-link-mutation-queue@~1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@adobe/apollo-link-mutation-queue/-/apollo-link-mutation-queue-1.0.2.tgz#0c589ffb970b9917ba52c38812740c613c0a40da"
@@ -7500,6 +7507,11 @@ fast-redact@^2.0.0:
resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-2.0.0.tgz#17bb8f5e1f56ecf4a38c8455985e5eab4c478431"
integrity sha512-zxpkULI9W9MNTK2sJ3BpPQrTEXFNESd2X6O1tXMFpK/XM0G5c5Rll2EVYZH2TqI3xRGK/VaJ+eEOt7pnENJpeA==
+fast-redact@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.0.0.tgz#ac2f9e36c9f4976f5db9fb18c6ffbaf308cf316d"
+ integrity sha512-a/S/Hp6aoIjx7EmugtzLqXmcNsyFszqbt6qQ99BdG61QjBZF6shNis0BYR6TsZOQ1twYc0FN2Xdhwwbv6+KD0w==
+
fast-safe-stringify@^2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
@@ -8675,19 +8687,19 @@ hast-util-parse-selector@^2.0.0:
resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.3.tgz#57edd449103900c7f63fd9e6f694ffd7e4634719"
integrity sha512-nxbeqjQNxsvo/uYYAw9kij6td05YVUlf1qti09rVfbWSLT5H6wo3c+USIwX6nzXWk5kFZzXnEqO82856r0aM2Q==
-hastily@~0.4.7:
- version "0.4.7"
- resolved "https://registry.yarnpkg.com/hastily/-/hastily-0.4.7.tgz#3bb105586019708cd6c464d7c0fd710aae6b9bc3"
- integrity sha512-sHih6UGApmVJ6jGdqDLjfmwkVo3bkw6/NK/3tyM/OK8rRm+mucwv+Q8Fdl2bWQT5gowoVDh0FM3wETWaTbfIFQ==
+hastily@~0.5.0:
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/hastily/-/hastily-0.5.0.tgz#629583855ab9b082682249d978d278258b80dbad"
+ integrity sha512-y2zBaI3S0f2bfIPE9EO6f/BXe/y3poD11zYoHOMuPR9cswv1DKpSHGHiFnNb1wJMbd/hCEPv8Qn04Zjmh92GFw==
dependencies:
accepts "^1.3.7"
debug "^4.1.1"
mime "^2.4.6"
mime-types "^2.1.27"
on-headers "^1.0.2"
- pino "^6.3.2"
+ pino "^6.5.1"
pino-http "^5.2.0"
- pino-pretty "^4.0.0"
+ pino-pretty "^4.1.0"
vary "^1.1.2"
hastscript@^5.0.0:
@@ -11021,6 +11033,11 @@ lodash@^4.0.0, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.10,
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+lodash@~4.17.20:
+ version "4.17.20"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+ integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
log-driver@^1.2.7:
version "1.2.7"
resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
@@ -12681,14 +12698,14 @@ pino-http@^5.2.0:
pino "^6.0.0"
pino-std-serializers "^2.4.0"
-pino-pretty@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/pino-pretty/-/pino-pretty-4.0.0.tgz#afbff81f946342b9d6eabc434942fe490e02faa9"
- integrity sha512-YLy/n3dMXYWOodSm530gelkSAJGmEp29L9pqiycInlIae5FEJPWAkMRO3JFMbIFtjD2Ve4SH2aBcz2aRreGpBQ==
+pino-pretty@^4.1.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/pino-pretty/-/pino-pretty-4.3.0.tgz#18695606fd4f1e21cd1585d18999cd84d429e1d8"
+ integrity sha512-uEc9SUCCGVEs0goZvyznKXBHtI1PNjGgqHviJHxOCEFEWZN6Z/IQKv5pO9gSdm/b+WfX+/dfheWhtZUyScqjlQ==
dependencies:
"@hapi/bourne" "^2.0.0"
args "^5.0.1"
- chalk "^3.0.0"
+ chalk "^4.0.0"
dateformat "^3.0.3"
fast-safe-stringify "^2.0.7"
jmespath "^0.15.0"
@@ -12696,14 +12713,14 @@ pino-pretty@^4.0.0:
pump "^3.0.0"
readable-stream "^3.6.0"
split2 "^3.1.1"
- strip-json-comments "^3.0.1"
+ strip-json-comments "^3.1.1"
pino-std-serializers@^2.4.0, pino-std-serializers@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-2.4.2.tgz#cb5e3e58c358b26f88969d7e619ae54bdfcc1ae1"
integrity sha512-WaL504dO8eGs+vrK+j4BuQQq6GLKeCCcHaMB2ItygzVURcL1CycwNEUHTD/lHFHs/NL5qAz2UKrjYWXKSf4aMQ==
-pino@^6.0.0, pino@^6.3.2:
+pino@^6.0.0:
version "6.3.2"
resolved "https://registry.yarnpkg.com/pino/-/pino-6.3.2.tgz#55f73aa61584774ca5984068ffb78e8d519ce19e"
integrity sha512-EiP3L1hoFw19KPocWimjnfXeysld0ne89ZRQ+bf8nAeA2TyuLoggNlibAi+Kla67GvQBopLdIZOsh1z/Lruo5Q==
@@ -12715,6 +12732,18 @@ pino@^6.0.0, pino@^6.3.2:
quick-format-unescaped "^4.0.1"
sonic-boom "^1.0.0"
+pino@^6.5.1:
+ version "6.7.0"
+ resolved "https://registry.yarnpkg.com/pino/-/pino-6.7.0.tgz#d5d96b7004fed78816b5694fda3eab02b5ca6d23"
+ integrity sha512-vPXJ4P9rWCwzlTJt+f0Ni4THc3DWyt8iDDCO4edQ8narTu6hnpzdXu8FqeSJCGndl1W6lfbYQUQihUO54y66Lw==
+ dependencies:
+ fast-redact "^3.0.0"
+ fast-safe-stringify "^2.0.7"
+ flatstr "^1.0.12"
+ pino-std-serializers "^2.4.2"
+ quick-format-unescaped "^4.0.1"
+ sonic-boom "^1.0.2"
+
pinpoint@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/pinpoint/-/pinpoint-1.1.0.tgz#0cf7757a6977f1bf7f6a32207b709e377388e874"
@@ -14987,6 +15016,14 @@ sonic-boom@^1.0.0:
atomic-sleep "^1.0.0"
flatstr "^1.0.12"
+sonic-boom@^1.0.2:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-1.3.0.tgz#5c77c846ce6c395dddf2eb8e8e65f9cc576f2e76"
+ integrity sha512-4nX6OYvOYr6R76xfQKi6cZpTO3YSWe/vd+QdIfoH0lBy0MnPkeAbb2rRWgmgADkXUeCKPwO1FZAKlAVWAadELw==
+ dependencies:
+ atomic-sleep "^1.0.0"
+ flatstr "^1.0.12"
+
sort-keys@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
@@ -15452,10 +15489,10 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-strip-json-comments@^3.0.1:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
- integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
+strip-json-comments@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+ integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
style-loader@^0.23.1, style-loader@~0.23.1:
version "0.23.1"