Merge branch 'master' of github.com:deriv-com/p2p into shayan/feq-233…

…6/redirect-guest-users-to-login-page

.github/workflows/build-and-deploy-prod.yml

@@ -0,0 +1,64 @@
+name: Build Production and Deploy to Cloudflare Pages
+
+on:
+    push:
+      tags:
+      - production_*
+
+concurrency:
+    group: cloudflare-pages-build-production
+    cancel-in-progress: true
+
+jobs:
+    build_to_cloudflare_pages:
+        timeout-minutes: 30
+        runs-on: ubuntu-latest
+        environment: Production
+        steps:
+            - name: Checkout to main branch
+              uses: actions/checkout@v3
+
+            - name: Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.x
+                  cache: 'npm'
+
+            - name: Get cached dependencies
+              id: cache-npm
+              uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c
+              with:
+                  path: node_modules
+                  key: npm-${{ hashFiles('./package-lock.json') }}
+
+            - name: Install dependencies
+              if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+              run: npm ci
+              shell: bash
+
+            - name: Build
+              run: npm run build
+
+            - name: Run tests for Eslint
+              run: npm run test:lint
+
+            - name: Publish to Cloudflare Pages
+              uses: "deriv-com/shared-actions/.github/actions/publish_to_pages_branch@master"
+              with:
+                CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                project_name: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                branch_name: master
+                output_dir: dist
+                cname_url: p2p.deriv.com
+    send_slack_success:
+      name: Send Release Slack notification success
+      runs-on: ubuntu-latest
+      if: success()
+      needs: [build_to_cloudflare_pages]
+      steps:
+        - name: Send Slack Notification
+          uses: "deriv-com/shared-actions/.github/actions/send_slack_notification@master"
+          with:
+            SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+            MESSAGE: "Production Release succeeded for p2p.deriv.com with version ${{ github.head_ref }}"

.github/workflows/build-and-deploy-staging.yml

@@ -36,31 +36,23 @@ jobs:
               run: npm ci
               shell: bash
 
-            - name: Build staging
+            - name: Build
               run: npm run build
               env:
                 VITE_PROJECT_NAME: ${{ vars.VITE_PROJECT_NAME }}
                 VITE_CROWDIN_BRANCH_NAME: ${{ vars.VITE_CROWDIN_BRANCH_NAME }}
                 VITE_TRANSLATIONS_CDN_URL: ${{ vars.VITE_TRANSLATIONS_CDN_URL }}
 
 
-            - name: Run tests for Eslint
+            - name: Run tests for Eslintbuild_to_cloudflare_pages
               run: npm run test:lint
 
             - name: Publish to Cloudflare Pages
-              id: publish-to-pages
-              env:
-                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-                  HEAD_BRANCH: ${{ github.head_ref }}
-              run: |
-                  echo "Installing Wrangler CLI"
-                  npm i -g wrangler
-                  echo "Deploying build to Cloudflare Pages"
-                  directory='dist'
-                  projectName=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
-                  branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
-                  cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?)
-                  echo "------"
-                  preview_url=https://$branch.$projectName.pages.dev
-                  cat log.txt
+              uses: "deriv-com/shared-actions/.github/actions/publish_to_pages_branch@master"
+              with:
+                CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                project_name: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                branch_name: staging
+                output_dir: dist
+                cname_url: staging-p2p.deriv.com

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -167,14 +167,14 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                         {payment_method_names ? (
                             payment_method_names.map((method: string, idx: number) => (
                                 <PaymentMethodLabel
-                                    color={textColor}
+                                    color='general'
                                     key={idx}
                                     paymentMethodName={method}
-                                    size={isMobile ? 'sm' : 'xs'}
+                                    size={isMobile ? 'xs' : 'sm'}
                                 />
                             ))
                         ) : (
-                            <PaymentMethodLabel color={textColor} paymentMethodName='-' />
+                            <PaymentMethodLabel color='general' paymentMethodName='-' />
                         )}
                     </div>
                 </Container>

src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx

@@ -20,6 +20,7 @@ type TBuySellAmountProps = {
     minLimit: string;
     paymentMethodNames?: string[];
     setValue: ReturnType<typeof useForm>['setValue'];
+    trigger: ReturnType<typeof useForm>['trigger'];
 };
 const BuySellAmount = ({
     accountCurrency,
@@ -33,6 +34,7 @@ const BuySellAmount = ({
     minLimit,
     paymentMethodNames,
     setValue,
+    trigger,
 }: TBuySellAmountProps) => {
     const { isMobile } = useDevice();
     const labelSize = isMobile ? 'sm' : 'xs';
@@ -52,7 +54,8 @@ const BuySellAmount = ({
     useEffect(() => {
         setInputValue(minLimit);
         setValue('amount', minLimit);
-    }, [minLimit, setValue]);
+        trigger('amount');
+    }, [minLimit, setValue, trigger]);
 
     return (
         <div className='flex flex-col gap-[2rem] py-[1.6rem]'>

src/components/BuySellForm/BuySellForm.scss

@@ -30,7 +30,7 @@
         top: 0;
         left: 0;
         z-index: 1;
-        height: calc(100vh - 4rem);
+        height: calc(100vh - 7rem);
 
         & .mobile-wrapper__body {
             overflow: overlay;

src/components/BuySellForm/BuySellForm.tsx

@@ -56,6 +56,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     const { data } = api.advertiser.useGetInfo() || {};
     const [errorMessage, setErrorMessage] = useState('');
     const scrollRef = useRef<HTMLDivElement>(null);
+    const [isHidden, setIsHidden] = useState(false);
     const {
         balance_available = '',
         daily_buy = 0,
@@ -154,6 +155,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
         getValues,
         handleSubmit,
         setValue,
+        trigger,
     } = useForm({
         defaultValues: {
             amount: min_order_amount_limit ?? 1,
@@ -224,6 +226,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
             <BuySellFormDisplayWrapper
                 accountCurrency={account_currency as TCurrency}
                 isBuy={isBuy}
+                isHidden={isHidden}
                 isModalOpen={isModalOpen}
                 isValid={isValid && ((isBuy && selectedPaymentMethods.length > 0) || !isBuy)}
                 onRequestClose={onRequestClose}
@@ -264,6 +267,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
                         availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
                         onSelectPaymentMethodCard={onSelectPaymentMethodCard}
                         selectedPaymentMethodIds={selectedPaymentMethods}
+                        setIsHidden={setIsHidden}
                     />
                 )}
                 <BuySellAmount
@@ -283,6 +287,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
                     minLimit={min_order_amount_limit_display ?? '0'}
                     paymentMethodNames={payment_method_names}
                     setValue={setValue as unknown as (name: string, value: string) => void}
+                    trigger={trigger as unknown as () => Promise<boolean>}
                 />
             </BuySellFormDisplayWrapper>
         </form>

src/components/BuySellForm/BuySellFormDisplayWrapper.tsx

@@ -9,6 +9,7 @@ import { BuySellFormHeader } from './BuySellFormHeader';
 type TBuySellFormDisplayWrapperProps = {
     accountCurrency: string;
     isBuy: boolean;
+    isHidden: boolean;
     isModalOpen: boolean;
     isValid: boolean;
     onRequestClose: () => void;
@@ -18,6 +19,7 @@ const BuySellFormDisplayWrapper = ({
     accountCurrency,
     children,
     isBuy,
+    isHidden,
     isModalOpen,
     isValid,
     onRequestClose,
@@ -44,10 +46,11 @@ const BuySellFormDisplayWrapper = ({
     return (
         <Modal
             ariaHideApp={false}
-            className={clsx('buy-sell-form', { 'buy-sell-form--is-buy': isBuy })}
+            className={clsx('buy-sell-form', { 'buy-sell-form--is-buy': isBuy, hidden: isHidden })}
             isOpen={isModalOpen}
             onRequestClose={onRequestClose}
             shouldCloseOnOverlayClick={false}
+            style={{ overlay: { background: isHidden ? 'transparent' : 'rgba(0, 0, 0, 0.72)', zIndex: 9999 } }}
         >
             <Modal.Header onRequestClose={onRequestClose}>
                 <BuySellFormHeader currency={accountCurrency} isBuy={isBuy} />

src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useReducer } from 'react';
+import { Dispatch, SetStateAction, useCallback, useReducer } from 'react';
 import { TPaymentMethod, TSelectedPaymentMethod } from 'types';
 import { LightDivider, PaymentMethodForm } from '@/components';
 import { useModalManager } from '@/hooks';
@@ -12,12 +12,14 @@ type TBuySellPaymentSectionProps = {
     availablePaymentMethods: (TPaymentMethod & { isAvailable?: boolean })[];
     onSelectPaymentMethodCard?: (paymentMethodId: number) => void;
     selectedPaymentMethodIds: number[];
+    setIsHidden?: Dispatch<SetStateAction<boolean>>;
 };
 
 const BuySellPaymentSection = ({
     availablePaymentMethods,
     onSelectPaymentMethodCard,
     selectedPaymentMethodIds,
+    setIsHidden,
 }: TBuySellPaymentSectionProps) => {
     const { isMobile } = useDevice();
     const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods);
@@ -61,6 +63,7 @@ const BuySellPaymentSection = ({
                             key={index}
                             medium
                             onClickAdd={() => {
+                                setIsHidden?.(true);
                                 showModal('PaymentMethodForm', { shouldStackModals: false });
                                 handleAddPaymentMethod(paymentMethod?.display_name, paymentMethod);
                             }}
@@ -76,7 +79,10 @@ const BuySellPaymentSection = ({
                 <PaymentMethodForm
                     displayModal={!isMobile && !!isModalOpenFor('PaymentMethodForm')}
                     formState={formState}
-                    onRequestClose={hideModal}
+                    onRequestClose={() => {
+                        hideModal();
+                        setIsHidden?.(false);
+                    }}
                     onResetFormState={handleResetFormState}
                 />
             )}

src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx

@@ -79,4 +79,22 @@ describe('<BuySellPaymentSection />', () => {
         expect(mockUseModalManager.showModal).toHaveBeenCalledWith('PaymentMethodForm', { shouldStackModals: false });
         expect(screen.getByText('PaymentMethodForm')).toBeInTheDocument();
     });
+
+    it('should hide the background modal when setishidden is passed', async () => {
+        const setIsHidden = jest.fn();
+        mockAvailablePaymentMethods.isAvailable = false;
+        mockUseModalManager.isModalOpenFor.mockImplementation((modal: string) => modal === 'PaymentMethodForm');
+        render(
+            <BuySellPaymentSection
+                {...mockProps}
+                availablePaymentMethods={[mockAvailablePaymentMethods]}
+                setIsHidden={setIsHidden}
+            />
+        );
+
+        const addButton = screen.getByTestId('dt_payment_method_add_button');
+        await userEvent.click(addButton);
+        expect(mockUseModalManager.showModal).toHaveBeenCalledWith('PaymentMethodForm', { shouldStackModals: false });
+        expect(setIsHidden).toHaveBeenCalledWith(true);
+    });
 });

src/components/BuySellForm/__tests__/BuySellForm.spec.tsx

@@ -154,6 +154,7 @@ jest.mock('react-hook-form', () => ({
         })),
         handleSubmit: mockHandleSubmit,
         setValue: jest.fn(),
+        trigger: jest.fn(),
     }),
 }));
 

src/components/DerivIframe/DerivIframe.tsx

@@ -1,7 +1,7 @@
 const DerivIframe = () => (
     <iframe
         id='localstorage-sync'
-        sandbox='allow-scripts'
+        sandbox='allow-same-origin allow-scripts'
         src='../../../../localstorage-sync.html'
         style={{ display: 'none', visibility: 'hidden' }}
     />

src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss

@@ -1,6 +1,6 @@
 .mobile-wrapper {
     @include mobile {
-        height: calc(100vh - 4rem);
+        height: calc(100vh - 8rem);
         width: 100vw;
         border-radius: 0;
         display: grid;

src/pages/advertiser/screens/Advertiser/Advertiser.scss

@@ -1,13 +1,19 @@
 .advertiser {
     position: absolute;
-    top: 8rem;
+    top: 12rem;
     background-color: #fff;
     width: 95.2rem;
 
     @include mobile {
-        top: 4rem;
+        top: 8rem;
         overflow: overlay;
         height: calc(100vh - 4rem);
         width: 100%;
     }
+
+    & .page-return {
+        @include mobile {
+            padding: 0.5rem 1.6rem;
+        }
+    }
 }

src/pages/advertiser/screens/Advertiser/Advertiser.tsx

@@ -48,6 +48,7 @@ const Advertiser = () => {
                         />
                     ),
                 })}
+                size={isMobile ? 'lg' : 'md'}
                 weight='bold'
             />
             <AdvertiserBlockOverlay

src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertiserAdvertsTable.tsx

@@ -5,6 +5,7 @@ import { ErrorModal, LoadingModal } from '@/components/Modals';
 import { ADVERT_TYPE, BUY_SELL, BUY_SELL_URL } from '@/constants';
 import { api } from '@/hooks';
 import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager, useQueryString } from '@/hooks/custom-hooks';
+import { getLocalizedTabs } from '@/utils/tabs';
 import { useTranslations } from '@deriv-com/translations';
 import { Tab, Tabs } from '@deriv-com/ui';
 import { AdvertsTableRenderer } from './AdvertsTableRenderer';
@@ -76,7 +77,12 @@ const AdvertiserAdvertsTable = ({ advertiserId }: TAdvertiserAdvertsTableProps)
 
     return (
         <div className='advertiser-adverts-table'>
-            <Tabs activeTab={activeTab} className='lg:w-80 lg:mt-10' onChange={setActiveTab} variant='secondary'>
+            <Tabs
+                activeTab={getLocalizedTabs(localize)[activeTab]}
+                className='lg:w-80 lg:mt-10'
+                onChange={setActiveTab}
+                variant='secondary'
+            >
                 <Tab className='text-xs' title={localize('Buy')} />
                 <Tab title={localize('Sell')} />
             </Tabs>

src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx

@@ -4,6 +4,7 @@ import { FilterModal } from '@/components/Modals';
 import { getSortByList } from '@/constants';
 import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
+import { getLocalizedTabs } from '@/utils/tabs';
 import { LabelPairedBarsFilterMdBoldIcon, LabelPairedBarsFilterSmBoldIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
 import { Button, Tab, Tabs, useDevice } from '@deriv-com/ui';
@@ -53,7 +54,7 @@ const BuySellHeader = ({
         >
             <Tabs
                 TitleFontSize={isMobile ? 'md' : 'sm'}
-                activeTab={activeTab}
+                activeTab={getLocalizedTabs(localize)[activeTab]}
                 onChange={setActiveTab}
                 variant='primary'
                 wrapperClassName='buy-sell-header__tabs'

src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss

@@ -11,7 +11,7 @@
 
             @include mobile {
                 // stylelint-disable-next-line declaration-no-important
-                height: calc(100vh - 21rem) !important;
+                height: calc(100vh - 25rem) !important;
             }
         }
     }