From 73ef12db7209a53b76dcaa91f5da22eaefb1242e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 27 Feb 2023 10:44:52 +0100
Subject: [PATCH] :recycle: Better phone input props pass

---
 packages/js/src/components/InputChatBlock.tsx |  5 ++++-
 .../inputs/phone/components/PhoneInput.tsx    | 19 ++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/js/src/components/InputChatBlock.tsx b/packages/js/src/components/InputChatBlock.tsx
index 290cbbd30..4afc44444 100644
--- a/packages/js/src/components/InputChatBlock.tsx
+++ b/packages/js/src/components/InputChatBlock.tsx
@@ -146,7 +146,10 @@ const Input = (props: {
       </Match>
       <Match when={props.block.type === InputBlockType.PHONE}>
         <PhoneInput
-          block={props.block as PhoneNumberInputBlock}
+          labels={(props.block as PhoneNumberInputBlock).options.labels}
+          defaultCountryCode={
+            (props.block as PhoneNumberInputBlock).options.defaultCountryCode
+          }
           defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
           hasGuestAvatar={props.hasGuestAvatar}
diff --git a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
index 32955b4ff..92a1138c1 100644
--- a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
+++ b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
@@ -2,24 +2,23 @@ import { ShortTextInput } from '@/components'
 import { SendButton } from '@/components/SendButton'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
-import type { PhoneNumberInputBlock } from 'models'
+import type { PhoneNumberInputOptions } from 'models'
 import { createSignal, For, onMount } from 'solid-js'
 import { isEmpty } from 'utils'
 import { phoneCountries } from 'utils/phoneCountries'
 
-type PhoneInputProps = {
-  block: PhoneNumberInputBlock
+type PhoneInputProps = Pick<
+  PhoneNumberInputOptions,
+  'labels' | 'defaultCountryCode'
+> & {
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
   hasGuestAvatar: boolean
 }
 
 export const PhoneInput = (props: PhoneInputProps) => {
-  // eslint-disable-next-line solid/reactivity
-  const defaultCountryCode = props.block.options.defaultCountryCode
-
   const [selectedCountryCode, setSelectedCountryCode] = createSignal(
-    isEmpty(defaultCountryCode) ? 'INT' : defaultCountryCode
+    isEmpty(props.defaultCountryCode) ? 'INT' : props.defaultCountryCode
   )
   const [inputValue, setInputValue] = createSignal(props.defaultValue ?? '')
   let inputRef: HTMLInputElement | undefined
@@ -102,9 +101,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
           ref={inputRef}
           value={inputValue()}
           onInput={handleInput}
-          placeholder={
-            props.block.options.labels.placeholder ?? 'Your phone number...'
-          }
+          placeholder={props.labels.placeholder ?? 'Your phone number...'}
           autofocus={!isMobile()}
         />
       </div>
@@ -115,7 +112,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
         class="my-2 ml-2"
         on:click={submit}
       >
-        {props.block.options?.labels?.button ?? 'Send'}
+        {props.labels?.button ?? 'Send'}
       </SendButton>
     </div>
   )