[maykinmedia/open-producten#24] remove product attribute from 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

@@ -594,11 +594,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",
@@ -1429,11 +1424,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

@@ -603,11 +603,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",
@@ -1449,12 +1444,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",

src/components/ComponentConfiguration.stories.tsx

@@ -9,7 +9,6 @@ import {
   DEFAULT_COLORS,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
-  DEFAULT_PRODUCTS,
 } from '@/tests/sharedUtils';
 import {AnyComponentSchema} from '@/types';
 
@@ -110,7 +109,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}
@@ -2291,7 +2289,6 @@ export const ProductPrice: Story = {
       type: 'productPrice',
       key: 'productPrice',
       label: 'A productPrice field',
-      product: '123',
     },
 
     builderInfo: {
@@ -2334,16 +2331,6 @@ export const ProductPrice: Story = {
     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'}));
       await expect(args.onSubmit).toHaveBeenCalled();

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,7 +1,5 @@
 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,
@@ -20,8 +18,7 @@ import {
   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';
@@ -42,16 +39,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')} />
@@ -70,7 +65,6 @@ const EditForm: EditFormDefinition<ProductPriceComponentSchema> = () => {
         <Hidden />
         <ClearOnHide />
         <IsSensitiveData />
-        <Product />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -107,7 +101,7 @@ const EditForm: EditFormDefinition<ProductPriceComponentSchema> = () => {
 EditForm.defaultValues = {
   // basic tab
   label: '',
-  key: '',
+  key: 'priceOption',
   description: '',
   tooltip: '',
   showInSummary: true,
@@ -116,7 +110,6 @@ EditForm.defaultValues = {
   hidden: false,
   clearOnHide: true,
   isSensitiveData: false,
-  product: '',
   // Advanced tab
   conditional: {
     show: undefined,
@@ -134,32 +127,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)