@windstream/react-shared-components 0.2.88 → 0.2.90

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}

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

@@ -45,7 +45,8 @@ const argTypes: ArgTypes<PrimaryHeroProps> = {
   },
   price: {
     control: { type: "text" as const },
-    description: "Price value (e.g. '24')",
+    description:
+      "Price value (e.g. '24'). Decimal prices such as a resolved price token ('19.99') render the cents with the suffix, without repeating cents the suffix already starts with. The lockup is hidden while any price field still contains an unresolved `${token}`.",
   },
   priceSuffix: {
     control: { type: "text" as const },
@@ -324,3 +325,23 @@ export const BundleOffer: Story = {
     checklist: undefined,
   },
 };
+
+/** Tokenized price: a resolved price token ("19.99") renders the same lockup as an authored "19" + "99/mo*". */
+export const TokenizedPrice: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When the Price field holds a price token (e.g. `${price_fiber_300}`) the consuming app resolves it with `replaceTokens` to a decimal value such as `19.99`. The dollars render large and the cents render with the suffix, matching production heroes authored as Price `19` + Price Suffix `99/mo*`.",
+      },
+    },
+  },
+  args: {
+    title: "switch and save this season",
+    subTitle: "Make it festive with fast 100% fiber from Kinetic.",
+    price: "19.99",
+    priceSuffix: "/mo*",
+    priceCallout: "fiber plans|start at ",
+    textColor: "dark",
+  },
+};

package/src/utils/replace-tokens.test.ts

@@ -1,4 +1,5 @@
 import {
+  hasUnresolvedTokens,
   replaceTokens,
   type RichTextDocument,
   type TokenEntry,
@@ -195,3 +196,36 @@ describe("replaceTokens - rich text", () => {
     expect((result.content[1] as any).content[0].value).toBe("50");
   });
 });
+
+describe("hasUnresolvedTokens", () => {
+  it.each([
+    ["${price_tier3_2gig}", true],
+    ["From $${price_tier1_300mbps}/mo", true],
+    ["39.99", false],
+    ["plain text", false],
+    ["${}", false],
+    ["", false],
+    [null, false],
+    [undefined, false],
+  ])("returns %p -> %p", (input, expected) => {
+    expect(hasUnresolvedTokens(input)).toBe(expected);
+  });
+
+  it("is false once every token resolves and true for unknown tokens", () => {
+    expect(hasUnresolvedTokens(replaceTokens("${reward_50}", tokens))).toBe(
+      false
+    );
+    expect(hasUnresolvedTokens(replaceTokens("${not_a_token}", tokens))).toBe(
+      true
+    );
+  });
+
+  it("returns the same result on repeated calls", () => {
+    const value = "${price_tier1_300mbps}";
+    expect([1, 2, 3].map(() => hasUnresolvedTokens(value))).toEqual([
+      true,
+      true,
+      true,
+    ]);
+  });
+});

package/src/utils/replace-tokens.ts

@@ -15,6 +15,10 @@ export type RichTextDocument = {
 export type ReplaceTokensResult<T> = T extends string ? string : T;
 
 const TOKEN_PATTERN = /\$\{([^${}]+)\}/g;
+const UNRESOLVED_TOKEN_PATTERN = new RegExp(TOKEN_PATTERN.source);
+
+export const hasUnresolvedTokens = (input?: string | null): boolean =>
+  typeof input === "string" && UNRESOLVED_TOKEN_PATTERN.test(input);
 
 const normalizeEntries = (tokens: TokenSource): TokenEntry[] => {
   if (Array.isArray(tokens)) return tokens;