From 6225d33d3cb77cabc5f369e15c2bce2c964542a8 Mon Sep 17 00:00:00 2001
From: Anthony Frehner <frehner@users.noreply.github.com>
Date: Tue, 7 Feb 2023 15:47:34 -0700
Subject: [PATCH] Deprecate CartLinePrice (#173)

* Deprecate CartLinePrice

* cleanup changelog
---
 .changeset/selfish-turtles-grab.md            | 19 +++++++++++++++++++
 .../docs/generated/generated_docs_data.json   |  2 +-
 packages/react/src/CartLinePrice.doc.ts       |  2 +-
 packages/react/src/CartLinePrice.tsx          | 16 ++++++++++++++++
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/selfish-turtles-grab.md

diff --git a/.changeset/selfish-turtles-grab.md b/.changeset/selfish-turtles-grab.md
new file mode 100644
index 0000000000..ee02d89bc3
--- /dev/null
+++ b/.changeset/selfish-turtles-grab.md
@@ -0,0 +1,19 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Add a deprecation notice to `<CartLinePrice/>`:
+
+Use `Money` instead. To migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:
+
+- `regular`: `cartLine.cost.totalAmount`
+- `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`
+
+For example:
+
+```jsx
+// before
+<CartLinePrice data={cartLine} priceType="regular" />
+// after
+<Money data={cartLine.cost.totalAmount} />
+```
diff --git a/packages/react/docs/generated/generated_docs_data.json b/packages/react/docs/generated/generated_docs_data.json
index 505a859e1f..892fd3cb83 100644
--- a/packages/react/docs/generated/generated_docs_data.json
+++ b/packages/react/docs/generated/generated_docs_data.json
@@ -410,7 +410,7 @@
         "url": "/api/hydrogen-react/components/money"
       }
     ],
-    "description": "\n    The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.\n  ",
+    "description": "\n    `@deprecated` Use `Money` instead.\n\nTo migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:\n\n- `regular`: `cartLine.cost.totalAmount`\n\n- `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`\n\nFor example\n\nBefore:\n\n`<CartLinePrice data={cartLine} priceType=\"regular\" />`\n\nAfter:\n\n`<Money data={cartLine.cost.totalAmount} />`\n\nThe `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.\n  ",
     "type": "component",
     "defaultExample": {
       "description": "I am the default example",
diff --git a/packages/react/src/CartLinePrice.doc.ts b/packages/react/src/CartLinePrice.doc.ts
index b8756d0ab7..10ee1bb67a 100644
--- a/packages/react/src/CartLinePrice.doc.ts
+++ b/packages/react/src/CartLinePrice.doc.ts
@@ -12,7 +12,7 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   description: `
-    The \`CartLinePrice\` component renders a \`Money\` component for the cart line merchandise's price or compare at price.
+    \`@deprecated\` Use \`Money\` instead.\n\nTo migrate, use the \`priceType\` prop that matches the corresponding property on the \`CartLine\` object:\n\n- \`regular\`: \`cartLine.cost.totalAmount\`\n\n- \`compareAt\`: \`cartLine.cost.compareAtAmountPerQuantity\`\n\nFor example\n\nBefore:\n\n\`<CartLinePrice data={cartLine} priceType="regular" />\`\n\nAfter:\n\n\`<Money data={cartLine.cost.totalAmount} />\`\n\nThe \`CartLinePrice\` component renders a \`Money\` component for the cart line merchandise's price or compare at price.
   `,
   type: 'component',
   defaultExample: {
diff --git a/packages/react/src/CartLinePrice.tsx b/packages/react/src/CartLinePrice.tsx
index ccd930e70e..2e2dca441c 100644
--- a/packages/react/src/CartLinePrice.tsx
+++ b/packages/react/src/CartLinePrice.tsx
@@ -13,9 +13,25 @@ type CartLinePriceProps = Omit<React.ComponentProps<typeof Money>, 'data'> &
   CartLinePricePropsBase;
 
 /**
+ * @deprecated Use `Money` instead. To migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:
+ * - `regular`: `cartLine.cost.totalAmount`
+ * - `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`
+ *
+ * For example:
+ * ```
+ * // before
+ * <CartLinePrice data={cartLine} priceType="regular" />
+ * // after
+ * <Money data={cartLine.cost.totalAmount} />
+ * ```
+ *
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.
  */
 export function CartLinePrice(props: CartLinePriceProps) {
+  if (__HYDROGEN_DEV__) {
+    console.warn(`<CartLinePrice/> is deprecated; use <Money/> instead.`);
+  }
+
   const {data: cartLine, priceType = 'regular', ...passthroughProps} = props;
 
   if (cartLine == null) {