Merged PR 1954: feat: Enhance product info components and add redemption points feature...

Related work items: #5346

apps/isa-app/stories/checkout/shared/product-info/product-info-redemption.stories.ts

@@ -0,0 +1,60 @@
+import {
+  type Meta,
+  type StoryObj,
+  applicationConfig,
+  argsToTemplate,
+  moduleMetadata,
+} from '@storybook/angular';
+import { ProductInfoRedemptionComponent } from '@isa/checkout/shared/product-info';
+import { provideProductImageUrl } from '@isa/shared/product-image';
+import { provideProductRouterLinkBuilder } from '@isa/shared/product-router-link';
+import { provideRouter } from '@angular/router';
+
+const meta: Meta<ProductInfoRedemptionComponent> = {
+  title: 'checkout/shared/product-info/ProductInfoRedemption',
+  component: ProductInfoRedemptionComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideRouter([
+          { path: ':ean', component: ProductInfoRedemptionComponent },
+        ]),
+      ],
+    }),
+    moduleMetadata({
+      providers: [
+        provideProductImageUrl('https://produktbilder-test.paragon-data.net'),
+        provideProductRouterLinkBuilder((ean: string) => ean),
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<ProductInfoRedemptionComponent>;
+
+export const Primary: Story = {
+  args: {
+    item: {
+      product: {
+        ean: '9783498007706',
+        name: 'Die Assistentin',
+        contributors: 'Wahl, Caroline',
+        format: 'TB',
+        formatDetail: 'Taschenbuch (Kartoniert)',
+        manufacturer: 'Test Manufacturer',
+        publicationDate: '2023-01-01',
+      },
+      redemptionPoints: 100,
+    },
+    orientation: 'vertical',
+  },
+  argTypes: {
+    item: { control: 'object' },
+    orientation: {
+      control: { type: 'radio' },
+      options: ['horizontal', 'vertical'],
+    },
+  },
+};

apps/isa-app/stories/checkout/shared/product-info/stock-info.stories.ts

@@ -0,0 +1,59 @@
+import {
+  type Meta,
+  type StoryObj,
+  applicationConfig,
+  argsToTemplate,
+  moduleMetadata,
+} from '@storybook/angular';
+
+import { StockInfoComponent } from '@isa/checkout/shared/product-info';
+import { RemissionStockService } from '@isa/remission/data-access';
+import { StockInfoDTO } from '@generated/swagger/inventory-api';
+
+const meta: Meta<StockInfoComponent> = {
+  title: 'checkout/shared/product-info/StockInfoComponent',
+  component: StockInfoComponent,
+  decorators: [
+    applicationConfig({
+      providers: [],
+    }),
+    moduleMetadata({
+      imports: [],
+      providers: [
+        {
+          provide: RemissionStockService,
+          useValue: {
+            fetchStock: async (
+              params: { itemIds: number[]; assignedStockId?: number },
+              abortSignal?: AbortSignal,
+            ) => {
+              const result: StockInfoDTO = {
+                itemId: params.itemIds[0],
+                stockId: params.assignedStockId,
+                inStock: 14,
+              };
+              await new Promise((resolve) => setTimeout(resolve, 1000));
+              return [result];
+            },
+          },
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<StockInfoComponent>;
+
+export const Primary: Story = {
+  args: {
+    item: {
+      id: 123456,
+      catalogAvailability: {
+        ssc: '999',
+        sscText: 'Lieferbar in 1-3 Werktagen',
+      },
+    },
+  },
+};

apps/isa-app/stories/shared/product-format/product-format.stories.ts

@@ -1,48 +1,57 @@
-import { argsToTemplate, Meta } from '@storybook/angular';
-import { ProductFormatIconGroup } from '@isa/icons';
-import { ProductFormatComponent } from '@isa/shared/product-foramt';
-
-type ProductFormatInputs = {
-  format: string;
-  formatDetail: string;
-};
-
-const options = Object.keys(ProductFormatIconGroup).map((key) =>
-  key.toUpperCase(),
-);
-
-const meta: Meta<ProductFormatInputs> = {
-  title: 'shared/product-format/ProductFormat',
-  component: ProductFormatComponent,
-  argTypes: {
-    format: {
-      control: {
-        type: 'select',
-      },
-      options,
-      description: 'The product format to display the icon for.',
-      defaultValue: options[0],
-    },
-    formatDetail: {
-      control: {
-        type: 'text',
-      },
-      description: 'The detail text for the product format.',
-      defaultValue: 'Default Format Detail',
-    },
-  },
-  args: {
-    format: options[0], // Default value for the product format
-    formatDetail: 'Default Format Detail', // Default value for the format detail
-  },
-  render: (args) => ({
-    props: args,
-    template: `<shared-product-format ${argsToTemplate(args)}></shared-product-format>`,
-  }),
-};
-
-export default meta;
-
-type Story = typeof meta;
-
-export const Default: Story = {};
+import { argsToTemplate, Meta } from '@storybook/angular';
+import { ProductFormatIconGroup } from '@isa/icons';
+import { ProductFormatComponent } from '@isa/shared/product-foramt';
+
+type ProductFormatInputs = {
+  format: string;
+  formatDetail: string;
+  formatDetailsBold: boolean;
+};
+
+const options = Object.keys(ProductFormatIconGroup).map((key) =>
+  key.toUpperCase(),
+);
+
+const meta: Meta<ProductFormatInputs> = {
+  title: 'shared/product-format/ProductFormat',
+  component: ProductFormatComponent,
+  argTypes: {
+    format: {
+      control: {
+        type: 'select',
+      },
+      options,
+      description: 'The product format to display the icon for.',
+      defaultValue: options[0],
+    },
+    formatDetail: {
+      control: {
+        type: 'text',
+      },
+      description: 'The detail text for the product format.',
+      defaultValue: 'Default Format Detail',
+    },
+    formatDetailsBold: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether the format detail text should be bold.',
+      defaultValue: false,
+    },
+  },
+  args: {
+    format: options[0], // Default value for the product format
+    formatDetail: 'Default Format Detail', // Default value for the format detail
+    formatDetailsBold: false, // Default value for the format details bold
+  },
+  render: (args) => ({
+    props: args,
+    template: `<shared-product-format ${argsToTemplate(args)}></shared-product-format>`,
+  }),
+};
+
+export default meta;
+
+type Story = typeof meta;
+
+export const Default: Story = {};