diff --git a/.github/workflows/build-and-deploy-prod.yml b/.github/workflows/build-and-deploy-prod.yml new file mode 100644 index 00000000..e22cc861 --- /dev/null +++ b/.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 }}" diff --git a/.github/workflows/build-and-deploy-staging.yml b/.github/workflows/build-and-deploy-staging.yml index 7f0fe315..f542f847 100644 --- a/.github/workflows/build-and-deploy-staging.yml +++ b/.github/workflows/build-and-deploy-staging.yml @@ -36,7 +36,7 @@ jobs: run: npm ci shell: bash - - name: Build staging + - name: Build run: npm run build env: VITE_PROJECT_NAME: ${{ vars.VITE_PROJECT_NAME }} @@ -44,23 +44,15 @@ jobs: 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 diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx index 4a1e1813..83293c6d 100644 --- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx +++ b/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) => ( )) ) : ( - + )} diff --git a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx index 075ed04a..9cc9d2ec 100644 --- a/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx +++ b/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx @@ -20,6 +20,7 @@ type TBuySellAmountProps = { minLimit: string; paymentMethodNames?: string[]; setValue: ReturnType['setValue']; + trigger: ReturnType['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 (
diff --git a/src/components/BuySellForm/BuySellForm.scss b/src/components/BuySellForm/BuySellForm.scss index abab42af..e9b5fb3a 100644 --- a/src/components/BuySellForm/BuySellForm.scss +++ b/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; diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx index 7c170a98..5e59fc76 100644 --- a/src/components/BuySellForm/BuySellForm.tsx +++ b/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(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 0) || !isBuy)} onRequestClose={onRequestClose} @@ -264,6 +267,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]} onSelectPaymentMethodCard={onSelectPaymentMethodCard} selectedPaymentMethodIds={selectedPaymentMethods} + setIsHidden={setIsHidden} /> )} void} + trigger={trigger as unknown as () => Promise} /> diff --git a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx b/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx index b3b22f62..7ad34762 100644 --- a/src/components/BuySellForm/BuySellFormDisplayWrapper.tsx +++ b/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 ( diff --git a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx index feba0752..59003467 100644 --- a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx +++ b/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>; }; 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 = ({ { + hideModal(); + setIsHidden?.(false); + }} onResetFormState={handleResetFormState} /> )} diff --git a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx index fa700c3c..830a5c4d 100644 --- a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx +++ b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx @@ -79,4 +79,22 @@ describe('', () => { 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( + + ); + + const addButton = screen.getByTestId('dt_payment_method_add_button'); + await userEvent.click(addButton); + expect(mockUseModalManager.showModal).toHaveBeenCalledWith('PaymentMethodForm', { shouldStackModals: false }); + expect(setIsHidden).toHaveBeenCalledWith(true); + }); }); diff --git a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx index 4f878bf8..5fb8d06b 100644 --- a/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx +++ b/src/components/BuySellForm/__tests__/BuySellForm.spec.tsx @@ -154,6 +154,7 @@ jest.mock('react-hook-form', () => ({ })), handleSubmit: mockHandleSubmit, setValue: jest.fn(), + trigger: jest.fn(), }), })); diff --git a/src/components/DerivIframe/DerivIframe.tsx b/src/components/DerivIframe/DerivIframe.tsx index 0e390f16..5da42b5d 100644 --- a/src/components/DerivIframe/DerivIframe.tsx +++ b/src/components/DerivIframe/DerivIframe.tsx @@ -1,7 +1,7 @@ const DerivIframe = () => (