Deprecate CartLinePrice (#173)

* Deprecate CartLinePrice * cleanup changelog
Shopify · Feb 7, 2023 · 6225d33 · 6225d33
1 parent b6e54bd
commit 6225d33
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/.changeset/selfish-turtles-grab.md 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
@@ -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
@@ -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
@@ -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) {