Add preview pill in gift cards card (#1886)

* Add preview pill in gift cards card

* Temporararily disable triangle in preview pill

src/components/PreviewPill/styles.ts

@@ -1,5 +1,4 @@
 import { makeStyles } from "@saleor/macaw-ui";
-import { triangle } from "@saleor/styles/mixins";
 
 const useStyles = makeStyles(
   theme => ({
@@ -7,13 +6,15 @@ const useStyles = makeStyles(
       zIndex: 11
     },
     tooltip: {
-      "&:before": {
+      // TO-FIX
-        ...triangle(theme.palette.saleor.warning.mid, 8),
+      // Triangle's position is hard coded
-        content: "''",
+      // "&:before": {
-        position: "absolute",
+      //   ...triangle(theme.palette.saleor.warning.mid, 8),
-        left: 17,
+      //   content: "''",
-        top: -8
+      //   position: "absolute",
-      },
+      //   left: 17,
+      //   top: -8
+      // },
       background: theme.palette.saleor.warning.mid,
       borderRadius: 8,
       marginTop: theme.spacing(1.5),

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx

@@ -3,6 +3,7 @@ import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
 import Link from "@saleor/components/Link";
+import PreviewPill from "@saleor/components/PreviewPill";
 import Skeleton from "@saleor/components/Skeleton";
 import { useCustomerDetails } from "@saleor/customers/hooks/useCustomerDetails";
 import GiftCardCreateDialogContent from "@saleor/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent";
@@ -62,17 +63,20 @@ const CustomerGiftCardsCard: React.FC = () => {
         <CardTitle
           title={intl.formatMessage(messages.customerGiftCardsCardTitle)}
           toolbar={
-            !!giftCards?.length && (
+            <>
-              <Button
+              {!!giftCards?.length && (
-                variant="tertiary"
+                <Button
-                href={viewAllGiftCardsUrl}
+                  variant="tertiary"
-                component={Link}
+                  href={viewAllGiftCardsUrl}
-              >
+                  component={Link}
-                <FormattedMessage
+                >
-                  {...messages.customerGiftCardsViewAllButton}
+                  <FormattedMessage
-                />
+                    {...messages.customerGiftCardsViewAllButton}
-              </Button>
+                  />
-            )
+                </Button>
+              )}
+              <PreviewPill className={classes.previewPill} />
+            </>
           }
         >
           <FormattedMessage

src/giftCards/components/GiftCardCustomerCard/styles.ts

@@ -10,6 +10,9 @@ export const useCardActionsStyles = makeStyles(
       padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
       flexDirection: ({ buttonPosition }: CustomerGiftCardsCardActionsProps) =>
         buttonPosition === "left" ? "row" : "row-reverse"
+    },
+    previewPill: {
+      marginLeft: theme.spacing(1)
     }
   }),
   { name: "CustomerGiftCardsCard" }

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -66929,6 +66929,19 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -67724,6 +67737,19 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -68494,6 +68520,19 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -69191,6 +69230,19 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -69940,6 +69992,19 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -70689,6 +70754,19 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -71416,6 +71494,19 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -72171,6 +72262,19 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"
@@ -72926,6 +73030,19 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                   Gift Cards
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              >
+                <div
+                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
+                >
+                  <span
+                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
+                  >
+                    Preview
+                  </span>
+                </div>
+              </div>
             </div>
             <span
               class="Skeleton-skeleton-id"