Revert "Replace the usages of react-phone-input-2 with `antd-phone-…

…input`"

This reverts commit 31c0845.

package.json

@@ -28,7 +28,6 @@
         "@sentry/browser": "^7.57.0",
         "aidbox-react": "^1.7.1",
         "antd": "^5.6.4",
-        "antd-phone-input": "^0.2.2",
         "classnames": "^2.3.2",
         "fhir-react": "https://github.com/beda-software/fhir-react.git",
         "fullcalendar": "^6.1.8",
@@ -43,6 +42,7 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.45.1",
+        "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.14.1",
         "react-select": "^5.7.3",
         "sass": "^1.63.6",

src/components/BaseQuestionnaireResponseForm/index.tsx

@@ -24,6 +24,8 @@ import * as yup from 'yup';
 
 import { isSuccess, loading, RemoteData } from 'fhir-react/lib/libs/remoteData';
 
+import 'react-phone-input-2/lib/style.css';
+
 import { saveQuestionnaireResponseDraft } from 'src/components/QuestionnaireResponseForm';
 import { questionnaireToValidationSchema } from 'src/utils/questionnaire';
 

src/components/BaseQuestionnaireResponseForm/widgets/PhoneInput/PhoneInput.styles.ts

@@ -0,0 +1,61 @@
+import styled from 'styled-components/macro';
+
+export const S = {
+    Container: styled.div`
+        display: flex;
+        width: fit-content;
+
+        .react-phone-input {
+            border-color: ${({ theme }) => theme.antdTheme?.colorBorder};
+            height: 32px;
+            box-shadow: none;
+            border-radius: 6px;
+            background-color: ${({ theme }) => theme.antdTheme?.colorBgContainer};
+        }
+
+        .react-phone-input__button {
+            background-color: ${({ theme }) => theme.antdTheme?.colorBgContainer};
+            border-color: ${({ theme }) => theme.antdTheme?.colorBorder};
+        }
+
+        .flag-dropdown {
+            border-radius: 6px 0 0 6px !important;
+            background: 0 !important;
+        }
+
+        .selected-flag {
+            background: 0 !important;
+        }
+
+        &:hover {
+            .react-phone-input,
+            .react-phone-input__button {
+                border-color: ${({ theme }) => theme.primary};
+            }
+        }
+
+        .country-list {
+            background-color: ${({ theme }) => theme.antdTheme?.colorBgContainer};
+            border-radius: 8px;
+            padding: 4px;
+        }
+
+        .country {
+            padding: 5px 12px !important;
+            font-size: 14px;
+            border-radius: 4px;
+            transition: background 0.3s ease;
+            cursor: pointer;
+            color: ${({ theme }) => theme.antdTheme?.colorText};
+
+            &:hover {
+                background-color: ${({ theme }) => theme.antdTheme?.controlItemBgHover} !important;
+            }
+
+            &.country.active {
+                font-weight: 600;
+                background-color: ${({ theme }) => theme.primaryPalette.bcp_1} !important;
+            }
+        }
+    `,
+};

src/components/BaseQuestionnaireResponseForm/widgets/PhoneInput/index.tsx

@@ -1,24 +1,38 @@
 import { Form } from 'antd';
-import PhoneInput from 'antd-phone-input';
+import classNames from 'classnames';
+import { useState } from 'react';
+import PI, { PhoneInputProps } from 'react-phone-input-2';
 import { QuestionItemProps } from 'sdc-qrf';
 
+import { S } from './PhoneInput.styles';
 import { useFieldController } from '../../hooks';
 
+// https://github.com/bl00mber/react-phone-input-2/issues/533#issuecomment-1508211907
+const PhoneInput: React.FC<PhoneInputProps> = (PI as any).default || PI;
+
 export function QuestionPhone({ parentPath, questionItem }: QuestionItemProps) {
     const { linkId } = questionItem;
     const fieldName = [...parentPath, linkId, 0, 'value', 'string'];
     const { value, onChange, disabled, formItem } = useFieldController(fieldName, questionItem);
+    const [focused, setFocused] = useState(false);
 
     return (
         <Form.Item {...formItem}>
-            <PhoneInput
-                country="us"
-                value={value}
-                disabled={disabled}
-                onChange={({ countryCode, areaCode, phoneNumber }) => {
-                    onChange([countryCode, areaCode, phoneNumber].filter(Boolean).join(''));
-                }}
-            />
+            <S.Container>
+                <PhoneInput
+                    country={'us'}
+                    value={value}
+                    onChange={(phone) => onChange(phone)}
+                    disabled={disabled}
+                    inputClass={'react-phone-input'}
+                    containerClass={classNames({
+                        _focused: focused,
+                    })}
+                    buttonClass={'react-phone-input__button'}
+                    onFocus={() => setFocused(true)}
+                    onBlur={() => setFocused(false)}
+                />
+            </S.Container>
         </Form.Item>
     );
 }