Melhora funcionamento do seletor de contribuição financeira

resources/views/components/input/text.blade.php

@@ -26,6 +26,13 @@
             @elseif ($mask === 'phone')
                 phone: true,
                 phoneRegionCode: 'BR'
+            @elseif ($mask === 'currency')
+                delimiter: '.',
+                numeralDecimalMark: ',',
+                numeral: true,
+                numeralPositiveOnly: true,
+                numeralThousandsGroupStyle: 'none',
+                numeralDecimalScale: 0,
             @endif
         });
     </script>

resources/views/livewire/auth/register/individual.blade.php

@@ -217,21 +217,45 @@
                         <x-input.textarea wire:model.lazy="profile.bike_use" id="profile-bike_use" placeholder="Realiza atividades ou participa para promover a bicicleta (descreva brevemente)?" :state="$errors->has('profile.bike_use') ? false : null" />
                     </x-input.group>
 
-                    <x-input.radio-group label="{{ __('users.attributes.contribution') }}" for="contribution" :error="$errors->first('contribution')">
+                    <x-input.radio-group
+                        x-data="{ custom_contribution: false }"
+                        @click="custom_contribution = false"
+                        label="{{ __('users.attributes.contribution') }}"
+                        for="contribution"
+                        :error="$errors->first('contribution')"
+                    >
+
                         <x-input.radio wire:model.lazy="contribution" name="contribution" label="Não desejo contribuir" value="0" :state="$errors->has('contribution') ? false : null" required />
                         <x-input.radio wire:model.lazy="contribution" name="contribution" label="R$ 15,00" value="15" :state="$errors->has('contribution') ? false : null" required />
                         <x-input.radio wire:model.lazy="contribution" name="contribution" label="R$ 30,00" value="30" :state="$errors->has('contribution') ? false : null" required />
                         <x-input.radio wire:model.lazy="contribution" name="contribution" label="R$ 60,00" value="60" :state="$errors->has('contribution') ? false : null" required />
                         <x-input.radio wire:model.lazy="contribution" name="contribution" label="R$ 120,00" value="120" :state="$errors->has('contribution') ? false : null" required />
-                        <x-input.radio name="contribution" :state="$errors->has('contribution') ? false : null" required>
-
-                            <span class="text-sm">
-                                Outro:
-                            </span>
 
-                            <x-input.text wire:model.lazy="contribution" :state="$errors->has('contribution') ? false : null" />
+                        <x-input.radio
+                            name="contribution"
+                            @click="
+                                $event.stopPropagation();
+                                custom_contribution = true;
+                                $nextTick(() => { $refs.customContributionInput.focus() });
+                            "
+                            :state="$errors->has('contribution') ? false : null"
+                            required
+                        >
+
+                            <span class="text-sm">Outro</span>
+
+                            <x-input.text
+                                wire:model.lazy="contribution"
+                                x-ref="customContributionInput"
+                                @click="$event.stopPropagation();"
+                                x-show="custom_contribution"
+                                id="contribution-other"
+                                mask="currency"
+                                :state="$errors->has('contribution') ? false : null"
+                            />
 
                         </x-input.radio>
+
                     </x-input.radio-group>
 
                 </div>