From bc1819da8902833378ae00327305fd34134503f7 Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Fri, 1 Nov 2024 11:29:42 +0800
Subject: [PATCH 1/2] ahmed/DAPI-810/fix-readme-url-update

---
 src/components/Footer/__tests__/Footer.test.tsx            | 2 +-
 src/components/Footer/index.tsx                            | 2 +-
 src/features/Home/GetStarted/GetStarted.tsx                | 2 +-
 src/features/Home/GetStarted/__tests__/GetStarted.test.tsx | 2 +-
 src/features/Home/HeroHeader/HeroHeader.tsx                | 2 +-
 src/features/dashboard/update-app/AppUpdateForm/index.tsx  | 3 +--
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Footer/__tests__/Footer.test.tsx b/src/components/Footer/__tests__/Footer.test.tsx
index 9c7aba159..ed6392b40 100644
--- a/src/components/Footer/__tests__/Footer.test.tsx
+++ b/src/components/Footer/__tests__/Footer.test.tsx
@@ -13,7 +13,7 @@ describe('Footer Component', () => {
     render(<Footer />);
     const communityButton = screen.getByText(/Join our community/);
     fireEvent.click(communityButton);
-    expect(window.open).toHaveBeenCalledWith('https://deriv.vanillacommunity.com/', '_blank');
+    expect(window.open).toHaveBeenCalledWith('https://community.deriv.com/c/developers/48', '_blank');
   });
 
   it('opens Telegram in a new tab when Telegram button is clicked', () => {
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 91cba4566..0f1c2c3ef 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -240,7 +240,7 @@ const Footer = () => {
                 color='black'
                 fullWidth
                 onClick={() => {
-                  window.open('https://deriv.vanillacommunity.com/', '_blank');
+                  window.open('https://community.deriv.com/c/developers/48', '_blank');
                 }}
               >
                 <Translate>Join our community</Translate>
diff --git a/src/features/Home/GetStarted/GetStarted.tsx b/src/features/Home/GetStarted/GetStarted.tsx
index 0723a06ac..bd9358ef1 100644
--- a/src/features/Home/GetStarted/GetStarted.tsx
+++ b/src/features/Home/GetStarted/GetStarted.tsx
@@ -19,7 +19,7 @@ export const GetStarted = () => {
           <Translate>Get started with our API in 3 simple steps:</Translate>
         </Text>
         <nav className={styles.cardContainer}>
-          <Link to='/docs/category/guides' className={styles.mainPageCard} data-testid='guide'>
+          <Link to="https://developers.deriv.com" className={styles.mainPageCard} data-testid='guide'>
             <img src='/img/guide.svg' className={styles.cardIcon} />
             <section>
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h3'>
diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
index 7a791b197..c8cbcb8b2 100644
--- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
+++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
@@ -25,7 +25,7 @@ describe('GetStarted', () => {
     expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard');
     expect(screen.getByTestId('guide').closest('a')).toHaveAttribute(
       'href',
-      '/docs/category/guides',
+      'https://developers.deriv.com',
     );
   });
 });
diff --git a/src/features/Home/HeroHeader/HeroHeader.tsx b/src/features/Home/HeroHeader/HeroHeader.tsx
index a89c9c3fc..c53ee8045 100644
--- a/src/features/Home/HeroHeader/HeroHeader.tsx
+++ b/src/features/Home/HeroHeader/HeroHeader.tsx
@@ -22,7 +22,7 @@ export const HeroHeader = () => {
           <br />
           <Translate>platform - for yourself or for your business.</Translate>
         </Text>
-        <a href='docs/intro'>
+        <a href="https://developers.deriv.com">
           <Button type='button' className={styles.HeroButton}>
             <Translate>Quick Start</Translate>
           </Button>
diff --git a/src/features/dashboard/update-app/AppUpdateForm/index.tsx b/src/features/dashboard/update-app/AppUpdateForm/index.tsx
index da5b8b60f..161fcbef7 100644
--- a/src/features/dashboard/update-app/AppUpdateForm/index.tsx
+++ b/src/features/dashboard/update-app/AppUpdateForm/index.tsx
@@ -113,8 +113,7 @@ const AppUpdateForm = ({ initialValues, submit, onCancel, is_loading }: TAppForm
             </Translate>{' '}
             <UnderlinedLink
               text={translate({ message: 'documentation' })}
-              linkTo={'/docs/intro/'}
-            />
+              linkTo="https://developers.deriv.com" />
             .
           </Text>
           <SectionMessage

From 9e9b2d517fa97b29f42d55dd68d61c51c4ad1005 Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Fri, 1 Nov 2024 14:09:21 +0800
Subject: [PATCH 2/2] update footer links and order

---
 src/components/Footer/index.tsx | 359 ++++++++++++++++----------------
 1 file changed, 184 insertions(+), 175 deletions(-)

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 0f1c2c3ef..fed71fe04 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -38,11 +38,6 @@ const Footer = () => {
       header: 'API',
       content: (
         <ul className={styles.List}>
-          <li>
-            <a href={footer_links.documentation} className={styles.Link}>
-              <Translate>Documentation</Translate>
-            </a>
-          </li>
           <li>
             <a href={footer_links.dashboard} className={styles.Link}>
               <Translate>Dashboard</Translate>
@@ -53,6 +48,15 @@ const Footer = () => {
               <Translate>API explorer</Translate>
             </a>
           </li>
+          <li>
+            <a
+              href={footer_links.documentation}
+              target='_blank'
+              rel="noreferrer"
+              className={styles.Link}>
+              <Translate>Documentation</Translate> <LabelPairedArrowUpRightSmRegularIcon />
+            </a>
+          </li>
           <li>
             <a
               href='https://deriv.com/derivtech'
@@ -112,186 +116,191 @@ const Footer = () => {
 
   return (
     <div className='container'>
-    <section className={styles.FooterContainer} data-testid='footer-text'>
-      <div className={styles.FooterBody}>
-        <div className={styles.LogoWrapper}>
-          <div className={styles.FooterLogo}>
-            <GrayLogo />
+      <section className={styles.FooterContainer} data-testid='footer-text'>
+        <div className={styles.FooterBody}>
+          <div className={styles.LogoWrapper}>
+            <div className={styles.FooterLogo}>
+              <GrayLogo />
+            </div>
           </div>
-        </div>
-        <div className={styles.FooterSection}>
-          <section className={styles.Section1} data-testid='API-section'>
-            <Heading.H6 data-testid='API-section'>
-              <Translate>API</Translate>
-            </Heading.H6>
-            <ul className={styles.List}>
-              <li>
-                <a href={footer_links.documentation} className={styles.Link}>
-                  <Text className={styles.labelcolor} size='sm'>
-                    <Translate>Documentation</Translate>
-                  </Text>
-                </a>
-              </li>
-              <li>
-                <a href={footer_links.dashboard} className={styles.Link}>
-                  <Text size='sm' className={styles.labelcolor}>
-                    <Translate>Dashboard</Translate>
-                  </Text>
-                </a>
-              </li>
-              <li>
-                <a href={footer_links.api_explorer} className={styles.Link}>
-                  <Text size='sm' className={styles.labelcolor}>
-                    <Translate>API explorer</Translate>
-                  </Text>
-                </a>
-              </li>
-              <li>
-                <a
-                  href='https://deriv.com/derivtech'
-                  target='_blank'
-                  className={styles.Link}
-                  rel='noreferrer'
-                >
-                  <Text size='sm' className={styles.labelcolor}>
-                    <Translate>Deriv Tech</Translate>
-                  </Text>
-                  <LabelPairedArrowUpRightSmRegularIcon />
-                </a>
-              </li>
-              <li>
-                <a
-                  href='https://hackerone.com/deriv?type=team'
-                  target='_blank'
-                  className={styles.Link}
-                  rel='noreferrer'
-                >
-                  <Text size='sm' className={styles.labelcolor}>
-                    <Translate>Bug bounty</Translate>
-                  </Text>
-                  <LabelPairedArrowUpRightSmRegularIcon />
-                </a>
-              </li>
-            </ul>
-          </section>
-          <section className={styles.Section1}>
-            <Heading.H6>Deriv.com</Heading.H6>
-            <ul className={styles.List}>
-              <li>
-                <a
-                  href={footer_links.root}
-                  target='_blank'
-                  className={styles.Link}
-                  rel='noreferrer'
+          <div className={styles.FooterSection}>
+            <section className={styles.Section1} data-testid='API-section'>
+              <Heading.H6 data-testid='API-section'>
+                <Translate>API</Translate>
+              </Heading.H6>
+              <ul className={styles.List}>
+                <li>
+                  <a href={footer_links.dashboard} className={styles.Link}>
+                    <Text size='sm' className={styles.labelcolor}>
+                      <Translate>Dashboard</Translate>
+                    </Text>
+                  </a>
+                </li>
+                <li>
+                  <a href={footer_links.api_explorer} className={styles.Link}>
+                    <Text size='sm' className={styles.labelcolor}>
+                      <Translate>API explorer</Translate>
+                    </Text>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href={footer_links.documentation}
+                    target='_blank'
+                    rel="noreferrer"
+                    className={styles.Link}>
+                    <Text className={styles.labelcolor} size='sm'>
+                      <Translate>Documentation</Translate>
+                    </Text>
+                    <LabelPairedArrowUpRightSmRegularIcon />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href='https://deriv.com/derivtech'
+                    target='_blank'
+                    className={styles.Link}
+                    rel='noreferrer'
+                  >
+                    <Text size='sm' className={styles.labelcolor}>
+                      <Translate>Deriv Tech</Translate>
+                    </Text>
+                    <LabelPairedArrowUpRightSmRegularIcon />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href='https://hackerone.com/deriv?type=team'
+                    target='_blank'
+                    className={styles.Link}
+                    rel='noreferrer'
+                  >
+                    <Text size='sm' className={styles.labelcolor}>
+                      <Translate>Bug bounty</Translate>
+                    </Text>
+                    <LabelPairedArrowUpRightSmRegularIcon />
+                  </a>
+                </li>
+              </ul>
+            </section>
+            <section className={styles.Section1}>
+              <Heading.H6>Deriv.com</Heading.H6>
+              <ul className={styles.List}>
+                <li>
+                  <a
+                    href={footer_links.root}
+                    target='_blank'
+                    className={styles.Link}
+                    rel='noreferrer'
+                  >
+                    <Text size='sm' className={styles.labelcolor}>
+                      <Translate>Homepage</Translate>
+                    </Text>
+                    <LabelPairedArrowUpRightSmRegularIcon />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href={footer_links.who_we_are}
+                    target='_blank'
+                    className={styles.Link}
+                    rel='noreferrer'
+                  >
+                    <Text size='sm' className={styles.labelcolor}>
+                      <Translate>Who we are</Translate>
+                    </Text>
+                    <LabelPairedArrowUpRightSmRegularIcon />
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href={footer_links.contact_us}
+                    target='_blank'
+                    className={styles.Link}
+                    rel='noreferrer'
+                  >
+                    <Text
+                      size='sm'
+                      color='var(--component-textIcon-normal-prominent)'
+                      className={styles.labelcolor}
+                    >
+                      <Translate>Contact us</Translate>
+                    </Text>
+                    <LabelPairedArrowUpRightSmRegularIcon />
+                  </a>
+                </li>
+              </ul>
+            </section>
+            <div className={styles.MobileAccordion}>
+              <CustomAccordion items={accordionItems} />
+            </div>
+            <div className={styles.Box} data-testid='get-connected'>
+              <Heading.H5 className={styles.SectionTitle}>
+                <Translate>Get connected</Translate>
+              </Heading.H5>
+              <p className={styles.SectionContent}>
+                <Text size='sm'>
+                  <Translate>Discuss ideas and share solutions with developers worldwide.</Translate>
+                </Text>
+              </p>
+              <div className={styles.CommunityButton} data-testid='community-button'>
+                <Button
+                  variant='secondary'
+                  color='black'
+                  fullWidth
+                  onClick={() => {
+                    window.open('https://community.deriv.com/c/developers/48', '_blank');
+                  }}
                 >
-                  <Text size='sm' className={styles.labelcolor}>
-                    <Translate>Homepage</Translate>
-                  </Text>
-                  <LabelPairedArrowUpRightSmRegularIcon />
-                </a>
-              </li>
-              <li>
-                <a
-                  href={footer_links.who_we_are}
-                  target='_blank'
-                  className={styles.Link}
-                  rel='noreferrer'
+                  <Translate>Join our community</Translate>
+                </Button>
+                <Button
+                  variant='secondary'
+                  color='black'
+                  fullWidth
+                  onClick={() => {
+                    window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
+                  }}
                 >
-                  <Text size='sm' className={styles.labelcolor}>
-                    <Translate>Who we are</Translate>
-                  </Text>
-                  <LabelPairedArrowUpRightSmRegularIcon />
-                </a>
-              </li>
-              <li>
-                <a
-                  href={footer_links.contact_us}
-                  target='_blank'
-                  className={styles.Link}
-                  rel='noreferrer'
-                >
-                  <Text
-                    size='sm'
-                    color='var(--component-textIcon-normal-prominent)'
-                    className={styles.labelcolor}
-                  >
-                    <Translate>Contact us</Translate>
+                  <SocialTelegramBlackIcon fill='#000000' iconSize='xs' />
+                  <Translate>Telegram</Translate>
+                </Button>
+              </div>
+            </div>
+            <div className={styles.Box}>
+              <Heading.H5 className={styles.SectionTitle}>
+                <Translate>We're here to help</Translate>
+              </Heading.H5>
+              <p className={styles.SectionContent}>
+                <Text size='sm' style={{ display: 'inline' }}>
+                  <Translate>Email us at</Translate>{' '}
+                </Text>
+                <a href='mailto:api-support@deriv.com' style={{ display: 'inline' }}>
+                  <Text size='sm' style={{ display: 'inline' }}>
+                    <Translate>api-support@deriv.com </Translate>
                   </Text>
-                  <LabelPairedArrowUpRightSmRegularIcon />
                 </a>
-              </li>
-            </ul>
-          </section>
-          <div className={styles.MobileAccordion}>
-            <CustomAccordion items={accordionItems} />
-          </div>
-          <div className={styles.Box} data-testid='get-connected'>
-            <Heading.H5 className={styles.SectionTitle}>
-              <Translate>Get connected</Translate>
-            </Heading.H5>
-            <p className={styles.SectionContent}>
-              <Text size='sm'>
-                <Translate>Discuss ideas and share solutions with developers worldwide.</Translate>
-              </Text>
-            </p>
-            <div className={styles.CommunityButton} data-testid='community-button'>
-              <Button
-                variant='secondary'
-                color='black'
-                fullWidth
-                onClick={() => {
-                  window.open('https://community.deriv.com/c/developers/48', '_blank');
-                }}
-              >
-                <Translate>Join our community</Translate>
-              </Button>
-              <Button
-                variant='secondary'
-                color='black'
-                fullWidth
-                onClick={() => {
-                  window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
-                }}
-              >
-                <SocialTelegramBlackIcon fill='#000000' iconSize='xs' />
-                <Translate>Telegram</Translate>
-              </Button>
-            </div>
-          </div>
-          <div className={styles.Box}>
-            <Heading.H5 className={styles.SectionTitle}>
-              <Translate>We're here to help</Translate>
-            </Heading.H5>
-            <p className={styles.SectionContent}>
-              <Text size='sm' style={{ display: 'inline' }}>
-                <Translate>Email us at</Translate>{' '}
-              </Text>
-              <a href='mailto:api-support@deriv.com' style={{ display: 'inline' }}>
                 <Text size='sm' style={{ display: 'inline' }}>
-                  <Translate>api-support@deriv.com </Translate>
+                  <Translate>if you need any assistance or support.</Translate>
                 </Text>
-              </a>
-              <Text size='sm' style={{ display: 'inline' }}>
-                <Translate>if you need any assistance or support.</Translate>
-              </Text>
-            </p>
-            <div className={styles.EmailButton}>
-              <Button
-                color='black'
-                size='md'
-                variant='secondary'
-                fullWidth
-                onClick={() => {
-                  window.open('mailto:api-support@deriv.com', '_blank');
-                }}
-              >
-                <LabelPairedEnvelopeMdBoldIcon /> <Translate>Send an email</Translate>
-              </Button>
+              </p>
+              <div className={styles.EmailButton}>
+                <Button
+                  color='black'
+                  size='md'
+                  variant='secondary'
+                  fullWidth
+                  onClick={() => {
+                    window.open('mailto:api-support@deriv.com', '_blank');
+                  }}
+                >
+                  <LabelPairedEnvelopeMdBoldIcon /> <Translate>Send an email</Translate>
+                </Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
     </div>
   );
 };