Metadata field input mode. Bump sentry (#153)

package.json

@@ -16,8 +16,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@dinero.js/currencies": "^2.0.0-alpha.8",
-    "@sentry/react": "^7.13.0",
-    "@sentry/tracing": "^7.13.0",
+    "@sentry/react": "^7.16.0",
+    "@sentry/tracing": "^7.16.0",
     "card-validator": "8.1.1",
     "credit-card-type": "9.1.0",
     "date-fns": "~1.28.5",

src/app/backend/model/service-provider-metadata/service-provider-metadata.ts

@@ -12,14 +12,18 @@ export interface MetadataFieldFormatter {
     maxLength?: number;
 }
 
+export type AttributeType = JSX.IntrinsicElements['input']['type'];
+export type AttributeInputMode = JSX.IntrinsicElements['input']['inputMode'];
+
 export interface ServiceProviderMetadataField {
-    type: JSX.IntrinsicElements['input']['type'];
+    type: AttributeType;
     name: string;
     required: boolean;
     pattern?: string;
     localization?: MetadataTextLocalization;
     index?: number;
     formatter?: MetadataFieldFormatter;
+    inputMode?: AttributeInputMode;
 }
 
 export interface MetadataSelectSource {

src/app/components/ui/metadata/metadata-field/metadata-field.tsx

@@ -4,7 +4,13 @@ import { Field, Validator, WrappedFieldProps } from 'redux-form';
 import isNil from 'lodash-es/isNil';
 import partialRight from 'lodash-es/partialRight';
 
-import { MetadataFieldFormatter, MetadataTextLocalization, ServiceProviderMetadataField } from 'checkout/backend';
+import {
+    AttributeInputMode,
+    AttributeType,
+    MetadataFieldFormatter,
+    MetadataTextLocalization,
+    ServiceProviderMetadataField
+} from 'checkout/backend';
 import { formatPhoneNumber, isError, formatOnFocus, validateEmail, validatePhone } from 'checkout/utils';
 import { Input } from 'checkout/components';
 import { getInputTypeFormatter, getMetadataFieldFormatter } from './formatters';
@@ -40,13 +46,14 @@ const getPlaceholder = (localeCode: string, localization: MetadataTextLocalizati
     localization[localeCode] || localization['en'];
 
 const WrappedInput: React.FC<WrappedFieldProps & {
-    type: string;
+    type: AttributeType;
     name: string;
     localization: MetadataTextLocalization;
     localeCode: string;
     required: boolean;
-    formatter?: ServiceProviderMetadataField['formatter'];
-}> = ({ type, name, input, meta, localeCode, localization, formatter }) => (
+    formatter: MetadataFieldFormatter;
+    inputMode: AttributeInputMode;
+}> = ({ type, name, input, meta, localeCode, localization, formatter, inputMode }) => (
     <Input
         {...input}
         {...meta}
@@ -58,6 +65,7 @@ const WrappedInput: React.FC<WrappedFieldProps & {
         onInput={getOnInputHandler(type, formatter)}
         onFocus={getOnFocusHandler(type)}
         autocomplete={getAutocomplete(type)}
+        inputMode={inputMode}
     />
 );
 
@@ -90,7 +98,7 @@ export interface MetadataFieldProps {
 }
 
 export const MetadataField: React.FC<MetadataFieldProps> = ({
-    metadata: { name, type, required, pattern, localization, formatter },
+    metadata: { name, type, required, pattern, localization, formatter, inputMode },
     localeCode,
     wrappedName
 }) => {
@@ -99,7 +107,7 @@ export const MetadataField: React.FC<MetadataFieldProps> = ({
         <Field
             name={wrappedName ? `${wrappedName}.${name}` : name}
             component={WrappedInput}
-            props={{ type, name, localization, localeCode, required, formatter }}
+            props={{ type, name, localization, localeCode, required, formatter, inputMode }}
             validate={validate}
         />
     );