Feat/contract details deu

example/src/Onboarding.tsx

@@ -374,7 +374,7 @@ const OnboardingWithProps = ({
           },
           DEU: {
             // Germany
-            contract_details: 1,
+            contract_details: 4,
           },
           BLR: {
             // Belarus

src/components/form/fields/default/RadioGroupFieldDefault.tsx

@@ -8,14 +8,15 @@ import {
 } from '@/src/components/ui/form';
 import { RadioGroup, RadioGroupItem } from '@/src/components/ui/radio-group';
 import { cn } from '@/src/lib/utils';
-import { FieldComponentProps } from '@/src/types/fields';
+import { RadioGroupComponentProps } from '@/src/types/fields';
 import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
+import { Badge } from '@/src/components/ui/badge';
 
 export const RadioGroupFieldDefault = ({
   field,
   fieldData,
   fieldState,
-}: FieldComponentProps) => {
+}: RadioGroupComponentProps) => {
   const { name, label, description, options } = fieldData;
   return (
     <fieldset
@@ -38,24 +39,32 @@ export const RadioGroupFieldDefault = ({
               field.onChange(value);
             }}
             value={field.value}
-            className='flex flex-col space-y-3'
+            className='flex flex-col'
           >
             {options?.map((option) => (
               <Fragment key={option.value}>
                 <FormItem
                   data-field={name}
-                  className='flex items-start space-x-3 space-y-0 gap-0 RemoteFlows__RadioField__Item'
+                  className='flex items-start space-x-3 space-y-0 gap-0 min-h-[24px] RemoteFlows__RadioField__Item'
                 >
                   <FormControl>
                     <RadioGroupItem
                       value={option.value}
-                      className='RemoteFlows__RadioField__Input'
+                      className={cn(
+                        'RemoteFlows__RadioField__Input',
+                        option.recommended && 'mt-1',
+                      )}
                       disabled={option.disabled}
                     />
                   </FormControl>
                   <div>
                     <FormLabel className='font-normal mb-0 RemoteFlows__RadioField__Label'>
-                      {option.label}
+                      {option.label}{' '}
+                      {option.recommended && (
+                        <Badge variant='secondary' className='ml-2'>
+                          Recommended
+                        </Badge>
+                      )}
                     </FormLabel>
                     {option.description && (
                       <FormDescription className='mt-2'>

src/types/fields.ts

@@ -147,3 +147,22 @@ export type PricingPlanComponentProps = Omit<
 export type TelFieldComponentProps = Omit<FieldComponentProps, 'fieldData'> & {
   fieldData: TelFieldDataProps;
 };
+
+type RadioGroupDataProps = Omit<FieldDataProps, 'options'> & {
+  options?: Array<{
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    recommended?: boolean;
+    nested_field?: string;
+    meta?: Record<string, unknown>;
+  }>;
+};
+
+export type RadioGroupComponentProps = Omit<
+  FieldComponentProps,
+  'fieldData'
+> & {
+  fieldData: RadioGroupDataProps;
+};

src/types/remoteFlows.ts

@@ -14,6 +14,7 @@ import {
   TextFieldComponentProps,
   WorkScheduleComponentProps,
   TelFieldComponentProps,
+  RadioGroupComponentProps,
 } from '@/src/types/fields';
 
 type AuthResponse = {
@@ -137,6 +138,7 @@ type FieldComponentTypes = Exclude<
   | 'money'
   | 'date'
   | 'tel'
+  | 'radio'
 >;
 
 export type Components = {
@@ -155,6 +157,7 @@ export type Components = {
   'work-schedule'?: React.ComponentType<WorkScheduleComponentProps>;
   pdfViewer?: React.ComponentType<PDFPreviewComponentProps>;
   tel?: React.ComponentType<TelFieldComponentProps>;
+  radio?: React.ComponentType<RadioGroupComponentProps>;
 };
 
 export type RemoteFlowsSDKProps = Omit<ThemeProviderProps, 'children'> & {