Update Stripe CLI command and key adjustments in line item components

The Stripe CLI command in the workflow file has been updated to use Docker. Additionally, the keys for line-item-details.tsx have been modified, changing item.id and tier.upTo to index to avoid potential key duplication issues within the same component.

.github/workflows/workflow.yml

@@ -105,7 +105,7 @@ jobs:
 
       - name: Stripe CLI
         run: |
-          pnpm run stripe:listen &
+          docker run --add-host=host.docker.internal:host-gateway --rm -it --name=stripe -d stripe/stripe-cli:latest listen --forward-to http://host.docker.internal:3000/api/billing/webhook --skip-verify --api-key "$STRIPE_SECRET_KEY" --log-level debug &
 
       - name: Production Build (test env)
         run: pnpm --filter web build:test

packages/billing/gateway/src/components/line-item-details.tsx

@@ -18,13 +18,13 @@ export function LineItemDetails(
 ) {
   return (
     <div className={'flex flex-col space-y-1'}>
-      {props.lineItems.map((item) => {
+      {props.lineItems.map((item, index) => {
         // If the item has a description, we render it as a simple text
         // and pass the item as values to the translation so we can use
         // the item properties in the translation.
         if (item.description) {
           return (
-            <div key={item.id} className={className}>
+            <div key={index} className={className}>
               <span className={'flex items-center space-x-1.5'}>
                 <PlusSquare className={'w-4'} />
 
@@ -219,7 +219,7 @@ function Tiers({
     return (
       <span
         className={'text-secondary-foreground flex space-x-1 text-xs'}
-        key={tier.upTo}
+        key={index}
       >
         <span>-</span>