Hasan/Pr 00 live market fix

gatsby-node.js

@@ -37,12 +37,9 @@ exports.onPreInit = () => {
 }
 
 // Based upon https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n
-exports.onCreatePage = ({ page, actions }) => {
-    const { createRedirect, createPage, deletePage } = actions
 
-    // First delete the incoming page that was automatically created by Gatsby
-    // So everything in src/pages/
-    deletePage(page)
+const BuildPage = (page, actions) => {
+    const { createRedirect, createPage } = actions
     const is_responsible_trading = /responsible/g.test(page.path)
     const is_contact_us = /contact_us/g.test(page.path)
     const is_careers = /careers/g.test(page.path)
@@ -376,6 +373,48 @@ exports.onCreatePage = ({ page, actions }) => {
         return current_page
     })
 }
+exports.onCreatePage = ({ page, actions }) => {
+    const { deletePage } = actions
+    const isProduction = process.env.GATSBY_ENV === 'production'
+    const pagesToBuild = process.env.GATSBY_BUILD_PAGES || 'all'
+
+    // First delete the incoming page that was automatically created by Gatsby
+    // So everything in src/pages/
+    deletePage(page)
+
+    const pagesCategory = {
+        all: [''],
+        'no-affiliates': ['signup-affiliates', 'landing', 'ctrader', 'partners'],
+        'no-help-centre': ['help-centre'],
+        'no-tools': ['trader-tools'],
+        fast: [
+            'signup-affiliates',
+            'landing',
+            'ctrader',
+            'partners',
+            'help-centre',
+            'trader-tools',
+            'careers',
+            // 'markets',
+            // 'trade-types' Note: Feel free to adjust pages you want to skip building for faster local development
+        ],
+    }
+
+    const disallowedPages = pagesCategory[pagesToBuild] || []
+
+    const regex = new RegExp(`/${disallowedPages.join('|') + '|'}/g`)
+
+    const isMatch = regex.test(page.path)
+
+    if (isProduction) {
+        return BuildPage(page, actions)
+    } else {
+        if (!isMatch || pagesToBuild === 'all') {
+            console.log(`\x1b[32mcreating\x1b[0m [${pagesToBuild}] ${page.path}`)
+            return BuildPage(page, actions)
+        }
+    }
+}
 
 const StylelintPlugin = require('stylelint-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')

package.json

@@ -6,14 +6,14 @@
     "dependencies": {
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv-com/blocks": "^0.62.0",
+        "@deriv-com/blocks": "^0.66.0",
         "@deriv-com/components": "^0.37.0",
         "@deriv-com/hooks": "^0.10.0",
         "@deriv-com/providers": "^0.10.0",
         "@deriv/analytics": "^1.4.4",
         "@deriv/deriv-api": "^1.0.13",
         "@deriv/quill-design": "^1.3.2",
-        "@deriv/quill-icons": "^1.1.5",
+        "@deriv/quill-icons": "^1.1.6",
         "@hookform/resolvers": "^3.3.2",
         "@livechat/customer-sdk": "^3.1.5",
         "@loadable/component": "^5.15.3",

src/data/trustpilot.json

@@ -1,5 +1,5 @@
 {
     "stars": 4.5,
     "trustScore": 4.6,
-    "numberOfReviews": "37,000"
+    "numberOfReviews": "38,754"
 }

src/features/components/organisms/markets/market-banner/styles.module.scss

@@ -14,7 +14,7 @@
     }
 }
 .flex_container {
-    padding-block-start: 7rem;
+    padding-block-start: 8rem;
     @include breakpoints(tablet) {
         position: relative;
         min-block-size: 36rem;

src/features/components/templates/navigation/main-nav/nav.buttons.tsx

@@ -40,7 +40,7 @@ export const MainNavigationButtons = () => {
                     </Button>
                 </>
             )}
-            <MobileNavToggle />
+            <MobileNavToggle data-cy="hamburger-menu" />
         </div>
     )
 }

src/features/components/templates/navigation/main-nav/nav.logo.tsx

@@ -5,7 +5,7 @@ import { BrandDerivWordmarkCoralIcon } from '@deriv/quill-icons/Logo'
 
 export const MainNavigationLogo = () => {
     return (
-        <CustomLink href={'/'}>
+        <CustomLink href={'/'} data-cy="deriv-logo">
             <BrandDerivWordmarkCoralIcon width={73} height={24} />
         </CustomLink>
     )

src/features/pages/home/live-pricing-migration/card-slider/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import clsx from 'clsx'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { qtJoin } from '@deriv/quill-design'
+// eslint-disable-next-line import/no-unresolved
+import { SwiperOptions } from 'swiper/types'
+import Card, { CardVariants } from '../card'
+
+type CardVariantType = keyof CardVariants
+
+type CardVariantProps<T extends CardVariantType> = React.ComponentPropsWithoutRef<
+    CardVariants[T]
+> & {
+    id: number
+}
+
+export interface CardSliderProps<T extends CardVariantType> {
+    variant: T
+    cards: CardVariantProps<T>[]
+    className?: string
+    slideClasses?: string
+    swiperData?: SwiperOptions
+}
+
+const defaultSwiperProps: SwiperOptions = {
+    slidesPerView: 'auto',
+    spaceBetween: 16,
+    pagination: {
+        enabled: true,
+        clickable: true,
+        horizontalClass: `[--swiper-pagination-color:#ff444f]`,
+    },
+}
+
+export const CardSlider = <T extends CardVariantType>({
+    variant,
+    cards = [],
+    className,
+    slideClasses,
+    swiperData,
+}: CardSliderProps<T>) => {
+    const { slidesPerView, spaceBetween, breakpoints } = Object.assign(
+        defaultSwiperProps,
+        swiperData,
+    )
+    const CardComponent = Card[variant]
+
+    return (
+        <div className="flex w-full justify-center">
+            <Swiper
+                className={qtJoin('h-full w-full', className)}
+                slidesPerView={slidesPerView}
+                spaceBetween={spaceBetween}
+                breakpoints={breakpoints}
+            >
+                {cards.map((card, index) => (
+                    <SwiperSlide className={clsx(slideClasses)} key={index}>
+                        {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            <CardComponent {...card} />
+                        }
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+        </div>
+    )
+}
+
+export default CardSlider

src/features/pages/home/live-pricing-migration/card/base/index.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { Heading, Text, qtMerge } from '@deriv/quill-design'
+import clsx from 'clsx'
+// import CustomLink from '@deriv-com/components';
+import { CardContent } from '../types'
+
+export interface BaseCardProps extends Omit<CardContent, 'id'> {
+    contentPosition: 'bottom' | 'top' | 'start' | 'end'
+}
+
+const contentVariantClass = {
+    bottom: 'flex-col',
+    top: 'flex-col-reverse',
+    start: 'flex-col lg:flex-row-reverse',
+    end: 'flex-col lg:flex-row',
+}
+
+const bgColorVariantClass = {
+    light: 'bg-background-primary-container',
+    gray: 'bg-solid-slate-75',
+}
+
+const textColorVariantClass = {
+    light: 'text-typography-prominent',
+    gray: 'text-solid-slate-1400',
+}
+
+const sizeVariantComponents = {
+    xs: Heading.H4,
+    sm: Heading.H4,
+    md: Heading.H3,
+    lg: Heading.H2,
+}
+
+const sizeVariantContainerGap = {
+    xs: 'gap-gap-lg p-general-md',
+    sm: 'gap-gap-lg p-general-lg',
+    md: 'gap-gap-xl p-general-2xl',
+    lg: 'gap-gap-2xl p-general-2xl',
+}
+
+const sizeVariantTextGap = {
+    xs: 'gap-gap-md',
+    sm: 'gap-gap-md',
+    md: 'gap-gap-md',
+    lg: 'gap-gap-lg',
+}
+
+export const BaseCard: React.FC<BaseCardProps> = ({
+    header,
+    description,
+    children,
+    content,
+    icon,
+    link,
+    className,
+    contentPosition,
+    align,
+    color,
+    size = 'md',
+    contentClassName,
+    nonContentClassName,
+}) => {
+    const HeadingComponent = sizeVariantComponents[size]
+
+    return (
+        <div
+            className={clsx(
+                'flex overflow-hidden rounded-xl',
+                contentVariantClass[contentPosition],
+                bgColorVariantClass[color],
+                className,
+            )}
+        >
+            <div
+                className={qtMerge(
+                    'flex max-h-max  basis-1/2 flex-col justify-center',
+                    align === 'start'
+                        ? 'items-start md:items-start'
+                        : 'items-center md:items-center',
+                    sizeVariantContainerGap[size],
+                    nonContentClassName,
+                    !content && 'flex-1',
+                )}
+            >
+                {icon && icon}
+                {(header || description) && (
+                    <div
+                        className={qtMerge(
+                            'flex flex-col',
+                            textColorVariantClass[color],
+                            sizeVariantTextGap[size],
+                            !content && description && 'flex-1',
+                            align === 'center' && 'text-center',
+                        )}
+                    >
+                        {header && <HeadingComponent>{header}</HeadingComponent>}
+                        {description && (
+                            <Text size="md" className="text-typography-default">
+                                {description}
+                            </Text>
+                        )}
+                    </div>
+                )}
+                {/* {link && (
+          <CustomLink href={link.href} size="md" hasIcon>
+            {link.content}
+          </CustomLink>
+        )} */}
+                {children}
+            </div>
+            {content && <div className={qtMerge('basis-1/2', contentClassName)}>{content}</div>}
+        </div>
+    )
+}
+
+export default BaseCard

src/features/pages/home/live-pricing-migration/card/index.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react'
+import { LiveMarketCard } from './live-market'
+
+export type CardVariants = {
+    LiveMarketCard: typeof LiveMarketCard
+}
+
+export const Card: CardVariants = ({ children }: { children: ReactNode }) => {
+    return children
+}
+
+Card.LiveMarketCard = LiveMarketCard
+
+export default Card
+
+export * from './types'