[PWA-2227] Use sample data with personalized content (#3670)

* PWA-2163 Create DynamicBlock component + Create config for PageBuilder usage

* PWA-2169 Make feature EE only + Refetch data if user signs in + Update tests

* PWA-2169 Fix GraphQl call

* PWA-2169 Fix lint error

* PWA-2169 Clean snapshots

* PWA-2169 Fix file name issue

* PWA-2169 Avoid loading broken block

* PWA-2169 Update Cypress test

* PWA-2169 Avoid rendering component if no uids is provided

* PWA-2169 Fix cache clear + Add dynamic blocks in customer cache clear + Update tests

* PWA-2227 Edit homepage styling for dynamic blocks

* PWA-2227 Add label from discount data in price summary of cart

* PWA-2227 Yarn Prettier for test

Co-authored-by: mikhaelbois <mbois@absolunet.com>
Co-authored-by: Hwashiang (Michael) Yu <michaelyu0123@users.noreply.github.com>

packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/discountSummary.spec.js.snap

@@ -1,14 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders "Discount applied" label if label data is empty 1`] = `
+Array [
+  <span
+    className="lineItemLabel"
+  >
+    Discounts applied
+  </span>,
+  <span
+    className="price"
+  >
+    -
+    <span>
+      $
+    </span>
+    <span>
+      1
+    </span>
+    <span>
+      .
+    </span>
+    <span>
+      00
+    </span>
+  </span>,
+]
+`;
+
 exports[`renders accumulated discount value 1`] = `
 Array [
   <span
     className="lineItemLabel"
   >
-    <mock-FormattedMessage
-      defaultMessage="Discounts applied"
-      id="discountSummary.lineItemLabel"
-    />
+    Discounts applied
   </span>,
   <span
     className="price"
@@ -30,15 +54,39 @@ Array [
 ]
 `;
 
+exports[`renders discount label value from data  1`] = `
+Array [
+  <span
+    className="lineItemLabel"
+  >
+    Rebate
+  </span>,
+  <span
+    className="price"
+  >
+    -
+    <span>
+      $
+    </span>
+    <span>
+      1
+    </span>
+    <span>
+      .
+    </span>
+    <span>
+      00
+    </span>
+  </span>,
+]
+`;
+
 exports[`renders discount summary line item correctly 1`] = `
 Array [
   <span
     className="lineItemLabel"
   >
-    <mock-FormattedMessage
-      defaultMessage="Discounts applied"
-      id="discountSummary.lineItemLabel"
-    />
+    Special rebate
   </span>,
   <span
     className="price"

packages/venia-ui/lib/components/CartPage/PriceSummary/__tests__/discountSummary.spec.js

@@ -15,7 +15,8 @@ const defaultProps = {
             amount: {
                 value: 10,
                 currency: 'USD'
-            }
+            },
+            label: 'Special rebate'
         }
     ]
 };
@@ -82,3 +83,38 @@ test('renders nothing if discount value is "0"', () => {
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
+
+test('renders discount label value from data ', () => {
+    const props = {
+        ...defaultProps,
+        data: [
+            {
+                amount: {
+                    value: 1,
+                    currency: 'USD'
+                },
+                label: 'Rebate'
+            }
+        ]
+    };
+    const tree = createTestInstance(<DiscountSummary {...props} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('renders "Discount applied" label if label data is empty', () => {
+    const props = {
+        ...defaultProps,
+        data: [
+            {
+                amount: {
+                    value: 1,
+                    currency: 'USD'
+                }
+            }
+        ]
+    };
+    const tree = createTestInstance(<DiscountSummary {...props} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/CartPage/PriceSummary/discountSummary.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import Price from '@magento/venia-ui/lib/components/Price';
 
 import { useStyle } from '../../../classify';
@@ -22,6 +22,7 @@ const getDiscount = (discounts = []) => {
         return DEFAULT_AMOUNT;
     } else {
         return {
+            label: discounts[0].label,
             currency: discounts[0].amount.currency,
             value: discounts.reduce(
                 (acc, discount) => acc + discount.amount.value,
@@ -40,17 +41,22 @@ const getDiscount = (discounts = []) => {
 const DiscountSummary = props => {
     const classes = useStyle({}, props.classes);
     const discount = getDiscount(props.data);
+    const { formatMessage } = useIntl();
+
+    const label = discount.label
+        ? discount.label
+        : formatMessage({
+              id: 'discountSummary.lineItemLabel',
+              defaultMessage: 'Discounts applied'
+          });
 
     return discount.value ? (
         <Fragment>
             <span
                 className={classes.lineItemLabel}
                 data-cy="PriceSummary-DiscountSummary-label"
             >
-                <FormattedMessage
-                    id={'discountSummary.lineItemLabel'}
-                    defaultMessage={'Discounts applied'}
-                />
+                {label}
             </span>
             <span
                 data-cy="DiscountSummary-discountValue"

packages/venia-ui/lib/components/HomePage/homePage.module.css

@@ -419,3 +419,15 @@
 :global(.venia-home-products .slick-slider .slick-dots .slick-active > button) {
     background-color: hsl(205 004% 048%) !important;
 }
+
+:global(.venia-home-banner-text > div) {
+    flex-direction: unset !important;
+    justify-content: normal !important;
+}
+
+@media (max-width: 960px) {
+    :global(.venia-home-banner-text > div) {
+        flex-direction: column !important;
+        justify-content: center !important;
+    }
+}