@windstream/react-shared-components 0.2.87 → 0.2.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.87",
+  "version": "0.2.89",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/checklist/index.test.tsx

@@ -19,11 +19,18 @@ jest.mock("@shared/components/list", () => ({
   ListItem: ({
     children,
     className,
+    ...rest
   }: {
     children: React.ReactNode;
     className?: string;
   }) => (
-    <li data-testid="list-item" className={className}>
+    <li
+      data-testid="list-item"
+      className={className}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    >
       {children}
     </li>
   ),
@@ -109,6 +116,29 @@ describe("Checklist", () => {
     });
   });
 
+  describe("fieldProps", () => {
+    it("spreads each structured item's fieldProps onto its own row", () => {
+      render(
+        <Checklist
+          items={[
+            { title: "One", fieldProps: { "data-contentful-entry-id": "a" } },
+            { title: "Two", fieldProps: { "data-contentful-entry-id": "b" } },
+          ]}
+        />
+      );
+      const rows = screen.getAllByTestId("list-item");
+      expect(rows[0]).toHaveAttribute("data-contentful-entry-id", "a");
+      expect(rows[1]).toHaveAttribute("data-contentful-entry-id", "b");
+    });
+
+    it("renders no tagging attributes for plain or untagged items", () => {
+      render(<Checklist items={["Plain", { title: "Structured" }]} />);
+      screen.getAllByTestId("list-item").forEach(row => {
+        expect(row).not.toHaveAttribute("data-contentful-entry-id");
+      });
+    });
+  });
+
   describe("icons", () => {
     it("renders check icons by default", () => {
       render(<Checklist items={["Item 1"]} />);

package/src/components/checklist/index.tsx

@@ -74,6 +74,7 @@ export const Checklist: React.FC<ChecklistProps> = props => {
               `${showIcons ? "flex" : ""} ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
               listItemClassName
             )}
+            {...(structured ? item.fieldProps : undefined)}
           >
             {showIcons && hasCustomIcon ? (
               <div className="flex shrink-0 leading-none">

package/src/components/checklist/types.ts

@@ -2,6 +2,8 @@ export type ChecklistItem = {
   title: React.ReactNode;
   iconUrl?: string;
   iconAlt?: string;
+  /** Extra DOM attribute props, spread onto this item's list row. */
+  fieldProps?: Record<string, unknown>;
 };
 
 export type ChecklistProps = {

package/src/contentful/blocks/cards/product-card/index.test.tsx

@@ -179,6 +179,29 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Missing price", () => {
+    it.each([
+      ["empty", ""],
+      ["undefined", undefined],
+    ])("hides the price block when price is %s", (_label, price) => {
+      const { container } = render(
+        <ProductCard
+          {...defaultProps}
+          price={price}
+          priceSuffixBottom="for 12 months"
+        />
+      );
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+      expect(screen.queryByText(/\/mo/)).not.toBeInTheDocument();
+      expect(screen.queryByText("for 12 months")).not.toBeInTheDocument();
+      expect(container.textContent).not.toContain("0.00");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Kinetic 500"
+      );
+      expect(screen.getByTestId("select-plan-btn")).toBeInTheDocument();
+    });
+  });
+
   describe("Best Value", () => {
     it("renders best value banner when bestValue is true", () => {
       render(<ProductCard {...defaultProps} bestValue={true} />);
@@ -300,11 +323,13 @@ describe("ProductCard", () => {
     });
 
     it("renders the real gift slot (not the empty placeholder) when the card has its own gift", () => {
-      const giftBadge = [
-        { title: "Free router", icon: "/router.png" },
-      ] as any;
+      const giftBadge = [{ title: "Free router", icon: "/router.png" }] as any;
       const { container } = render(
-        <ProductCard {...defaultProps} giftBadge={giftBadge} hasAnyGift={true} />
+        <ProductCard
+          {...defaultProps}
+          giftBadge={giftBadge}
+          hasAnyGift={true}
+        />
       );
       expect(
         container.querySelector("[data-pc-gift-empty]")

package/src/contentful/blocks/cards/product-card/index.tsx

@@ -137,51 +137,53 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               ) : null}
             </Text>
           </div>
-          <div className="flex flex-col items-start md:items-end">
-            <div className="flex items-start" {...fieldProps?.price}>
-              <Text
-                as="span"
-                className={cx(
-                  priceUnitClass,
-                  "mr-1 mt-[2px]",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                $
-              </Text>
-              <Text
-                as="span"
-                className={cx(
-                  priceIntegerClass,
-                  "leading-none",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {price.split(".")[0]}
-              </Text>
-              <Text
-                as="span"
-                className={cx(
-                  priceUnitClass,
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {`${price.split(".")[1]}${priceUnit}`}
-              </Text>
+          {price ? (
+            <div className="flex flex-col items-start md:items-end">
+              <div className="flex items-start" {...fieldProps?.price}>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceUnitClass,
+                    "mr-1 mt-[2px]",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  $
+                </Text>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceIntegerClass,
+                    "leading-none",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {price.split(".")[0]}
+                </Text>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceUnitClass,
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {`${price.split(".")[1]}${priceUnit}`}
+                </Text>
+              </div>
+              {priceSuffixBottom ? (
+                <Text
+                  as="span"
+                  {...fieldProps?.priceSuffixBottom}
+                  className={cx(
+                    "micro text-nowrap",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {priceSuffixBottom}
+                </Text>
+              ) : null}
             </div>
-            {priceSuffixBottom ? (
-              <Text
-                as="span"
-                {...fieldProps?.priceSuffixBottom}
-                className={cx(
-                  "micro text-nowrap",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {priceSuffixBottom}
-              </Text>
-            ) : null}
-          </div>
+          ) : null}
         </header>
 
         {/* Description */}

package/src/contentful/blocks/cards/product-card/types.ts

@@ -10,7 +10,7 @@ export interface ProductCardProps {
   speed: string;
   techType?: string;
   ismaxSpeed?: boolean;
-  price: string;
+  price?: string;
   /** The price unit rendered after the cents, e.g. "/mo" or "/mo*". Defaults
    *  to "/mo". Lets Contentful control a trailing disclaimer star. */
   priceUnit?: string;

package/src/contentful/blocks/carousel/helper.test.tsx

@@ -34,11 +34,13 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     enableBusinessSettings,
     giftBadge,
     hasAnyGift,
+    price,
   }: any) => (
     <article
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
+      data-price={price}
       data-expanded={isExpanded}
       data-business={enableBusinessSettings ? "true" : "false"}
     >
@@ -373,6 +375,28 @@ describe("ProductCardCarousel", () => {
     expect(card).toHaveAttribute("data-plan", "500 Mbps");
   });
 
+  it("passes the formatted price when a price is authored", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toHaveAttribute(
+      "data-price",
+      "49.99"
+    );
+  });
+
+  it.each([
+    ["undefined", undefined],
+    ["empty", ""],
+  ])("passes an empty price (not 0.00) when price is %s", (_label, price) => {
+    const item = { ...sampleProduct, price };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toHaveAttribute(
+      "data-price",
+      ""
+    );
+  });
+
   it("renders Next arrow and hides Previous on first slide in carousel mode", async () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,

package/src/contentful/blocks/carousel/helper.tsx

@@ -380,7 +380,7 @@ function ProductCardPanel({
     const planName = planContent?.[0] || "";
     const planSubtext = planContent?.[1] || "";
     const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
-    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    const formattedPrice = item?.price ? `${item.price}.${priceCents}` : "";
     // Preserve the full unit after the cents (e.g. "/mo*") so a Contentful
     // disclaimer star renders; fall back to "/mo" when no unit is present.
     const suffixParts = item?.priceSuffix?.split("/") || [];

package/src/contentful/blocks/primary-hero/index.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { PrimaryHero } from "./index";
 
+import { replaceTokens } from "@shared/utils/replace-tokens";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
@@ -26,8 +27,10 @@ jest.mock("@shared/components/next-image", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag className={className} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -80,10 +83,25 @@ describe("PrimaryHero", () => {
   });
 
   describe("Price section", () => {
+    const getPriceLockup = (container: HTMLElement) => {
+      const amount = container.querySelector("p.subheading5");
+      const lockup = amount?.parentElement;
+      const [dollarSign, , suffix] = Array.from(lockup?.children ?? []);
+      return { lockup, dollarSign, amount, suffix };
+    };
+
+    const textExposedToAssistiveTech = (container: HTMLElement) => {
+      const clone = container.cloneNode(true) as HTMLElement;
+      clone
+        .querySelectorAll('[aria-hidden="true"]')
+        .forEach(node => node.remove());
+      return clone.textContent ?? "";
+    };
+
     it("renders price with dollar sign", () => {
-      render(<PrimaryHero {...baseProps} price="49.99" />);
+      render(<PrimaryHero {...baseProps} price="49" />);
       expect(screen.getByText("$")).toBeInTheDocument();
-      expect(screen.getByText("49.99")).toBeInTheDocument();
+      expect(screen.getByText("49")).toBeInTheDocument();
     });
 
     it("renders priceSuffix when provided", () => {
@@ -117,6 +135,247 @@ describe("PrimaryHero", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByText("$")).not.toBeInTheDocument();
     });
+
+    it("keeps the whole-dollar authored lockup unchanged", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19" priceSuffix="99/mo*" />
+      );
+      const { lockup, dollarSign, amount, suffix } = getPriceLockup(container);
+
+      expect(lockup?.children).toHaveLength(3);
+      expect(dollarSign).toHaveTextContent(/^\$$/);
+      expect(dollarSign).toHaveClass("subheading1", "mt-0.5");
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix?.tagName).toBe("P");
+      expect(suffix).toHaveClass("subheading1", "mt-0.5");
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+      expect(suffix?.querySelector("span")).toBeNull();
+    });
+
+    it("renders decimal cents with the suffix so it matches the authored lockup", () => {
+      const authored = render(
+        <PrimaryHero {...baseProps} price="19" priceSuffix="99/mo*" />
+      );
+      const expected = getPriceLockup(authored.container);
+      const expectedLockup = {
+        amount: expected.amount?.textContent,
+        amountClass: expected.amount?.className,
+        suffix: expected.suffix?.textContent,
+        suffixClass: expected.suffix?.className,
+        count: expected.lockup?.children.length,
+      };
+      authored.unmount();
+
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19.99" priceSuffix="/mo*" />
+      );
+      const actual = getPriceLockup(container);
+
+      expect({
+        amount: actual.amount?.textContent,
+        amountClass: actual.amount?.className,
+        suffix: actual.suffix?.textContent,
+        suffixClass: actual.suffix?.className,
+        count: actual.lockup?.children.length,
+      }).toEqual(expectedLockup);
+      expect(screen.queryByText("19.99")).not.toBeInTheDocument();
+    });
+
+    it("renders a resolved price token like the authored production lockup", () => {
+      const tokens = [
+        { token: "price_fiber_300", value: "24.99", promo: "19.99" },
+      ];
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price={replaceTokens("${price_fiber_300}", tokens)}
+          priceSuffix={replaceTokens("/mo*", tokens)}
+          priceCallout="fiber plans|start at "
+        />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+      expect(screen.getByText("fiber plans")).toBeInTheDocument();
+      expect(screen.getByText("$19.99/mo*")).toHaveClass("sr-only");
+    });
+
+    it("renders decimal cents on their own when no suffix is provided", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="39.99" />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^39$/);
+      expect(suffix).toHaveClass("subheading1", "mt-0.5");
+      expect(suffix).toHaveTextContent(/^99$/);
+    });
+
+    it("splits prices with thousands separators", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="1,299.50" priceSuffix="/yr" />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^1,299$/);
+      expect(suffix).toHaveTextContent(/^50\/yr$/);
+    });
+
+    it.each(["Free", "$19.99", "19.", ".99"])(
+      "renders non-decimal price %p verbatim",
+      price => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix="/mo" />
+        );
+        const { amount, suffix } = getPriceLockup(container);
+
+        expect(amount?.textContent).toBe(price);
+        expect(suffix).toHaveTextContent(/^\/mo$/);
+      }
+    );
+
+    it.each([
+      ["price", { price: "${price_tier3_2gig}" }],
+      ["priceSuffix", { price: "19", priceSuffix: "${price_suffix}" }],
+      ["priceCallout", { price: "19", priceCallout: "save $${reward_x}" }],
+    ])("hides the price lockup when %s has an unresolved token", (_, props) => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          priceSuffix="/mo*"
+          priceCallout="fiber plans|start at "
+          {...props}
+        />
+      );
+
+      expect(container.querySelector("p.subheading5")).toBeNull();
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+      expect(screen.queryByText("fiber plans")).not.toBeInTheDocument();
+      expect(container.textContent).not.toContain("${");
+    });
+
+    it.each(["99/mo*", " 99/mo*", "99"])(
+      "does not repeat cents already leading the suffix %p",
+      priceSuffix => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price="59.99" priceSuffix={priceSuffix} />
+        );
+        const { amount, suffix } = getPriceLockup(container);
+
+        expect(amount).toHaveTextContent(/^59$/);
+        expect(suffix?.textContent).toBe(priceSuffix);
+        expect(suffix?.querySelector("span")).toBeNull();
+      }
+    );
+
+    it.each([
+      ["59.49", "99/mo*", "4999/mo*"],
+      ["19.99", "990/mo", "99990/mo"],
+    ])(
+      "keeps the cents when %p has a suffix %p that does not lead with them",
+      (price, priceSuffix, expected) => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix={priceSuffix} />
+        );
+        const { suffix } = getPriceLockup(container);
+
+        expect(suffix?.textContent).toBe(expected);
+      }
+    );
+
+    it("tags split cents with the price field and the suffix with the priceSuffix field", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price="19.99"
+          priceSuffix="/mo*"
+          fieldProps={{
+            price: { "data-field": "price" },
+            priceSuffix: { "data-field": "priceSuffix" },
+          }}
+        />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+      const cents = suffix?.querySelector("span");
+
+      expect(amount).toHaveAttribute("data-field", "price");
+      expect(suffix).toHaveAttribute("data-field", "priceSuffix");
+      expect(cents).toHaveAttribute("data-field", "price");
+      expect(cents).toHaveTextContent(/^99$/);
+    });
+
+    it.each([
+      ["19.99", "/mo*", "$19.99/mo*"],
+      ["59.99", "99/mo*", "$59.99/mo*"],
+      ["59.99", " 99/mo*", "$59.99/mo*"],
+      ["39.99", undefined, "$39.99"],
+      ["1,299.50", "/yr", "$1,299.50/yr"],
+      ["19.99", " per month", "$19.99 per month"],
+      ["59.49", "99/mo*", "$59.49 99/mo*"],
+    ])(
+      "exposes %p + %p to assistive technology as %p only once",
+      (price, priceSuffix, expected) => {
+        const { container } = render(
+          <PrimaryHero
+            {...baseProps}
+            price={price}
+            priceSuffix={priceSuffix}
+            priceCallout="fiber plans|start at "
+          />
+        );
+        const { lockup } = getPriceLockup(container);
+        const accessibleText = textExposedToAssistiveTech(container);
+
+        expect(screen.getByText(expected)).toHaveClass("sr-only");
+        expect(lockup).toHaveAttribute("aria-hidden", "true");
+        expect(accessibleText).toContain(expected);
+        expect(accessibleText.replace(expected, "")).not.toMatch(/\d/);
+      }
+    );
+
+    it("keeps the split visual fragments in the DOM for crawlers", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19.99" priceSuffix="/mo*" />
+      );
+      const { dollarSign, amount, suffix } = getPriceLockup(container);
+
+      expect(dollarSign).toBeInTheDocument();
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+    });
+
+    it.each([
+      ["19", "99/mo*"],
+      ["Free", "/mo"],
+      ["19.", "/mo"],
+    ])(
+      "leaves the unsplit lockup %p + %p exposed to assistive technology as before",
+      (price, priceSuffix) => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix={priceSuffix} />
+        );
+        const { lockup } = getPriceLockup(container);
+
+        expect(container.querySelector(".sr-only")).toBeNull();
+        expect(lockup).not.toHaveAttribute("aria-hidden");
+        expect(textExposedToAssistiveTech(container)).toContain(
+          `$${price}${priceSuffix}`
+        );
+      }
+    );
+
+    it("does not expose an accessible price when the lockup is hidden", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price="${price_tier3_2gig}"
+          priceSuffix="/mo*"
+        />
+      );
+
+      expect(container.querySelector(".sr-only")).toBeNull();
+    });
   });
 
   describe("Checklist", () => {

package/src/contentful/blocks/primary-hero/index.tsx

@@ -6,6 +6,27 @@ import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { cx } from "@shared/utils";
+import { hasUnresolvedTokens } from "@shared/utils/replace-tokens";
+
+const DECIMAL_PRICE_PATTERN = /^(\d[\d,]*)\.(\d+)$/;
+
+const splitPrice = (price?: string, priceSuffix?: string) => {
+  const match = price ? DECIMAL_PRICE_PATTERN.exec(price.trim()) : null;
+  if (!match) return { dollars: price, cents: "", accessiblePrice: "" };
+  const [, dollars, cents] = match;
+  const suffix = priceSuffix?.trimStart() ?? "";
+  const suffixLeadsWithCents =
+    suffix.startsWith(cents) && !/^\d/.test(suffix.slice(cents.length));
+  const unit = suffixLeadsWithCents
+    ? suffix.slice(cents.length)
+    : (priceSuffix ?? "");
+  const unitSeparator = /^\d/.test(unit) ? " " : "";
+  return {
+    dollars,
+    cents: suffixLeadsWithCents ? "" : cents,
+    accessiblePrice: `$${dollars}.${cents}${unitSeparator}${unit}`,
+  };
+};
 
 export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const {
@@ -59,6 +80,18 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const badgeImageUrl = normalizeImageUrl(badgeImage);
   const heroImageUrl = normalizeImageUrl(carouselImages?.[0]);
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+  const {
+    dollars: priceDollars,
+    cents: priceCents,
+    accessiblePrice,
+  } = splitPrice(price, priceSuffix);
+  // An unresolved `${token}` (e.g. a missing token source) hides the lockup
+  // instead of rendering the raw placeholder.
+  const showPrice =
+    !!price &&
+    ![price, priceSuffix, priceCallout].some(value =>
+      hasUnresolvedTokens(value)
+    );
   const baseTextColorClass = textColor === "dark" ? "text-text" : "text-white";
   const textColorClass =
     hasDesktopVideo && textColor === "dark"
@@ -123,7 +156,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             )}
 
             {/* price callout */}
-            {price ? (
+            {showPrice ? (
               <div className="flex sm:justify-center sm:text-left lg:justify-start">
                 <div className="mr-2 mt-0.5" {...fieldProps?.priceCallout}>
                   {priceCallout
@@ -134,19 +167,30 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                       ))
                     : null}
                 </div>
-                <div className="flex">
+                {accessiblePrice ? (
+                  <Text as="p" className="sr-only">
+                    {accessiblePrice}
+                  </Text>
+                ) : null}
+                <div
+                  className="flex"
+                  aria-hidden={accessiblePrice ? true : undefined}
+                >
                   <Text as="p" className="subheading1 mt-0.5">
                     $
                   </Text>
                   <Text as="p" className="subheading5" {...fieldProps?.price}>
-                    {price}
+                    {priceDollars}
                   </Text>
-                  {priceSuffix ? (
+                  {priceCents || priceSuffix ? (
                     <Text
                       as="p"
                       className="subheading1 mt-0.5"
                       {...fieldProps?.priceSuffix}
                     >
+                      {priceCents ? (
+                        <span {...fieldProps?.price}>{priceCents}</span>
+                      ) : null}
                       {priceSuffix}
                     </Text>
                   ) : null}