Feature/op 24 product price component

.storybook/decorators.tsx

@@ -12,7 +12,6 @@ import {
   DEFAULT_FILE_TYPES,
   DEFAULT_PREFILL_ATTRIBUTES,
   DEFAULT_PREFILL_PLUGINS,
-  DEFAULT_PRODUCTS,
   DEFAULT_REGISTRATION_ATTRIBUTES,
   DEFAULT_VALIDATOR_PLUGINS,
   sleep,
@@ -101,7 +100,6 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
         getDocumentTypes: async () => context?.args?.documentTypes || defaultdocumentTypes,
         getConfidentialityLevels: async () => CONFIDENTIALITY_LEVELS,
         getAuthPlugins: async () => DEFAULT_AUTH_PLUGINS,
-        getProducts: async () => DEFAULT_PRODUCTS,
       }}
     >
       <Story />

i18n/messages/en.json

@@ -604,11 +604,6 @@
     "description": "File component 'fileMaxSize' validation error",
     "originalDefault": "Specify a positive, non-zero file size without decimals, e.g. 10MB."
   },
-  "QXsAuR": {
-    "defaultMessage": "Product to fetch prices for",
-    "description": "Tooltip for 'product' builder field",
-    "originalDefault": "Product to fetch prices for"
-  },
   "Qjl92W": {
     "defaultMessage": "Preview",
     "description": "Component preview card title",
@@ -1439,11 +1434,6 @@
     "description": "Tooltip for 'hideHeader' builder field",
     "originalDefault": "Do not display the configured label and top line as the header in the fieldset."
   },
-  "uuKVtO": {
-    "defaultMessage": "Product",
-    "description": "Label for 'product' builder field",
-    "originalDefault": "Product"
-  },
   "vRVMpe": {
     "defaultMessage": "Value",
     "description": "Translations: property column header",

i18n/messages/nl.json

@@ -613,11 +613,6 @@
     "description": "File component 'fileMaxSize' validation error",
     "originalDefault": "Specify a positive, non-zero file size without decimals, e.g. 10MB."
   },
-  "QXsAuR": {
-    "defaultMessage": "Product waarvoor prijzen worden opgehaald",
-    "description": "Tooltip for 'product' builder field",
-    "originalDefault": "Product to fetch prices for"
-  },
   "Qjl92W": {
     "defaultMessage": "Voorbeeld",
     "description": "Component preview card title",
@@ -1459,12 +1454,6 @@
     "description": "Tooltip for 'hideHeader' builder field",
     "originalDefault": "Do not display the configured label and top line as the header in the fieldset."
   },
-  "uuKVtO": {
-    "defaultMessage": "Product",
-    "description": "Label for 'product' builder field",
-    "isTranslated": true,
-    "originalDefault": "Product"
-  },
   "vRVMpe": {
     "defaultMessage": "(Standaard)tekst",
     "description": "Translations: property column header",

package.json

@@ -66,7 +66,7 @@
     "@formatjs/cli": "^6.1.1",
     "@formatjs/ts-transformer": "^3.12.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/types": "^0.31.0",
+    "@open-formulieren/types": "^0.32.0",
     "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",

src/components/ComponentConfiguration.stories.tsx

@@ -13,7 +13,6 @@ import {
   DEFAULT_COLORS,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
-  DEFAULT_PRODUCTS,
 } from '@/tests/sharedUtils';
 import {AnyComponentSchema} from '@/types';
 
@@ -114,7 +113,6 @@ const Template: StoryFn<TemplateArgs> = ({
     getDocumentTypes={async () => DEFAULT_DOCUMENT_TYPES}
     getConfidentialityLevels={async () => CONFIDENTIALITY_LEVELS}
     getAuthPlugins={async () => DEFAULT_AUTH_PLUGINS}
-    getProducts={async () => DEFAULT_PRODUCTS}
     component={component}
     isNew={isNew}
     builderInfo={builderInfo}
@@ -2300,7 +2298,6 @@ export const ProductPrice: Story = {
       type: 'productPrice',
       key: 'productPrice',
       label: 'A productPrice field',
-      product: '123',
     },
 
     builderInfo: {
@@ -2317,9 +2314,6 @@ export const ProductPrice: Story = {
     const preview = within(canvas.getByTestId('componentPreview'));
 
     await expect(canvas.getByLabelText('Label')).toHaveValue('A productPrice field');
-    await waitFor(async () => {
-      await expect(canvas.getByLabelText('Property Name')).toHaveValue('aProductPriceField');
-    });
     await expect(canvas.getByLabelText('Description')).toHaveValue('');
     await expect(canvas.getByLabelText('Tooltip')).toHaveValue('');
     await expect(canvas.getByLabelText('Show in summary')).toBeChecked();
@@ -2332,26 +2326,9 @@ export const ProductPrice: Story = {
     await userEvent.type(canvas.getByLabelText('Label'), 'Updated preview label');
     await expect(await preview.findByText('Updated preview label')).toBeVisible();
 
-    // Ensure that the manually entered key is kept instead of derived from the label,
-    // even when key/label components are not mounted.
-    const keyInput = canvas.getByLabelText('Property Name');
-    // fireEvent is deliberate, as userEvent.clear + userEvent.type briefly makes the field
-    // not have any value, which triggers the generate-key-from-label behaviour.
-    fireEvent.change(keyInput, {target: {value: 'customKey'}});
     await userEvent.click(canvas.getByRole('tab', {name: 'Basic'}));
     await userEvent.clear(canvas.getByLabelText('Label'));
     await userEvent.type(canvas.getByLabelText('Label'), 'Other label', {delay: 50});
-    await expect(canvas.getByLabelText('Property Name')).toHaveDisplayValue('customKey');
-
-    await step('Change Product', async () => {
-      canvas.getByLabelText('Product').focus();
-      await userEvent.keyboard('[ArrowDown]');
-      await waitFor(async () => {
-        const product1 = canvas.getByText('product 1');
-        await expect(product1).toBeVisible();
-        await userEvent.click(product1);
-      });
-    });
 
     await step('Submit form', async () => {
       await userEvent.click(canvas.getByRole('button', {name: 'Save'}));

src/components/ComponentConfiguration.tsx

@@ -44,7 +44,6 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
   getDocumentTypes,
   getConfidentialityLevels,
   getAuthPlugins,
-  getProducts,
   isNew,
   component,
   builderInfo,
@@ -72,7 +71,6 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
         getDocumentTypes,
         getConfidentialityLevels,
         getAuthPlugins,
-        getProducts,
       }}
     >
       <ComponentEditForm

src/components/ComponentPreview.stories.tsx

@@ -1024,7 +1024,6 @@ export const ProductPrice: Story = {
       label: 'Product price preview',
       description: 'A preview of the product price Formio component',
       hidden: true, // must be ignored
-      product: '123',
     },
   },
 

src/context.ts

@@ -48,7 +48,6 @@ export interface BuilderContextType {
   getDocumentTypes: () => Promise<Array<DocumentTypeOption>>;
   getConfidentialityLevels: () => Promise<SelectOption[]>;
   getAuthPlugins: () => Promise<AuthPluginOption[]>;
-  getProducts: () => Promise<SelectOption[]>;
 }
 
 const BuilderContext = React.createContext<BuilderContextType>({
@@ -66,7 +65,6 @@ const BuilderContext = React.createContext<BuilderContextType>({
   getDocumentTypes: async () => [],
   getConfidentialityLevels: async () => [],
   getAuthPlugins: async () => [],
-  getProducts: async () => [],
 });
 
 BuilderContext.displayName = 'BuilderContext';

src/registry/productPrice/edit.tsx

@@ -1,27 +1,22 @@
 import {ProductPriceComponentSchema} from '@open-formulieren/types';
-import {useContext} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
-import useAsync from 'react-use/esm/useAsync';
+import {useIntl} from 'react-intl';
 
 import {
   BuilderTabs,
   ClearOnHide,
   Description,
   Hidden,
   IsSensitiveData,
-  Key,
   Label,
   PresentationConfig,
   Registration,
   SimpleConditional,
   Tooltip,
   Translations,
   Validate,
-  useDeriveComponentKey,
 } from '@/components/builder';
 import {LABELS} from '@/components/builder/messages';
-import {Select, TabList, TabPanel, Tabs} from '@/components/formio';
-import {BuilderContext} from '@/context';
+import {TabList, TabPanel, Tabs} from '@/components/formio';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
@@ -31,7 +26,6 @@ import {EditFormDefinition} from '../types';
  */
 const EditForm: EditFormDefinition<ProductPriceComponentSchema> = () => {
   const intl = useIntl();
-  const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
   const {hasAnyError} = useErrorChecker<ProductPriceComponentSchema>();
 
   Validate.useManageValidatorsTranslations<ProductPriceComponentSchema>(['required']);
@@ -42,16 +36,14 @@ const EditForm: EditFormDefinition<ProductPriceComponentSchema> = () => {
         <BuilderTabs.Basic
           hasErrors={hasAnyError(
             'label',
-            'key',
             'description',
             'tooltip',
             'showInSummary',
             'showInEmail',
             'showInPDF',
             'hidden',
             'clearOnHide',
-            'isSensitiveData',
-            'product'
+            'isSensitiveData'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -63,14 +55,12 @@ const EditForm: EditFormDefinition<ProductPriceComponentSchema> = () => {
       {/* Basic tab */}
       <TabPanel>
         <Label />
-        <Key isManuallySetRef={isKeyManuallySetRef} generatedValue={generatedKey} />
         <Description />
         <Tooltip />
         <PresentationConfig />
         <Hidden />
         <ClearOnHide />
         <IsSensitiveData />
-        <Product />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -107,7 +97,7 @@ const EditForm: EditFormDefinition<ProductPriceComponentSchema> = () => {
 EditForm.defaultValues = {
   // basic tab
   label: '',
-  key: '',
+  key: 'priceOption',
   description: '',
   tooltip: '',
   showInSummary: true,
@@ -116,7 +106,6 @@ EditForm.defaultValues = {
   hidden: false,
   clearOnHide: true,
   isSensitiveData: false,
-  product: '',
   // Advanced tab
   conditional: {
     show: undefined,
@@ -134,32 +123,4 @@ EditForm.defaultValues = {
   },
 };
 
-const Product: React.FC = () => {
-  const {getProducts} = useContext(BuilderContext);
-  const {value: options, loading, error} = useAsync(async () => await getProducts(), []);
-  if (error) {
-    throw error;
-  }
-
-  const intl = useIntl();
-  const tooltip = intl.formatMessage({
-    description: "Tooltip for 'product' builder field",
-    defaultMessage: 'Product to fetch prices for',
-  });
-  return (
-    <Select
-      name="product"
-      label={
-        <FormattedMessage
-          description="Label for 'product' builder field"
-          defaultMessage="Product"
-        />
-      }
-      options={options}
-      isLoading={loading}
-      tooltip={tooltip}
-    />
-  );
-};
-
 export default EditForm;

src/tests/sharedUtils.tsx

@@ -235,17 +235,6 @@ export const DEFAULT_COLORS: ColorOption[] = [
   },
 ];
 
-export const DEFAULT_PRODUCTS: SelectOption[] = [
-  {
-    label: 'product 1',
-    value: '1234',
-  },
-  {
-    label: 'product 2',
-    value: '5678',
-  },
-];
-
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }

src/tests/test-utils.tsx

@@ -18,7 +18,6 @@ import {
   DEFAULT_FILE_TYPES,
   DEFAULT_PREFILL_ATTRIBUTES,
   DEFAULT_PREFILL_PLUGINS,
-  DEFAULT_PRODUCTS,
   DEFAULT_REGISTRATION_ATTRIBUTES,
   DEFAULT_VALIDATOR_PLUGINS,
   sleep,
@@ -94,7 +93,6 @@ const contextRender = (
               getConfidentialityLevels: async () =>
                 builderOptions.confidentialityLevels || CONFIDENTIALITY_LEVELS,
               getAuthPlugins: async () => DEFAULT_AUTH_PLUGINS,
-              getProducts: async () => DEFAULT_PRODUCTS,
             }}
           >
             {children}
@@ -174,7 +172,6 @@ const dummyBuilderContext = {
   getDocumentTypes: async () => [],
   getConfidentialityLevels: async () => [],
   getAuthPlugins: async () => [],
-  getProducts: async () => [],
 } satisfies BuilderContextType;
 
 // re-export everything (see https://testing-library.com/docs/react-testing-library/setup/#custom-render)