Merge pull request #51 from farrah-deriv/my-profile-fix

farrah/ fix: bugs on My profile page
deriv-com · May 7, 2024 · ff59f80 · ff59f80
2 parents 1e8f53b + 4f3f847
commit ff59f80
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 24 deletions.
diff --git a/src/components/ProfileContent/ProfileBalance/ProfileBalance.scss b/src/components/ProfileContent/ProfileBalance/ProfileBalance.scss
@@ -11,11 +11,6 @@
     &__amount {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
-
-        @include mobile {
-            gap: 0;
-        }
 
         & div {
             display: flex;
@@ -63,6 +58,10 @@
             display: grid;
             grid-template-columns: 1fr 1fr;
 
+            @include desktop {
+                margin-bottom: 2.8rem;
+            }
+
             @include mobile {
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr 1fr;

diff --git a/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx b/src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx
@@ -62,12 +62,10 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
                     <div className='profile-balance__items'>
                         {dailyLimits.map(({ available, dailyLimit, type }) => (
                             <div className='profile-balance__item' key={type}>
-                                <Text size={isDesktop ? 'sm' : 'xs'}>{type}</Text>
+                                <Text>{type}</Text>
                                 <div className='profile-balance__item-limits'>
                                     <div data-testid={`dt_profile_balance_daily_${type.toLowerCase()}_limit`}>
-                                        <Text color='less-prominent' size={isDesktop ? 'sm' : 'xs'}>
-                                            Daily limit
-                                        </Text>
+                                        <Text color='less-prominent'>Daily limit</Text>
                                         <Text
                                             className='profile-balance__label'
                                             size={isDesktop ? 'sm' : 'md'}
@@ -77,9 +75,7 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
                                         </Text>
                                     </div>
                                     <div data-testid={`dt_profile_balance_available_${type.toLowerCase()}_limit`}>
-                                        <Text color='less-prominent' size={isDesktop ? 'sm' : 'xs'}>
-                                            Available
-                                        </Text>
+                                        <Text color='less-prominent'>Available</Text>
                                         <Text
                                             className='profile-balance__label'
                                             size={isDesktop ? 'sm' : 'md'}

diff --git a/src/components/Verification/Verification.tsx b/src/components/Verification/Verification.tsx
@@ -1,4 +1,3 @@
-import { useHistory } from 'react-router-dom';
 import { Checklist } from '@/components';
 import { useDevice, usePoiPoaStatus } from '@/hooks/custom-hooks';
 import { DerivLightIcCashierSendEmailIcon } from '@deriv/quill-icons';
@@ -34,7 +33,6 @@ const getPoaAction = (status: string | undefined) => {
 
 const Verification = () => {
     const { isMobile } = useDevice();
-    const history = useHistory();
     const { data, isLoading } = usePoiPoaStatus();
     const { isP2PPoaRequired, isPoaPending, isPoaVerified, isPoiPending, isPoiVerified, poaStatus, poiStatus } =
         data || {};
@@ -49,7 +47,8 @@ const Verification = () => {
             urlParams.forEach((value, key) => updatedUrlParams.append(key, value));
             updatedUrl = `${updatedUrl}&${urlParams.toString()}`;
         }
-        history.push(updatedUrl);
+
+        window.location.href = updatedUrl;
     };
 
     const checklistItems = [
@@ -87,7 +86,7 @@ const Verification = () => {
             <Text className='verification__text' size={isMobile ? 'lg' : 'md'} weight='bold'>
                 Verify your P2P account
             </Text>
-            <Text align='center' className='verification__text' size={isMobile ? 'lg' : 'md'}>
+            <Text align='center' className='verification__text' size={isMobile ? 'lg' : 'sm'}>
                 Verify your identity and address to use Deriv P2P.
             </Text>
             <Checklist items={checklistItems} />

diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
@@ -15,6 +15,7 @@
 
     &__border {
         border-top: 2px solid #f2f3f4;
+        width: 100%;
     }
 
     &__mobile-wrapper {

diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
@@ -3,7 +3,7 @@ import { THooks } from 'types';
 import { FullPageMobileWrapper, TextArea } from '@/components';
 import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
-import { Button, Loader, useDevice } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
 import './MyProfileAdDetails.scss';
 
 type TMYProfileAdDetailsTextAreaProps = {
@@ -20,15 +20,17 @@ const MyProfileAdDetailsTextArea = ({
     return (
         <>
             <TextArea
+                label='Contact details'
+                maxLength={300}
                 onChange={e => setContactInfo((e.target as HTMLInputElement).value)}
-                placeholder='My contact details'
                 testId='dt_profile_ad_details_contact'
                 value={advertiserInfo?.contact_info || ''}
             />
             <TextArea
-                label='This information will be visible to everyone.'
+                hint='This information will be visible to everyone.'
+                label='Instructions'
+                maxLength={300}
                 onChange={e => setAdvertDescription((e.target as HTMLInputElement).value)}
-                placeholder='Instructions'
                 testId='dt_profile_ad_details_description'
                 value={advertiserInfo?.default_advert_description || ''}
             />
@@ -37,7 +39,7 @@ const MyProfileAdDetailsTextArea = ({
 };
 
 const MyProfileAdDetails = () => {
-    const { data: advertiserInfo, isLoading } = api.advertiser.useGetInfo();
+    const { data: advertiserInfo } = api.advertiser.useGetInfo();
     const { mutate: updateAdvertiser } = api.advertiser.useUpdate();
     const [contactInfo, setContactInfo] = useState('');
     const [advertDescription, setAdvertDescription] = useState('');
@@ -63,7 +65,8 @@ const MyProfileAdDetails = () => {
         });
     };
 
-    if (isLoading) return <Loader />;
+    //TODO: Uncomment once isLoading is implemented from api-hooks
+    //if (isLoading) return <Loader />;
 
     if (isMobile) {
         return (

diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
@@ -29,7 +29,7 @@ const PaymentMethodsEmpty = ({ onAddPaymentMethod }: TPaymentMethodsEmptyProps)
                 }}
                 renderHeader={() => (
                     <Text size='lg' weight='bold'>
-                        Payment Methods
+                        Payment methods
                     </Text>
                 )}
             >

diff --git a/src/routes/AppContent/index.scss b/src/routes/AppContent/index.scss
@@ -5,7 +5,7 @@
     @include desktop {
         max-width: 952px;
         min-width: 672px;
-        margin-left: 2.4rem;
+        margin: 0 auto;
     }
 
     @include mobile {