feat(checkout): CHECKOUT-10226 Show Placeholder for Extra Dropdown Field

package.json

@@ -48,7 +48,7 @@
   "prettier": "@bigcommerce/eslint-config/prettier",
   "homepage": "https://github.com/bigcommerce/checkout-js#readme",
   "dependencies": {
-    "@bigcommerce/checkout-sdk": "^1.939.0",
+    "@bigcommerce/checkout-sdk": "^1.942.2",
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/form-poster": "^1.2.2",
     "@bigcommerce/memoize": "^1.0.0",

packages/core/src/app/address/AddressForm.test.tsx

@@ -92,6 +92,35 @@ describe('AddressForm Component', () => {
         expect(screen.getByTestId('google-autocomplete-form-field')).toBeInTheDocument();
     });
 
+    it('renders translated placeholder as first option of extra dropdown field', () => {
+        const extraDropdownField = {
+            custom: false,
+            default: '',
+            id: 'b2bExtraField_1',
+            label: 'Extra Dropdown Field',
+            name: 'b2bExtraField_1',
+            required: false,
+            fieldType: 'dropdown',
+            type: 'string',
+            options: {
+                items: [
+                    { value: 'option1', label: 'Option 1' },
+                    { value: 'option2', label: 'Option 2' },
+                ],
+            },
+        } as FormField;
+
+        renderAddressFormComponent({
+            formFields: [...formFields, extraDropdownField],
+        });
+
+        const placeholderOption = screen.getByRole('option', { name: 'Please Select' });
+
+        expect(placeholderOption).toBeInTheDocument();
+        expect(placeholderOption).toHaveValue('');
+        expect(screen.getByRole('option', { name: 'Option 1' })).toBeInTheDocument();
+    });
+
     it('updates field with new value', async () => {
         const onChange = jest.fn();
         const fieldValue = 'test';

packages/core/src/app/address/AddressForm.tsx

@@ -141,6 +141,10 @@ const AddressForm: React.FC<AddressFormProps> = ({
                 return field.default;
             }
 
+            if (isExtraField(field) && field.fieldType === DynamicFormFieldType.DROPDOWN) {
+                return language.translate('common.please_select_text');
+            }
+
             return translatedPlaceholderId && language.translate(translatedPlaceholderId);
         },
         [language],

packages/core/src/app/payment/Payment.test.tsx

@@ -978,7 +978,13 @@ describe('Payment step', () => {
                             ...orderResponse,
                             data: {
                                 ...orderResponse.data,
-                                b2bContext: { billingAddressId: 111, shippingAddressId: 222 },
+                                order: {
+                                    ...orderResponse.data.order,
+                                    b2bMetadata: {
+                                        billingAddressId: 111,
+                                        shippingAddressId: 222,
+                                    },
+                                },
                             },
                         }),
                     ),

packages/core/src/app/payment/orderExtraFields/OrderExtraFieldsFieldset.test.tsx

@@ -1,15 +1,18 @@
-import { createLanguageService, type FormField } from '@bigcommerce/checkout-sdk';
+import { type FormField } from '@bigcommerce/checkout-sdk';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
 import React from 'react';
 
 import { LocaleContext, type LocaleContextType } from '@bigcommerce/checkout/contexts';
+import { createLocaleContext } from '@bigcommerce/checkout/locale';
 import { render, screen } from '@bigcommerce/checkout/test-utils';
 
+import { getStoreConfig } from '../../config/config.mock';
+
 import OrderExtraFieldsFieldset from './OrderExtraFieldsFieldset';
 
 describe('OrderExtraFieldsFieldset', () => {
-    const localeContext: LocaleContextType = { language: createLanguageService() };
+    const localeContext: LocaleContextType = createLocaleContext(getStoreConfig());
 
     const extraField: FormField = {
         custom: false,
@@ -44,6 +47,23 @@ describe('OrderExtraFieldsFieldset', () => {
         type: 'string',
     } as FormField;
 
+    const dropdownExtraField: FormField = {
+        custom: false,
+        default: '',
+        id: 'b2bExtraField_300',
+        label: 'Shipping Priority',
+        name: 'b2bExtraField_300',
+        required: true,
+        fieldType: 'dropdown',
+        type: 'string',
+        options: {
+            items: [
+                { value: 'high', label: 'High' },
+                { value: 'low', label: 'Low' },
+            ],
+        },
+    } as FormField;
+
     const renderFieldset = (formFields: FormField[]) =>
         render(
             <LocaleContext.Provider value={localeContext}>
@@ -79,4 +99,20 @@ describe('OrderExtraFieldsFieldset', () => {
 
         expect(screen.queryByTestId('order-extra-fields')).not.toBeInTheDocument();
     });
+
+    it('renders translated placeholder as first option of dropdown extra field', () => {
+        renderFieldset([dropdownExtraField]);
+
+        const options = screen.getAllByRole('option');
+
+        expect(options[0]).toHaveTextContent('Please Select');
+        expect(options[0]).toHaveValue('');
+        expect(options).toHaveLength(3);
+    });
+
+    it('does not render placeholder for non-dropdown extra fields', () => {
+        renderFieldset([extraField]);
+
+        expect(screen.queryByText('Please Select')).not.toBeInTheDocument();
+    });
 });

packages/core/src/app/payment/orderExtraFields/OrderExtraFieldsFieldset.tsx

@@ -1,7 +1,8 @@
 import { type FormField, isExtraField } from '@bigcommerce/checkout-sdk/essential';
 import React, { type FunctionComponent } from 'react';
 
-import { DynamicFormField } from '@bigcommerce/checkout/ui';
+import { useLocale } from '@bigcommerce/checkout/contexts';
+import { DynamicFormField, DynamicFormFieldType } from '@bigcommerce/checkout/ui';
 
 interface OrderExtraFieldsFieldsetProps {
     formFields: FormField[];
@@ -12,6 +13,7 @@ const OrderExtraFieldsFieldset: FunctionComponent<OrderExtraFieldsFieldsetProps>
     formFields,
     isFloatingLabelEnabled,
 }) => {
+    const { language } = useLocale();
     const extraFields = formFields.filter((field) => isExtraField(field));
 
     if (extraFields.length === 0) {
@@ -27,6 +29,11 @@ const OrderExtraFieldsFieldset: FunctionComponent<OrderExtraFieldsFieldsetProps>
                     key={`${field.id}-${field.name}`}
                     label={field.label}
                     parentFieldName="orderExtraFields"
+                    placeholder={
+                        field.fieldType === DynamicFormFieldType.DROPDOWN
+                            ? language.translate('common.please_select_text')
+                            : undefined
+                    }
                 />
             ))}
         </div>

packages/locale/src/translations/en.json

@@ -120,6 +120,7 @@
             "error_code": "Error code:",
             "request_id": "Request ID:",
             "optional_text": "(Optional)",
+            "please_select_text": "Please Select",
             "unavailable_error": "Checkout is temporarily unavailable. Please try again later.",
             "unavailable_heading": "Checkout is temporarily unavailable",
             "unstable_network_error": "It looks like the server is taking too long to respond, this can be caused by either poor connectivity or an error with our servers. Please try again in a while.",