@magento/venia-ui 9.4.0-alpha.1 → 9.4.0-beta.1

package/lib/components/Gallery/item.js

@@ -70,6 +70,11 @@ const GalleryItem = props => {
         </div>
     );
 
+    // fallback to regular price when final price is unavailable
+    const priceSource =
+        price_range.maximum_price.final_price ||
+        price_range.maximum_price.regular_price;
+
     // Hide the Rating component until it is updated with the new look and feel (PWA-2512).
     const ratingAverage = null;
     // const ratingAverage = rating_summary ? (
@@ -112,10 +117,8 @@ const GalleryItem = props => {
             </Link>
             <div data-cy="GalleryItem-price" className={classes.price}>
                 <Price
-                    value={price_range.maximum_price.final_price.value}
-                    currencyCode={
-                        price_range.maximum_price.final_price.currency
-                    }
+                    value={priceSource.value}
+                    currencyCode={priceSource.currency}
                 />
             </div>
 
@@ -155,6 +158,10 @@ GalleryItem.propTypes = {
                 final_price: shape({
                     value: number.isRequired,
                     currency: string.isRequired
+                }),
+                regular_price: shape({
+                    value: number.isRequired,
+                    currency: string.isRequired
                 }).isRequired
             }).isRequired
         }).isRequired

package/lib/components/ProductFullDetail/__tests__/__snapshots__/productFullDetail.spec.js.snap

@@ -7,6 +7,13 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -32,13 +39,6 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -182,6 +182,13 @@ exports[`it does not render options if the product is not a ConfigurableProduct
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -207,13 +214,6 @@ exports[`it does not render options if the product is not a ConfigurableProduct
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -327,6 +327,13 @@ exports[`it renders an error for an invalid cart 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -352,13 +359,6 @@ exports[`it renders an error for an invalid cart 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -506,6 +506,13 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -531,13 +538,6 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -690,6 +690,13 @@ Array [
     onReset={[Function]}
     onSubmit={[Function]}
   >
+    <section
+      className="imageCarousel"
+    >
+      <ProductImageCarousel
+        images={Array []}
+      />
+    </section>
     <section
       className="title"
     >
@@ -715,13 +722,6 @@ Array [
         </span>
       </p>
     </section>
-    <section
-      className="imageCarousel"
-    >
-      <ProductImageCarousel
-        images={Array []}
-      />
-    </section>
     <FormError
       classes={
         Object {
@@ -866,6 +866,13 @@ exports[`it renders correctly 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -891,13 +898,6 @@ exports[`it renders correctly 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1041,6 +1041,13 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -1066,13 +1073,6 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1216,6 +1216,13 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -1241,13 +1248,6 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1391,6 +1391,13 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -1416,13 +1423,6 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1566,6 +1566,13 @@ exports[`it renders form level errors 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -1591,13 +1598,6 @@ exports[`it renders form level errors 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1745,6 +1745,13 @@ exports[`it renders message with unsupported product type 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -1770,13 +1777,6 @@ exports[`it renders message with unsupported product type 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1933,6 +1933,13 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -1958,13 +1965,6 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -2078,6 +2078,13 @@ exports[`renders a WishlistButton with props 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
@@ -2103,13 +2110,6 @@ exports[`renders a WishlistButton with props 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -224,6 +224,9 @@ const ProductFullDetail = props => {
                 data-cy="ProductFullDetail-root"
                 onSubmit={handleAddToCart}
             >
+                <section className={classes.imageCarousel}>
+                    <Carousel images={mediaGalleryEntries} />
+                </section>
                 <section className={classes.title}>
                     <h1
                         className={classes.productName}
@@ -242,9 +245,6 @@ const ProductFullDetail = props => {
                     </p>
                     {shortDescription}
                 </section>
-                <section className={classes.imageCarousel}>
-                    <Carousel images={mediaGalleryEntries} />
-                </section>
                 <FormError
                     classes={{
                         root: classes.formErrors

package/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -21,6 +21,10 @@
         grid-template-columns: minmax(0, 1.5625fr) minmax(0, 1fr);
         grid-template-rows: repeat(5, min-content) 1fr [fold];
     }
+
+    .title {
+        grid-template-columns: 1fr max-content;
+    }
 }
 
 .section {
@@ -33,7 +37,7 @@
     composes: my-0 from global;
     composes: mx-sm from global;
     composes: px-0 from global;
-    composes: py-sm from global;
+    composes: py-xs from global;
 }
 
 .sectionTitle {
@@ -46,16 +50,14 @@
 }
 
 .title {
-    composes: gap-xs from global;
+    composes: section;
+    composes: gap-2 from global;
     composes: grid from global;
     composes: items-center from global;
     composes: leading-normal from global;
     composes: px-sm from global;
     composes: py-xs from global;
     grid-area: title;
-    grid-template-columns: 1fr max-content;
-
-    composes: lg_p-sm from global;
 }
 
 .productName {
@@ -68,6 +70,7 @@
 
 .productPrice {
     composes: block from global;
+    composes: mb-2 from global;
 }
 
 .imageCarousel {

package/lib/components/SearchBar/suggestedProduct.js

@@ -17,6 +17,7 @@ const SuggestedProduct = props => {
         small_image,
         name,
         onNavigate,
+        price,
         price_range,
         url_suffix
     } = props;
@@ -32,9 +33,14 @@ const SuggestedProduct = props => {
         url_suffix
     ]);
 
+    // fall back to deprecated field if price range is unavailable
     const priceProps = {
-        currencyCode: price_range?.maximum_price?.final_price?.currency,
-        value: price_range?.maximum_price?.final_price?.value
+        currencyCode:
+            price_range?.maximum_price?.final_price?.currency ||
+            price.regularPrice.amount.currency,
+        value:
+            price_range?.maximum_price?.final_price?.value ||
+            price.regularPrice.amount.value
     };
 
     return (
@@ -72,6 +78,14 @@ SuggestedProduct.propTypes = {
             })
         })
     }).isRequired,
+    price_range: shape({
+        maximum_price: shape({
+            final_price: shape({
+                currency: string,
+                value: number
+            })
+        })
+    }),
     classes: shape({
         root: string,
         image: string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.4.0-alpha.1",
+  "version": "9.4.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -79,9 +79,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "~3.4.0",
-    "@magento/babel-preset-peregrine": "1.2.1-alpha.1",
-    "@magento/peregrine": "12.4.0-alpha.1",
-    "@magento/pwa-buildpack": "11.3.0-alpha.1",
+    "@magento/babel-preset-peregrine": "1.2.1-beta.1",
+    "@magento/peregrine": "12.4.0-beta.1",
+    "@magento/pwa-buildpack": "11.3.0-beta.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.16.0",
     "graphql": "~15.5.0",