From dc626f6bbc4149165e7492a46f58ed90b885eda9 Mon Sep 17 00:00:00 2001 From: Nuzhy-Deriv <125249108+Nuzhy-Deriv@users.noreply.github.com> Date: Thu, 21 Dec 2023 12:18:19 +0800 Subject: [PATCH] Translation quill navigation master (#6238) * chore: integrating quill design, quill icons, deriv-com-libs * chore: added new navigation * chore: replace new navigation with the old * chore: integrated language switcher * chore: replaced footer with the the new footer * fix: removed old footer * fix: market navigation padding issue * fix: remove unused old main-nav * fix: update naivgation data * chore: careers nav updated * chore: partners navigation added * chore: navigation for careers, partners, payment-agent, prime added * chore: removed old PaymentAgentAffiliateNav * chore: added SharedLinkProvider, route in navigation logos * chore: updated deriv-com-libs, removed language switcher in careers-nav * auto-pull-translation * Translation quill navigation (#6214) * chore: integrating quill design, quill icons, deriv-com-libs * chore: added new navigation * chore: replace new navigation with the old * chore: integrated language switcher * chore: replaced footer with the the new footer * fix: removed old footer * fix: market navigation padding issue * fix: remove unused old main-nav * fix: update naivgation data * chore: careers nav updated * chore: partners navigation added * chore: navigation for careers, partners, payment-agent, prime added * chore: removed old PaymentAgentAffiliateNav * chore: added SharedLinkProvider, route in navigation logos * chore: updated deriv-com-libs, removed language switcher in careers-nav * auto-pull-translation * Nuzhy/quill navigation update (#6240) * chore: integrating quill design, quill icons, deriv-com-libs * chore: added new navigation * chore: replace new navigation with the old * chore: integrated language switcher * chore: replaced footer with the the new footer * fix: removed old footer * fix: market navigation padding issue * fix: remove unused old main-nav * fix: update naivgation data * chore: careers nav updated * chore: partners navigation added * chore: navigation for careers, partners, payment-agent, prime added * chore: removed old PaymentAgentAffiliateNav * chore: added SharedLinkProvider, route in navigation logos * chore: updated deriv-com-libs, removed language switcher in careers-nav * auto-pull-translation * chore: top navigation added to partners nav, fixes in footer * chore: top navigation added to partners nav, fixes in footer * fix: update description content in footer for EU * fix: external link issue * fix: terms-and-condition url updated * fix: update deriv-com-libs * fix: update social buttons in footer for EU, careers * fix: banner overlap issue for eu * chore: partners, career navbar design updates * chore: update quill icons to fix traders hub icon fix: social-links for EU in footer * fix: added ab testing hook to affiliates-nav * fix: affiliates-nav added to signup-affiliates page --- gatsby-browser.js | 4 +- gatsby-config.js | 1 + package-lock.json | 1429 ++++++++++++----- package.json | 179 ++- postcss.config.js | 6 + src/components/layout/layout.tsx | 108 +- src/features/components/quill/alert/index.tsx | 79 + .../components/quill/shared-link/external.tsx | 56 + .../components/quill/shared-link/index.tsx | 22 + .../templates/footer/banner-and-awards.tsx | 70 + .../components/templates/footer/data.ts | 368 ----- .../components/templates/footer/data.tsx | 549 +++++++ .../templates/footer/description.tsx | 96 ++ .../templates/footer/disclaimer/data.tsx | 208 --- .../footer/disclaimer/disclaimer.module.scss | 3 - .../templates/footer/disclaimer/index.tsx | 72 - .../templates/footer/disclaimer/types.ts | 16 - .../components/templates/footer/download.tsx | 65 + .../templates/footer/footer-icons/index.tsx | 26 - .../templates/footer/footer.module.scss | 20 - .../components/templates/footer/index.tsx | 83 +- .../templates/footer/link-item/index.tsx | 26 - .../templates/footer/links-column/index.tsx | 36 - .../templates/footer/social-icons/data.ts | 353 ---- .../templates/footer/social-icons/index.tsx | 50 - .../components/templates/footer/types.ts | 22 - .../components/templates/layout/data.ts | 106 ++ .../components/templates/layout/index.tsx | 48 +- .../navigation/affiliates-nav/index.tsx | 2 +- .../nav.module.scss} | 7 +- .../career-nav/career-nav.module.scss | 11 - .../templates/navigation/career-nav/data.tsx | 34 +- .../templates/navigation/career-nav/index.tsx | 78 +- .../main-nav/content/about/index.ts | 98 -- .../navigation/main-nav/content/index.ts | 79 - .../main-nav/content/legal/index.ts | 25 - .../main-nav/content/market/index.ts | 115 -- .../main-nav/content/partner/index.ts | 48 - .../main-nav/content/platform/index.ts | 266 --- .../main-nav/content/resources/data.ts | 56 - .../templates/navigation/main-nav/data.tsx | 821 ++++++++++ .../templates/navigation/main-nav/index.tsx | 32 +- .../main-nav/main-nav-buttons/index.tsx | 50 - .../navigation/main-nav/main-nav.module.scss | 11 - .../navigation/main-nav/nav.buttons.tsx | 48 + .../navigation/main-nav/nav.logo.tsx | 14 + .../templates/navigation/market-nav/index.tsx | 44 - .../market-nav/market-nav.module.scss | 11 - .../navigation/partners-nav/data.tsx | 52 + .../navigation/partners-nav/index.tsx | 28 + .../navigation/partners-nav/nav.buttons.tsx | 65 + .../navigation/partners-nav/prime-nav.tsx | 54 + .../partners-nav/top-navigation.tsx | 22 + .../navigation/payment-agent-nav/data.tsx | 69 - .../navigation/payment-agent-nav/index.tsx | 126 -- .../templates/options-layout/index.tsx | 8 +- src/features/pages/404/index.tsx | 8 +- src/features/pages/check-email/index.tsx | 8 +- src/features/pages/deriv-ctrader/index.tsx | 8 +- src/features/pages/home/index.tsx | 8 +- src/features/pages/markets/etf/index.tsx | 8 +- src/features/pages/p2p/index.tsx | 8 +- .../pages/partners/deriv-prime/index.tsx | 8 +- .../common/migration/footer/deriv-go-qr.png | Bin 0 -> 12723 bytes .../migration/footer/download-appstore.png | Bin 0 -> 5049 bytes .../migration/footer/explore-appgallery.png | Bin 0 -> 4645 bytes .../migration/footer/get-googleplay.png | Bin 0 -> 4721 bytes .../migration/footer/investors-in-people.png | Bin 0 -> 8039 bytes .../components/sections/_hero_derived_fx.tsx | 4 +- src/pages/partners/affiliate-ib/index.tsx | 2 +- src/pages/partners/index.tsx | 2 +- src/pages/partners/payment-agent/index.tsx | 2 +- src/pages/signup-affiliates/index.tsx | 2 +- static/css/global.css | 7 + tailwind.config.js | 9 + tsconfig.json | 3 +- 76 files changed, 3516 insertions(+), 2946 deletions(-) create mode 100644 postcss.config.js create mode 100644 src/features/components/quill/alert/index.tsx create mode 100644 src/features/components/quill/shared-link/external.tsx create mode 100644 src/features/components/quill/shared-link/index.tsx create mode 100644 src/features/components/templates/footer/banner-and-awards.tsx delete mode 100644 src/features/components/templates/footer/data.ts create mode 100644 src/features/components/templates/footer/data.tsx create mode 100644 src/features/components/templates/footer/description.tsx delete mode 100644 src/features/components/templates/footer/disclaimer/data.tsx delete mode 100644 src/features/components/templates/footer/disclaimer/disclaimer.module.scss delete mode 100644 src/features/components/templates/footer/disclaimer/index.tsx delete mode 100644 src/features/components/templates/footer/disclaimer/types.ts create mode 100644 src/features/components/templates/footer/download.tsx delete mode 100644 src/features/components/templates/footer/footer-icons/index.tsx delete mode 100644 src/features/components/templates/footer/footer.module.scss delete mode 100644 src/features/components/templates/footer/link-item/index.tsx delete mode 100644 src/features/components/templates/footer/links-column/index.tsx delete mode 100644 src/features/components/templates/footer/social-icons/data.ts delete mode 100644 src/features/components/templates/footer/social-icons/index.tsx delete mode 100644 src/features/components/templates/footer/types.ts create mode 100644 src/features/components/templates/layout/data.ts rename src/features/components/templates/navigation/{payment-agent-nav/payment-agent-nav.module.scss => affiliates-nav/nav.module.scss} (74%) delete mode 100644 src/features/components/templates/navigation/career-nav/career-nav.module.scss delete mode 100644 src/features/components/templates/navigation/main-nav/content/about/index.ts delete mode 100644 src/features/components/templates/navigation/main-nav/content/index.ts delete mode 100644 src/features/components/templates/navigation/main-nav/content/legal/index.ts delete mode 100644 src/features/components/templates/navigation/main-nav/content/market/index.ts delete mode 100644 src/features/components/templates/navigation/main-nav/content/partner/index.ts delete mode 100644 src/features/components/templates/navigation/main-nav/content/platform/index.ts delete mode 100644 src/features/components/templates/navigation/main-nav/content/resources/data.ts create mode 100644 src/features/components/templates/navigation/main-nav/data.tsx delete mode 100644 src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx delete mode 100644 src/features/components/templates/navigation/main-nav/main-nav.module.scss create mode 100644 src/features/components/templates/navigation/main-nav/nav.buttons.tsx create mode 100644 src/features/components/templates/navigation/main-nav/nav.logo.tsx delete mode 100644 src/features/components/templates/navigation/market-nav/index.tsx delete mode 100644 src/features/components/templates/navigation/market-nav/market-nav.module.scss create mode 100644 src/features/components/templates/navigation/partners-nav/data.tsx create mode 100644 src/features/components/templates/navigation/partners-nav/index.tsx create mode 100644 src/features/components/templates/navigation/partners-nav/nav.buttons.tsx create mode 100644 src/features/components/templates/navigation/partners-nav/prime-nav.tsx create mode 100644 src/features/components/templates/navigation/partners-nav/top-navigation.tsx delete mode 100644 src/features/components/templates/navigation/payment-agent-nav/data.tsx delete mode 100644 src/features/components/templates/navigation/payment-agent-nav/index.tsx create mode 100644 src/images/common/migration/footer/deriv-go-qr.png create mode 100644 src/images/common/migration/footer/download-appstore.png create mode 100644 src/images/common/migration/footer/explore-appgallery.png create mode 100644 src/images/common/migration/footer/get-googleplay.png create mode 100644 src/images/common/migration/footer/investors-in-people.png create mode 100644 static/css/global.css create mode 100644 tailwind.config.js diff --git a/gatsby-browser.js b/gatsby-browser.js index a53c3124d4a..37efbcdb2eb 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -15,9 +15,11 @@ import { getLanguage, updateURLAsPerUserLanguage, } from 'common/utility' -import './static/css/ibm-plex-sans-var.css' import './static/css/noto-sans-arabic.css' import './static/css/ubuntu.css' +import './static/css/global.css' +import '@deriv-com/blocks/style.css' +import '@deriv-com/components/style.css' const is_browser = typeof window !== 'undefined' diff --git a/gatsby-config.js b/gatsby-config.js index 66d97899414..f0b9729d8b1 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -56,6 +56,7 @@ module.exports = { // // precachePages: [`/`], // }, // }, + 'gatsby-plugin-postcss', { resolve: 'gatsby-plugin-sass', options: { diff --git a/package-lock.json b/package-lock.json index 9db448a1f43..c2eaf2b06b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,54 +9,59 @@ "version": "0.1.0", "license": "Apache License 2.0", "dependencies": { - "@artsy/fresnel": "^6.1.0", + "@artsy/fresnel": "^6.2.1", "@builder.io/partytown": "^0.8.1", - "@deriv/analytics": "^1.4.4", - "@deriv/deriv-api": "^1.0.11", - "@hookform/resolvers": "^3.0.1", - "@livechat/customer-sdk": "^3.1.0", - "@loadable/component": "^5.15.2", - "@radix-ui/react-accordion": "^1.1.0", - "@radix-ui/react-alert-dialog": "^1.0.3", - "@radix-ui/react-dropdown-menu": "^2.0.2", - "@radix-ui/react-navigation-menu": "^1.1.2", - "@svgr/webpack": "^8.0.1", - "@tanstack/react-table": "^8.8.5", + "@deriv-com/blocks": "^0.52.0", + "@deriv-com/components": "^0.29.0", + "@deriv-com/hooks": "^0.10.0", + "@deriv-com/providers": "^0.10.0", + "@deriv/analytics": "^1.4.3", + "@deriv/deriv-api": "^1.0.13", + "@deriv/quill-design": "^1.2.6", + "@deriv/quill-icons": "^1.0.16", + "@hookform/resolvers": "^3.3.2", + "@livechat/customer-sdk": "^3.1.5", + "@loadable/component": "^5.15.3", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-alert-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@svgr/webpack": "^8.1.0", + "@tanstack/react-table": "^8.10.7", "@vercel/gatsby-plugin-vercel-builder": "^0.1.2", "cli-select": "^1.1.2", "clsx": "^1.2.1", "commander": "^8.3.0", - "crc-32": "^1.2.0", + "crc-32": "^1.2.2", "cssnano": "^5.1.15", "deriv-api-ts": "^1.0.7", "embla-carousel-autoplay": "^6.2.0", "embla-carousel-react": "8.0.0-rc11", - "eslint-import-resolver-node": "^0.3.6", + "eslint-import-resolver-node": "^0.3.9", "extend": "^3.0.2", - "firebase": "^9.22.1", - "formik": "^2.2.9", - "gatsby": "^5.11.0", + "firebase": "^9.23.0", + "formik": "^2.4.5", + "gatsby": "^5.12.11", "gatsby-plugin-anchor-links": "^1.2.1", - "gatsby-plugin-canonical-urls": "^5.11.0", + "gatsby-plugin-canonical-urls": "^5.12.0", "gatsby-plugin-image": "3.11.0", - "gatsby-plugin-manifest": "^5.11.0", + "gatsby-plugin-manifest": "^5.12.3", "gatsby-plugin-robots-txt": "^1.8.0", - "gatsby-plugin-sass": "^6.11.0", - "gatsby-plugin-sharp": "^5.11.0", - "gatsby-plugin-sitemap": "^6.11.0", + "gatsby-plugin-sass": "^6.12.3", + "gatsby-plugin-sharp": "^5.12.3", + "gatsby-plugin-sitemap": "^6.12.3", "gatsby-plugin-svgr": "^3.0.0-beta.0", "gatsby-plugin-use-query-params": "^1.0.1", - "gatsby-source-filesystem": "^5.11.0", + "gatsby-source-filesystem": "^5.12.1", "gatsby-source-strapi": "^3.3.1", - "gatsby-transformer-sharp": "^5.11.0", - "i18next": "^21.6.5", + "gatsby-transformer-sharp": "^5.12.3", + "i18next": "^21.10.0", "install": "^0.13.0", "js-cookie": "^2.2.1", - "lottie-web": "^5.8.1", + "lottie-web": "^5.12.2", "match-sorter": "^6.3.1", - "npm": "^9.6.2", + "npm": "^9.9.2", "p-min-delay": "^4.0.2", - "postcss": "^8.4.5", "postcss-discard-duplicates": "^5.1.0", "postcss-ts-classnames": "^0.3.0", "prompt-sync": "^4.2.0", @@ -65,86 +70,91 @@ "react-date-picker": "8.4.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", - "react-hook-form": "^7.43.9", - "react-i18next": "^11.15.3", - "react-intersection-observer": "^9.4.3", + "react-hook-form": "^7.48.2", + "react-i18next": "^11.18.6", + "react-intersection-observer": "^9.5.3", "react-is": "^17.0.2", "react-ticker": "^1.3.2", "react-tiny-popover": "^7.2.4", "remove": "^0.1.5", - "rxjs": "^7.8.0", - "sass": "^1.58.3", - "swiper": "^9.1.1", + "rxjs": "^7.8.1", + "sass": "^1.69.5", + "swiper": "^9.4.1", "use-query-params": "^1.2.3", "usehooks-ts": "^2.9.1", - "webpack": "^5.65.0", - "yup": "^1.0.2" + "webpack": "^5.89.0", + "yup": "^1.3.2" }, "devDependencies": { - "@commitlint/cli": "^16.2.1", - "@commitlint/config-conventional": "^16.2.1", - "@deriv/api-types": "^1.0.94", - "@graphql-codegen/cli": "^2.6.2", - "@graphql-codegen/typescript": "^2.4.5", - "@graphql-codegen/typescript-operations": "^2.3.2", - "@loadable/babel-plugin": "^5.15.3", + "@commitlint/cli": "^16.3.0", + "@commitlint/config-conventional": "^16.2.4", + "@deriv/api-types": "^1.0.137", + "@graphql-codegen/cli": "^2.16.5", + "@graphql-codegen/typescript": "^2.8.8", + "@graphql-codegen/typescript-operations": "^2.5.13", + "@loadable/babel-plugin": "^5.16.1", + "@parcel/watcher": "^2.3.0", "@storybook/addon-actions": "^6.4.9", - "@storybook/addon-essentials": "^6.4.9", - "@storybook/addon-links": "^6.4.9", - "@storybook/builder-webpack5": "^6.4.9", - "@storybook/manager-webpack5": "^6.4.9", - "@storybook/react": "^6.4.9", + "@storybook/addon-essentials": "^6.5.16", + "@storybook/addon-links": "^6.5.16", + "@storybook/builder-webpack5": "^6.5.16", + "@storybook/manager-webpack5": "^6.5.16", + "@storybook/react": "^6.5.16", "@stylelint/postcss-css-in-js": "^0.38.0", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^14.0.0", - "@testing-library/user-event": "^14.4.3", - "@types/jest": "^29.5.3", - "@types/js-cookie": "^3.0.3", - "@types/node": "^20.4.8", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@types/react-test-renderer": "^18.0.0", - "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.9.0", - "@typescript-eslint/parser": "^5.9.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.1", + "@types/jest": "^29.5.10", + "@types/js-cookie": "^3.0.6", + "@types/node": "^20.10.0", + "@types/react": "^18.2.38", + "@types/react-dom": "^18.2.17", + "@types/react-test-renderer": "^18.0.7", + "@types/styled-components": "^5.1.32", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", + "autoprefixer": "^10.4.16", "babel-eslint": "10.1.0", - "babel-jest": "^29.5.0", - "babel-plugin-styled-components": "^2.0.2", + "babel-jest": "^29.7.0", + "babel-plugin-styled-components": "^2.1.4", "babel-preset-gatsby": "^2.25.0", "eslint": "^7.32.0", "eslint-loader": "^4.0.2", - "eslint-plugin-deprecation": "^1.3.2", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jest": "^27.2.1", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.5.0", - "eslint-webpack-plugin": "^3.1.1", + "eslint-plugin-deprecation": "^1.5.0", + "eslint-plugin-import": "^2.29.0", + "eslint-plugin-jest": "^27.6.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-webpack-plugin": "^3.2.0", "gatsby-plugin-env-variables": "^2.3.0", - "gatsby-plugin-eslint": "^4.0.2", - "gatsby-plugin-styled-components": "^6.11.0", - "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31", + "gatsby-plugin-eslint": "^4.0.4", + "gatsby-plugin-postcss": "^6.12.0", + "gatsby-plugin-styled-components": "^6.12.0", + "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32", "gh-pages": "^3.2.3", "husky": "^7.0.4", "identity-obj-proxy": "^3.0.0", - "jest": "^29.5.0", + "jest": "^29.7.0", "jest-chain": "^1.1.6", - "jest-config": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", - "jest-extended": "^4.0.0", - "lint-staged": "^12.1.5", + "jest-config": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "jest-extended": "^4.0.2", + "lint-staged": "^12.5.0", "npm-force-resolutions": "0.0.10", - "prettier": "^2.5.1", - "query-string": "^7.0.1", + "postcss": "^8.4.31", + "prettier": "^2.8.8", + "query-string": "^7.1.3", "react-test-renderer": "^18.2.0", - "styled-components": "^5.3.3", - "stylelint": "^14.2.0", - "stylelint-config-prettier": "^9.0.3", + "styled-components": "^5.3.11", + "stylelint": "^14.16.1", + "stylelint-config-prettier": "^9.0.5", "stylelint-config-standard": "^24.0.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", - "stylelint-webpack-plugin": "^3.1.0", - "typescript": "^4.5.4", - "typescript-plugin-css-modules": "^4.2.2" + "stylelint-webpack-plugin": "^3.3.0", + "tailwindcss": "^3.3.5", + "typescript": "^5.3.2", + "typescript-plugin-css-modules": "^4.2.3" }, "engines": { "node": "18.x", @@ -165,6 +175,18 @@ "integrity": "sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==", "dev": true }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", @@ -2758,6 +2780,19 @@ "node": ">=8" } }, + "node_modules/@commitlint/load/node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/@commitlint/message": { "version": "16.2.1", "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-16.2.1.tgz", @@ -2968,10 +3003,30 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@deriv-com/blocks": { + "version": "0.52.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/blocks/0.52.0/723ff18725a897490e5d654b7d02ac7ff6b6c6e9", + "integrity": "sha512-mcmz9Y+pnym/AWb1ABrulpckkCUhjORxb4NKI9hP5AJjPwC1vCoK2G0M6TGB7pWoy2zJFhVT20Z+I77UtcgM8g==" + }, + "node_modules/@deriv-com/components": { + "version": "0.29.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/components/0.29.0/181cf88daaa09e58be1fe51992c2fbc95a78f972", + "integrity": "sha512-w7KkQpjUaDxD1U0hKy0e49UUhb+TGfL44l0GapV7ILNkGIRmn1t+QkeP6A90ml0ydyISk6u8+57ONMJ7NLx1ng==" + }, + "node_modules/@deriv-com/hooks": { + "version": "0.10.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/hooks/0.10.0/8e9f71a103b896618566a4505f74c93de107ecc6", + "integrity": "sha512-8BpA5OPjaFx55LDp6BFhqW6gBsP63X7E4GstdD1HAh8h9Dy1tq6nztJC0bSY9O9tjAZ0/hFrshGALv2L9ak6Sw==" + }, + "node_modules/@deriv-com/providers": { + "version": "0.10.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/providers/0.10.0/8e77bc95f5058c59ba665e58585091f270e4d94b", + "integrity": "sha512-FE40EqmS6cmi4JWQurThE/mQDZesg6iBDRfTTwE5YKnc4w+2EqsO8Eigm4vO79elV3iUkvLLeU5Eawv66uwzqQ==" + }, "node_modules/@deriv/analytics": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/@deriv/analytics/-/analytics-1.4.4.tgz", - "integrity": "sha512-brMCtAel5z4GOnDA32dM93buNu9obtqz6+SlzQuXnKdsonF/YaY+XjNC+rmURnV4NqTUq5nRJyIxY6h9kitsrw==", + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/@deriv/analytics/-/analytics-1.4.6.tgz", + "integrity": "sha512-KpWjnqXs1S2bPenfyBlVMeP1vOj68XCe+2gOTvPGb/1XZ8rFat43AkqiRpdxngMIklPsHxjxT/cMyy/eBRtLBw==", "dependencies": { "@growthbook/growthbook": "^0.29.0", "rudder-sdk-js": "^2.35.0" @@ -2982,9 +3037,9 @@ } }, "node_modules/@deriv/api-types": { - "version": "1.0.141", - "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.141.tgz", - "integrity": "sha512-Q/7bm4Xc/nD4djvBXGdPCbY5Tr/Ce7KM6wVJtYn8pTtW5bdVDffAk9i0DdgFh66gZeTL4IPQ9CwcZOcpvuXrrw==" + "version": "1.0.144", + "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.144.tgz", + "integrity": "sha512-hlEH95LHZHmPft+K1Edi+XmI5PVBnWtL6FvaLWxb6uirbjpKZ+ZFnuY9zqdg63BcbG1ZhQCjb5opzK5zzFyReQ==" }, "node_modules/@deriv/deriv-api": { "version": "1.0.13", @@ -3012,6 +3067,31 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@deriv/quill-design": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@deriv/quill-design/-/quill-design-1.2.9.tgz", + "integrity": "sha512-2ShVhyTa76NGTM0Fybul0FhCZBYMihG9c+hjch5zD6sWWQ2a3kTcHcmPHhReI4Ee4/mfNf1YWFQdfEr7mgzi3g==", + "peerDependencies": { + "@deriv/quill-icons": "^1.0.10", + "@headlessui/react": "^1.7.17", + "@types/react": "^17.x || ^18.x", + "@use-gesture/react": "^10.3.0", + "class-variance-authority": "^0.7.0", + "react": "^17.x || ^18.x", + "react-dom": "^17.x || ^18.x", + "tailwind-merge": "^1.14.0", + "usehooks-ts": "^2.9.1" + } + }, + "node_modules/@deriv/quill-icons": { + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.0.16.tgz", + "integrity": "sha512-bKjhIictrp85MKNKWZ6B5YFbUUulZVgIcPbsWJ8eXxhAYKAKAFleQXT+HFWJB6ciq4qoD83h3VzXN5eH5r1JkQ==", + "peerDependencies": { + "react": ">= 16", + "react-dom": ">= 16" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -4158,9 +4238,9 @@ "integrity": "sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==" }, "node_modules/@floating-ui/core": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz", - "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", + "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", "dependencies": { "@floating-ui/utils": "^0.1.3" } @@ -5271,6 +5351,22 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.17", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz", + "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==", + "peer": true, + "dependencies": { + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@hookform/resolvers": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.2.tgz", @@ -7289,9 +7385,9 @@ } }, "node_modules/@livechat/platform-client/node_modules/@livechat/data-utils": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.3.tgz", - "integrity": "sha512-Ao0b6UMxJ1CmqRhFjMsd2n6gM4fmfbwe2gZTbTLdvU2u5OQHj008T20mjQ+NOPwbcT+8dMj8wF5TrftMu4oA1w==" + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.4.tgz", + "integrity": "sha512-LhSgNVrNqfa37pajGCv96jvsEwuUKoTmb4NXLr2Mk4gN2YYYkmqzHWqGAcGzENFeSar4R/P3LohZO8tkbmnb6g==" }, "node_modules/@livechat/promise-try": { "version": "0.1.0", @@ -7321,9 +7417,9 @@ } }, "node_modules/@livechat/url-utils/node_modules/@livechat/data-utils": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.3.tgz", - "integrity": "sha512-Ao0b6UMxJ1CmqRhFjMsd2n6gM4fmfbwe2gZTbTLdvU2u5OQHj008T20mjQ+NOPwbcT+8dMj8wF5TrftMu4oA1w==" + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@livechat/data-utils/-/data-utils-1.0.4.tgz", + "integrity": "sha512-LhSgNVrNqfa37pajGCv96jvsEwuUKoTmb4NXLr2Mk4gN2YYYkmqzHWqGAcGzENFeSar4R/P3LohZO8tkbmnb6g==" }, "node_modules/@livechat/websocket-manager": { "version": "0.1.1", @@ -10705,9 +10801,9 @@ "dev": true }, "node_modules/@storybook/builder-webpack4/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/builder-webpack4/node_modules/@webassemblyjs/ast": { @@ -10853,6 +10949,28 @@ "node": ">=0.4.0" } }, + "node_modules/@storybook/builder-webpack4/node_modules/autoprefixer": { + "version": "9.8.8", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", + "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==", + "dev": true, + "dependencies": { + "browserslist": "^4.12.0", + "caniuse-lite": "^1.0.30001109", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "picocolors": "^0.2.1", + "postcss": "^7.0.32", + "postcss-value-parser": "^4.1.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "funding": { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + } + }, "node_modules/@storybook/builder-webpack4/node_modules/braces": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", @@ -11390,6 +11508,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@storybook/builder-webpack4/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "node_modules/@storybook/builder-webpack4/node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -11977,9 +12101,9 @@ } }, "node_modules/@storybook/builder-webpack5/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/channel-postmessage": { @@ -12307,9 +12431,9 @@ } }, "node_modules/@storybook/core-common/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/core-common/node_modules/@webassemblyjs/ast": { @@ -13056,9 +13180,9 @@ } }, "node_modules/@storybook/core-server/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/core-server/node_modules/@webassemblyjs/ast": { @@ -13873,9 +13997,9 @@ "dev": true }, "node_modules/@storybook/manager-webpack4/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/manager-webpack4/node_modules/@webassemblyjs/ast": { @@ -14594,6 +14718,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@storybook/manager-webpack4/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "node_modules/@storybook/manager-webpack4/node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -15169,9 +15299,9 @@ } }, "node_modules/@storybook/manager-webpack5/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/manager-webpack5/node_modules/ansi-styles": { @@ -15631,9 +15761,9 @@ } }, "node_modules/@storybook/react/node_modules/@types/node": { - "version": "16.18.67", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz", - "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==", + "version": "16.18.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", + "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", "dev": true }, "node_modules/@storybook/react/node_modules/fs-extra": { @@ -16881,9 +17011,9 @@ } }, "node_modules/@types/jest": { - "version": "29.5.10", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.10.tgz", - "integrity": "sha512-tE4yxKEphEyxj9s4inideLHktW/x6DwesIwWZ9NN1FKf9zbJYsnhBoA9vrHA/IuIOKwPa5PcFBNV4lpMIOEzyQ==", + "version": "29.5.11", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz", + "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==", "dev": true, "dependencies": { "expect": "^29.0.0", @@ -17029,9 +17159,9 @@ "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==" }, "node_modules/@types/node": { - "version": "20.10.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz", - "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==", + "version": "20.10.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", + "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", "dependencies": { "undici-types": "~5.26.4" } @@ -17150,9 +17280,9 @@ } }, "node_modules/@types/react/node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/@types/responselike": { "version": "1.0.3", @@ -17210,9 +17340,9 @@ "dev": true }, "node_modules/@types/styled-components": { - "version": "5.1.32", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.32.tgz", - "integrity": "sha512-DqVpl8R0vbhVSop4120UHtGrFmHuPeoDwF4hDT0kPJTY8ty0SI38RV3VhCMsWigMUXG+kCXu7vMRqMFNy6eQgA==", + "version": "5.1.34", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", + "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", "dev": true, "dependencies": { "@types/hoist-non-react-statics": "*", @@ -17221,9 +17351,9 @@ } }, "node_modules/@types/styled-components/node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true }, "node_modules/@types/tapable": { @@ -17606,6 +17736,24 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@use-gesture/core": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.0.tgz", + "integrity": "sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A==", + "peer": true + }, + "node_modules/@use-gesture/react": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.0.tgz", + "integrity": "sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==", + "peer": true, + "dependencies": { + "@use-gesture/core": "10.3.0" + }, + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/@vercel/build-utils": { "version": "5.9.0", "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-5.9.0.tgz", @@ -18082,9 +18230,9 @@ } }, "node_modules/@whatwg-node/fetch/node_modules/@types/node": { - "version": "18.19.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.2.tgz", - "integrity": "sha512-6wzfBdbWpe8QykUkXBjtmO3zITA0A3FIjoy+in0Y2K4KrCiRhNYJIdwAPDffZ3G6GnaKaSLSEa9ZuORLfEoiwg==", + "version": "18.19.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz", + "integrity": "sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==", "dev": true, "peer": true, "dependencies": { @@ -18214,9 +18362,9 @@ } }, "node_modules/acorn-globals/node_modules/acorn-walk": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", - "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz", + "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==", "dev": true, "engines": { "node": ">=0.4.0" @@ -18485,6 +18633,12 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -18992,42 +19146,39 @@ } }, "node_modules/autoprefixer": { - "version": "9.8.8", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", - "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==", - "dev": true, + "version": "10.4.16", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", + "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "dependencies": { - "browserslist": "^4.12.0", - "caniuse-lite": "^1.0.30001109", + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001538", + "fraction.js": "^4.3.6", "normalize-range": "^0.1.2", - "num2fraction": "^1.2.2", - "picocolors": "^0.2.1", - "postcss": "^7.0.32", - "postcss-value-parser": "^4.1.0" + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" }, "bin": { "autoprefixer": "bin/autoprefixer" }, - "funding": { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - } - }, - "node_modules/autoprefixer/node_modules/postcss": { - "version": "7.0.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", - "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", - "dev": true, - "dependencies": { - "picocolors": "^0.2.1", - "source-map": "^0.6.1" - }, "engines": { - "node": ">=6.0.0" + "node": "^10 || ^12 || >=14" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" + "peerDependencies": { + "postcss": "^8.1.0" } }, "node_modules/available-typed-arrays": { @@ -21009,6 +21160,27 @@ "node": ">= 0.4" } }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "peer": true, + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -21154,6 +21326,12 @@ "node": ">= 10" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", + "peer": true + }, "node_modules/clipboardy": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", @@ -21836,9 +22014,9 @@ } }, "node_modules/core-js": { - "version": "3.33.3", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.3.tgz", - "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==", + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.34.0.tgz", + "integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag==", "hasInstallScript": true, "funding": { "type": "opencollective", @@ -21846,11 +22024,11 @@ } }, "node_modules/core-js-compat": { - "version": "3.33.3", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.33.3.tgz", - "integrity": "sha512-cNzGqFsh3Ot+529GIXacjTJ7kegdt5fPXxCBVS1G0iaZpuo/tBz399ymceLJveQhFFZ8qThHiP3fzuoQjKN2ow==", + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.34.0.tgz", + "integrity": "sha512-4ZIyeNbW/Cn1wkMMDy+mvrRUxrwFNjKwbhCfQpDd+eLgYipDqp8oGFGtLmhh18EDPKA0g3VUBYOxQGGwvWLVpA==", "dependencies": { - "browserslist": "^4.22.1" + "browserslist": "^4.22.2" }, "funding": { "type": "opencollective", @@ -21858,9 +22036,9 @@ } }, "node_modules/core-js-pure": { - "version": "3.33.3", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.33.3.tgz", - "integrity": "sha512-taJ00IDOP+XYQEA2dAe4ESkmHt1fL8wzYDo3mRWQey8uO9UojlBFMneA65kMyxfYP7106c6LzWaq7/haDT6BCQ==", + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.34.0.tgz", + "integrity": "sha512-pmhivkYXkymswFfbXsANmBAewXx86UBfmagP+w0wkK06kLsLlTK5oQmsURPivzMkIBQiYq2cjamcZExIwlFQIg==", "hasInstallScript": true, "funding": { "type": "opencollective", @@ -23671,6 +23849,12 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true + }, "node_modules/diff": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", @@ -23716,6 +23900,12 @@ "node": ">=8" } }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -23925,20 +24115,15 @@ "edge-runtime": "dist/cli/index.js" } }, - "node_modules/edge-runtime/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, "node_modules/electron-to-chromium": { - "version": "1.4.603", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.603.tgz", - "integrity": "sha512-Dvo5OGjnl7AZTU632dFJtWj0uJK835eeOVQIuRcmBmsFsTNn3cL05FqOyHAfGQDIoHfLhyJ1Tya3PJ0ceMz54g==" + "version": "1.4.607", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.607.tgz", + "integrity": "sha512-YUlnPwE6eYxzwBnFmawA8LiLRfm70R2aJRIUv0n03uHt/cUzzYACOogmvk8M2+hVzt/kB80KJXx7d5f5JofPvQ==" }, "node_modules/elliptic": { "version": "6.5.4", @@ -28054,6 +28239,113 @@ "node": ">=18.0.0" } }, + "node_modules/gatsby-plugin-postcss": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-6.12.0.tgz", + "integrity": "sha512-uzlmFvPcsYKbyyMMsBR0W1iWGOiJPJVNiVwut7h3ah0mL0ooMO5ANO+E7Sv0crEXrSJ/4QymFRX4kHDBfVn87g==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.20.13", + "postcss-loader": "^7.3.3" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "gatsby": "^5.0.0-next", + "postcss": "^8.0.5" + } + }, + "node_modules/gatsby-plugin-postcss/node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/gatsby-plugin-postcss/node_modules/jiti": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", + "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, + "node_modules/gatsby-plugin-postcss/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gatsby-plugin-postcss/node_modules/postcss-loader": { + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz", + "integrity": "sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==", + "dev": true, + "dependencies": { + "cosmiconfig": "^8.2.0", + "jiti": "^1.18.2", + "semver": "^7.3.8" + }, + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "postcss": "^7.0.0 || ^8.0.1", + "webpack": "^5.0.0" + } + }, + "node_modules/gatsby-plugin-postcss/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gatsby-plugin-postcss/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/gatsby-plugin-robots-txt": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-robots-txt/-/gatsby-plugin-robots-txt-1.8.0.tgz", @@ -28742,9 +29034,9 @@ } }, "node_modules/gatsby/node_modules/acorn-walk": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", - "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz", + "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==", "engines": { "node": ">=0.4.0" } @@ -28763,42 +29055,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/gatsby/node_modules/autoprefixer": { - "version": "10.4.16", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", - "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "browserslist": "^4.21.10", - "caniuse-lite": "^1.0.30001538", - "fraction.js": "^4.3.6", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/gatsby/node_modules/babel-preset-gatsby": { "version": "3.12.1", "resolved": "https://registry.npmjs.org/babel-preset-gatsby/-/babel-preset-gatsby-3.12.1.tgz", @@ -29213,11 +29469,6 @@ "node": ">=8" } }, - "node_modules/gatsby/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, "node_modules/gatsby/node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -30752,9 +31003,9 @@ } }, "node_modules/html-webpack-plugin": { - "version": "5.5.3", - "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz", - "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.4.tgz", + "integrity": "sha512-3wNSaVVxdxcu0jd4FpQFoICdqgxs4zIQQvj+2yQKFfBOnLETQ6X5CDWdeasuGlSsooFlMkEioWDTqBv1wvw5Iw==", "dev": true, "dependencies": { "@types/html-minifier-terser": "^6.0.0", @@ -38022,139 +38273,6 @@ "node-gyp-build-optional-packages-test": "build-test.js" } }, - "node_modules/msw": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.2.tgz", - "integrity": "sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==", - "hasInstallScript": true, - "dependencies": { - "@mswjs/cookies": "^0.2.2", - "@mswjs/interceptors": "^0.17.10", - "@open-draft/until": "^1.0.3", - "@types/cookie": "^0.4.1", - "@types/js-levenshtein": "^1.1.1", - "chalk": "^4.1.1", - "chokidar": "^3.4.2", - "cookie": "^0.4.2", - "graphql": "^16.8.1", - "headers-polyfill": "3.2.5", - "inquirer": "^8.2.0", - "is-node-process": "^1.2.0", - "js-levenshtein": "^1.1.6", - "node-fetch": "^2.6.7", - "outvariant": "^1.4.0", - "path-to-regexp": "^6.2.0", - "strict-event-emitter": "^0.4.3", - "type-fest": "^2.19.0", - "yargs": "^17.3.1" - }, - "bin": { - "msw": "cli/index.js" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mswjs" - }, - "peerDependencies": { - "typescript": ">= 4.4.x <= 5.2.x" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/msw/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/msw/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/msw/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/msw/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "node_modules/msw/node_modules/cookie": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", - "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/msw/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/msw/node_modules/path-to-regexp": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", - "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==" - }, - "node_modules/msw/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/msw/node_modules/type-fest": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", - "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", - "engines": { - "node": ">=12.20" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/multer": { "version": "1.4.5-lts.1", "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz", @@ -38177,6 +38295,17 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nan": { "version": "2.18.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz", @@ -38462,12 +38591,6 @@ "isarray": "^1.0.0" } }, - "node_modules/node-libs-browser/node_modules/inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==", - "dev": true - }, "node_modules/node-libs-browser/node_modules/isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", @@ -38486,15 +38609,6 @@ "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", "dev": true }, - "node_modules/node-libs-browser/node_modules/util": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", - "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==", - "dev": true, - "dependencies": { - "inherits": "2.0.3" - } - }, "node_modules/node-object-hash": { "version": "2.3.10", "resolved": "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.3.10.tgz", @@ -42688,9 +42802,9 @@ "integrity": "sha512-rxJOljMuWtYlvREBmd6TZYanfcPhNUKtGDZBjBBS8WG1dpN2iwPsRJZgQqN/OtJuiQckdRFOfzogqJClTrsi7g==" }, "node_modules/picocolors": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", - "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -42995,6 +43109,12 @@ "postcss": "^7.0.26" } }, + "node_modules/postcss-flexbugs-fixes/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "node_modules/postcss-flexbugs-fixes/node_modules/postcss": { "version": "7.0.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", @@ -43012,22 +43132,64 @@ "url": "https://opencollective.com/postcss/" } }, - "node_modules/postcss-load-config": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", - "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", "dev": true, "dependencies": { - "lilconfig": "^2.0.5", - "yaml": "^1.10.2" + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" }, "engines": { - "node": ">= 10" + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/postcss/" }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", + "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "lilconfig": "^3.0.0", + "yaml": "^2.3.4" + }, + "engines": { + "node": ">= 14" + }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" @@ -43041,6 +43203,24 @@ } } }, + "node_modules/postcss-load-config/node_modules/lilconfig": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz", + "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/postcss-load-config/node_modules/yaml": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, "node_modules/postcss-loader": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz", @@ -43251,6 +43431,25 @@ "postcss": "^8.1.0" } }, + "node_modules/postcss-nested": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.11" + }, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, "node_modules/postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", @@ -43505,11 +43704,6 @@ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" }, - "node_modules/postcss-svgo/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, "node_modules/postcss-svgo/node_modules/svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -43550,6 +43744,11 @@ "postcss-selector-parser": "^6.0.2" } }, + "node_modules/postcss-ts-classnames/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==" + }, "node_modules/postcss-ts-classnames/node_modules/postcss": { "version": "7.0.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", @@ -43585,11 +43784,6 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, - "node_modules/postcss/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, "node_modules/prebuild-install": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz", @@ -44774,6 +44968,24 @@ "node": ">=0.8" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/read-cache/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -45760,6 +45972,117 @@ "ramda": "0.29.1" } }, + "node_modules/rudder-sdk-js/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/rudder-sdk-js/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/rudder-sdk-js/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/rudder-sdk-js/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/rudder-sdk-js/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/rudder-sdk-js/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/rudder-sdk-js/node_modules/msw": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.2.tgz", + "integrity": "sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==", + "hasInstallScript": true, + "dependencies": { + "@mswjs/cookies": "^0.2.2", + "@mswjs/interceptors": "^0.17.10", + "@open-draft/until": "^1.0.3", + "@types/cookie": "^0.4.1", + "@types/js-levenshtein": "^1.1.1", + "chalk": "^4.1.1", + "chokidar": "^3.4.2", + "cookie": "^0.4.2", + "graphql": "^16.8.1", + "headers-polyfill": "3.2.5", + "inquirer": "^8.2.0", + "is-node-process": "^1.2.0", + "js-levenshtein": "^1.1.6", + "node-fetch": "^2.6.7", + "outvariant": "^1.4.0", + "path-to-regexp": "^6.2.0", + "strict-event-emitter": "^0.4.3", + "type-fest": "^2.19.0", + "yargs": "^17.3.1" + }, + "bin": { + "msw": "cli/index.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mswjs" + }, + "peerDependencies": { + "typescript": ">= 4.4.x <= 5.2.x" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/rudder-sdk-js/node_modules/path-to-regexp": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", + "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==" + }, "node_modules/rudder-sdk-js/node_modules/ramda": { "version": "0.29.1", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz", @@ -45769,6 +46092,42 @@ "url": "https://opencollective.com/ramda" } }, + "node_modules/rudder-sdk-js/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/rudder-sdk-js/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rudder-sdk-js/node_modules/typescript": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "optional": true, + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -46188,9 +46547,9 @@ } }, "node_modules/sass-loader": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz", - "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==", + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.0.tgz", + "integrity": "sha512-VsU71W7VR6SChMJZUqtrfLeMSA8ns7QTHbnA7cfevtjb3c392mX93lr0Dmr4uU1ch5uIbEmfmHjdrDYcXXkQ7w==", "dependencies": { "klona": "^2.0.4", "loader-utils": "^2.0.0", @@ -46207,7 +46566,7 @@ }, "peerDependencies": { "fibers": ">= 3.1.0", - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "sass": "^1.3.0", "webpack": "^4.36.0 || ^5.0.0" }, @@ -47873,6 +48232,12 @@ "postcss": "^7.0.26" } }, + "node_modules/stylelint-processor-styled-components/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "node_modules/stylelint-processor-styled-components/node_modules/postcss": { "version": "7.0.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", @@ -48008,12 +48373,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/stylelint/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true - }, "node_modules/stylelint/node_modules/type-fest": { "version": "0.18.1", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", @@ -48076,6 +48435,57 @@ "node": ">= 8" } }, + "node_modules/sucrase": { + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", + "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/sudo-prompt": { "version": "8.2.5", "resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-8.2.5.tgz", @@ -48235,11 +48645,6 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, - "node_modules/svgo/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, "node_modules/swap-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz", @@ -48393,6 +48798,83 @@ "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, + "node_modules/tailwind-merge": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz", + "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, + "node_modules/tailwindcss": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz", + "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==", + "dev": true, + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.5.3", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.0", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.19.1", + "lilconfig": "^2.1.0", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", + "postcss-selector-parser": "^6.0.11", + "resolve": "^1.22.2", + "sucrase": "^3.32.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tailwindcss/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/tailwindcss/node_modules/jiti": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", + "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, + "node_modules/tailwindcss/node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -48627,6 +49109,27 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -48937,6 +49440,12 @@ "node": ">=6.10" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "node_modules/ts-log": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/ts-log/-/ts-log-2.2.5.tgz", @@ -49006,9 +49515,9 @@ } }, "node_modules/ts-node/node_modules/acorn-walk": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", - "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz", + "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==", "engines": { "node": ">=0.4.0" } @@ -49236,15 +49745,15 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/typescript-plugin-css-modules": { @@ -49274,6 +49783,35 @@ "typescript": ">=3.9.0" } }, + "node_modules/typescript-plugin-css-modules/node_modules/postcss-load-config": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, + "dependencies": { + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" + }, + "engines": { + "node": ">= 10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, "node_modules/typescript-plugin-css-modules/node_modules/strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", @@ -49946,15 +50484,12 @@ } }, "node_modules/util": { - "version": "0.12.5", - "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", - "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", + "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==", + "dev": true, "dependencies": { - "inherits": "^2.0.3", - "is-arguments": "^1.0.4", - "is-generator-function": "^1.0.7", - "is-typed-array": "^1.1.3", - "which-typed-array": "^1.1.2" + "inherits": "2.0.3" } }, "node_modules/util-deprecate": { @@ -49972,6 +50507,12 @@ "object.getownpropertydescriptors": "^2.0.3" } }, + "node_modules/util/node_modules/inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==", + "dev": true + }, "node_modules/utila": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", @@ -50458,6 +50999,18 @@ "@zxing/text-encoding": "0.9.0" } }, + "node_modules/web-encoding/node_modules/util": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", + "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", + "dependencies": { + "inherits": "^2.0.3", + "is-arguments": "^1.0.4", + "is-generator-function": "^1.0.7", + "is-typed-array": "^1.1.3", + "which-typed-array": "^1.1.2" + } + }, "node_modules/web-namespaces": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz", @@ -50585,9 +51138,9 @@ } }, "node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz", - "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==", + "version": "8.3.1", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.1.tgz", + "integrity": "sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==", "dev": true, "engines": { "node": ">=0.4.0" @@ -50623,12 +51176,6 @@ "node": ">=0.10.0" } }, - "node_modules/webpack-bundle-analyzer/node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true - }, "node_modules/webpack-bundle-analyzer/node_modules/ws": { "version": "7.5.9", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", diff --git a/package.json b/package.json index 4fbdbab34fa..7ff3b691612 100644 --- a/package.json +++ b/package.json @@ -4,54 +4,59 @@ "version": "0.1.0", "author": "Deriv", "dependencies": { - "@artsy/fresnel": "^6.1.0", + "@artsy/fresnel": "^6.2.1", "@builder.io/partytown": "^0.8.1", - "@deriv/analytics": "^1.4.4", - "@deriv/deriv-api": "^1.0.11", - "@hookform/resolvers": "^3.0.1", - "@livechat/customer-sdk": "^3.1.0", - "@loadable/component": "^5.15.2", - "@radix-ui/react-accordion": "^1.1.0", - "@radix-ui/react-alert-dialog": "^1.0.3", - "@radix-ui/react-dropdown-menu": "^2.0.2", - "@radix-ui/react-navigation-menu": "^1.1.2", - "@svgr/webpack": "^8.0.1", - "@tanstack/react-table": "^8.8.5", + "@deriv-com/blocks": "^0.52.0", + "@deriv-com/components": "^0.29.0", + "@deriv-com/hooks": "^0.10.0", + "@deriv-com/providers": "^0.10.0", + "@deriv/analytics": "^1.4.3", + "@deriv/deriv-api": "^1.0.13", + "@deriv/quill-design": "^1.2.6", + "@deriv/quill-icons": "^1.0.16", + "@hookform/resolvers": "^3.3.2", + "@livechat/customer-sdk": "^3.1.5", + "@loadable/component": "^5.15.3", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-alert-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@svgr/webpack": "^8.1.0", + "@tanstack/react-table": "^8.10.7", "@vercel/gatsby-plugin-vercel-builder": "^0.1.2", "cli-select": "^1.1.2", "clsx": "^1.2.1", "commander": "^8.3.0", - "crc-32": "^1.2.0", + "crc-32": "^1.2.2", "cssnano": "^5.1.15", "deriv-api-ts": "^1.0.7", "embla-carousel-autoplay": "^6.2.0", "embla-carousel-react": "8.0.0-rc11", - "eslint-import-resolver-node": "^0.3.6", + "eslint-import-resolver-node": "^0.3.9", "extend": "^3.0.2", - "firebase": "^9.22.1", - "formik": "^2.2.9", - "gatsby": "^5.11.0", + "firebase": "^9.23.0", + "formik": "^2.4.5", + "gatsby": "^5.12.11", "gatsby-plugin-anchor-links": "^1.2.1", - "gatsby-plugin-canonical-urls": "^5.11.0", + "gatsby-plugin-canonical-urls": "^5.12.0", "gatsby-plugin-image": "3.11.0", - "gatsby-plugin-manifest": "^5.11.0", + "gatsby-plugin-manifest": "^5.12.3", "gatsby-plugin-robots-txt": "^1.8.0", - "gatsby-plugin-sass": "^6.11.0", - "gatsby-plugin-sharp": "^5.11.0", - "gatsby-plugin-sitemap": "^6.11.0", + "gatsby-plugin-sass": "^6.12.3", + "gatsby-plugin-sharp": "^5.12.3", + "gatsby-plugin-sitemap": "^6.12.3", "gatsby-plugin-svgr": "^3.0.0-beta.0", "gatsby-plugin-use-query-params": "^1.0.1", - "gatsby-source-filesystem": "^5.11.0", + "gatsby-source-filesystem": "^5.12.1", "gatsby-source-strapi": "^3.3.1", - "gatsby-transformer-sharp": "^5.11.0", - "i18next": "^21.6.5", + "gatsby-transformer-sharp": "^5.12.3", + "i18next": "^21.10.0", "install": "^0.13.0", "js-cookie": "^2.2.1", - "lottie-web": "^5.8.1", + "lottie-web": "^5.12.2", "match-sorter": "^6.3.1", - "npm": "^9.6.2", + "npm": "^9.9.2", "p-min-delay": "^4.0.2", - "postcss": "^8.4.5", "postcss-discard-duplicates": "^5.1.0", "postcss-ts-classnames": "^0.3.0", "prompt-sync": "^4.2.0", @@ -60,86 +65,91 @@ "react-date-picker": "8.4.0", "react-device-detect": "^2.2.2", "react-dom": "^18.2.0", - "react-hook-form": "^7.43.9", - "react-i18next": "^11.15.3", - "react-intersection-observer": "^9.4.3", + "react-hook-form": "^7.48.2", + "react-i18next": "^11.18.6", + "react-intersection-observer": "^9.5.3", "react-is": "^17.0.2", "react-ticker": "^1.3.2", "react-tiny-popover": "^7.2.4", "remove": "^0.1.5", - "rxjs": "^7.8.0", - "sass": "^1.58.3", - "swiper": "^9.1.1", + "rxjs": "^7.8.1", + "sass": "^1.69.5", + "swiper": "^9.4.1", "use-query-params": "^1.2.3", "usehooks-ts": "^2.9.1", - "webpack": "^5.65.0", - "yup": "^1.0.2" + "webpack": "^5.89.0", + "yup": "^1.3.2" }, "devDependencies": { - "@commitlint/cli": "^16.2.1", - "@commitlint/config-conventional": "^16.2.1", - "@deriv/api-types": "^1.0.94", - "@graphql-codegen/cli": "^2.6.2", - "@graphql-codegen/typescript": "^2.4.5", - "@graphql-codegen/typescript-operations": "^2.3.2", - "@loadable/babel-plugin": "^5.15.3", + "@commitlint/cli": "^16.3.0", + "@commitlint/config-conventional": "^16.2.4", + "@deriv/api-types": "^1.0.137", + "@graphql-codegen/cli": "^2.16.5", + "@graphql-codegen/typescript": "^2.8.8", + "@graphql-codegen/typescript-operations": "^2.5.13", + "@loadable/babel-plugin": "^5.16.1", + "@parcel/watcher": "^2.3.0", "@storybook/addon-actions": "^6.4.9", - "@storybook/addon-essentials": "^6.4.9", - "@storybook/addon-links": "^6.4.9", - "@storybook/builder-webpack5": "^6.4.9", - "@storybook/manager-webpack5": "^6.4.9", - "@storybook/react": "^6.4.9", + "@storybook/addon-essentials": "^6.5.16", + "@storybook/addon-links": "^6.5.16", + "@storybook/builder-webpack5": "^6.5.16", + "@storybook/manager-webpack5": "^6.5.16", + "@storybook/react": "^6.5.16", "@stylelint/postcss-css-in-js": "^0.38.0", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^14.0.0", - "@testing-library/user-event": "^14.4.3", - "@types/jest": "^29.5.3", - "@types/js-cookie": "^3.0.3", - "@types/node": "^20.4.8", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@types/react-test-renderer": "^18.0.0", - "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.9.0", - "@typescript-eslint/parser": "^5.9.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.1", + "@types/jest": "^29.5.10", + "@types/js-cookie": "^3.0.6", + "@types/node": "^20.10.0", + "@types/react": "^18.2.38", + "@types/react-dom": "^18.2.17", + "@types/react-test-renderer": "^18.0.7", + "@types/styled-components": "^5.1.32", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", + "autoprefixer": "^10.4.16", "babel-eslint": "10.1.0", - "babel-jest": "^29.5.0", - "babel-plugin-styled-components": "^2.0.2", + "babel-jest": "^29.7.0", + "babel-plugin-styled-components": "^2.1.4", "babel-preset-gatsby": "^2.25.0", "eslint": "^7.32.0", "eslint-loader": "^4.0.2", - "eslint-plugin-deprecation": "^1.3.2", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jest": "^27.2.1", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.5.0", - "eslint-webpack-plugin": "^3.1.1", + "eslint-plugin-deprecation": "^1.5.0", + "eslint-plugin-import": "^2.29.0", + "eslint-plugin-jest": "^27.6.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-webpack-plugin": "^3.2.0", "gatsby-plugin-env-variables": "^2.3.0", - "gatsby-plugin-eslint": "^4.0.2", - "gatsby-plugin-styled-components": "^6.11.0", - "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31", + "gatsby-plugin-eslint": "^4.0.4", + "gatsby-plugin-postcss": "^6.12.0", + "gatsby-plugin-styled-components": "^6.12.0", + "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32", "gh-pages": "^3.2.3", "husky": "^7.0.4", "identity-obj-proxy": "^3.0.0", - "jest": "^29.5.0", + "jest": "^29.7.0", "jest-chain": "^1.1.6", - "jest-config": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", - "jest-extended": "^4.0.0", - "lint-staged": "^12.1.5", + "jest-config": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "jest-extended": "^4.0.2", + "lint-staged": "^12.5.0", "npm-force-resolutions": "0.0.10", - "prettier": "^2.5.1", - "query-string": "^7.0.1", + "postcss": "^8.4.31", + "prettier": "^2.8.8", + "query-string": "^7.1.3", "react-test-renderer": "^18.2.0", - "styled-components": "^5.3.3", - "stylelint": "^14.2.0", - "stylelint-config-prettier": "^9.0.3", + "styled-components": "^5.3.11", + "stylelint": "^14.16.1", + "stylelint-config-prettier": "^9.0.5", "stylelint-config-standard": "^24.0.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", - "stylelint-webpack-plugin": "^3.1.0", - "typescript": "^4.5.4", - "typescript-plugin-css-modules": "^4.2.2" + "stylelint-webpack-plugin": "^3.3.0", + "tailwindcss": "^3.3.5", + "typescript": "^5.3.2", + "typescript-plugin-css-modules": "^4.2.3" }, "keywords": [ "deriv", @@ -149,6 +159,7 @@ "scripts": { "analyze-bundle": "GENERATE_JSON_STATS=true gatsby build && npx webpack-bundle-analyzer -m static -r ./webpack-bundle-report/report.html ./public/stats.json", "build": "GATSBY_CPU_COUNT=2 gatsby build --log-pages", + "update:deriv-com-libs": "npm i @deriv-com/blocks@latest @deriv-com/components@latest @deriv-com/hooks@latest @deriv-com/providers@latest", "partytown": "partytown copylib public/~partytown", "develop": "GATSBY_CPU_COUNT=2 gatsby develop -o", "format": "prettier --write '**/*.js' '*.js'", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000000..96bb01e7dd1 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} \ No newline at end of file diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 89c2c4c2606..7429f3d81bf 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -1,6 +1,8 @@ -import React, { ReactNode, Ref } from 'react' +/* eslint-disable @typescript-eslint/ban-ts-comment */ +import React, { ReactNode, Ref, useCallback } from 'react' import loadable from '@loadable/component' import styled from 'styled-components' +import { LanguageProvider, SharedLinkProvider } from '@deriv-com/providers' import { LocationProvider } from './location-context' import LayoutOverlay from 'features/components/molecules/layout-overlay' import EURedirect, { useModal } from 'components/custom/_eu-redirect-modal' @@ -8,16 +10,20 @@ import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param import { usePageLoaded } from 'components/hooks/use-page-loaded' import { getLanguage, isBrowser } from 'common/utility' import apiManager from 'common/websocket' -import MainNav from 'features/components/templates/navigation/main-nav' import StaticNav from 'features/components/templates/navigation/static-nav' -import PaymentAgentAffiliateNav from 'features/components/templates/navigation/payment-agent-nav' import BugBountyNav from 'features/components/templates/navigation/bug-bounty-nav' import CareerNav from 'features/components/templates/navigation/career-nav' -import MarketNav from 'features/components/templates/navigation/market-nav' import PpcProvider from 'features/contexts/ppc-campaign/ppc.provider' import AffiliateNav from 'features/components/templates/navigation/affiliates-nav' import BannerAlert from 'components/custom/_banner-alert' import { bannerTypes } from 'common/constants' +import MainRowNavigation from 'features/components/templates/navigation/main-nav' +import { useLangDirection } from 'components/hooks/use-lang-direction' +import { LocaleContext } from 'components/localization' +import useLangSwitcher from 'features/components/molecules/language-switcher/useLangSwitcher' +import { langItemsROW } from 'features/components/templates/layout/data' +import PartnersNav from 'features/components/templates/navigation/partners-nav' +import GatsbySharedLink from 'features/components/quill/shared-link' const RebrandingFooter = loadable(() => import('features/components/templates/footer')) @@ -44,7 +50,7 @@ export type ModalPayloadType = { } const Main = styled.main` - padding-top: ${({ padding_top }) => (padding_top && `${padding_top}rem`) || '7rem'}; + padding-top: ${({ padding_top }) => (padding_top && `${padding_top}rem`) || '0rem'}; background: var(--color-white); height: 100%; position: relative; @@ -60,13 +66,13 @@ if (isBrowser()) { const Navs = { noNav: null, - default: , + default: , static: , interim: , - partners: , + partners: , - markets: , + markets: , security: , @@ -80,7 +86,8 @@ const Navs = { careers: , - 'payment-methods': , + 'payment-methods': , + affiliates: , } @@ -99,6 +106,27 @@ const Layout = ({ const is_static = type === 'static' + const lang_direction = useLangDirection() + const { locale } = React.useContext(LocaleContext) + const formatted_lang = locale.replace('_', '-') + + React.useEffect(() => { + document.body.dir = lang_direction + document.documentElement.lang = formatted_lang + }, [lang_direction, formatted_lang]) + + //need to update the language data and type + //here using langauge data from `i18n-config.js` + const { onSwitchLanguage, currentLang } = useLangSwitcher() + const activeLang = langItemsROW[currentLang.path.replace('-', '')] + + const onLanguageChange = useCallback( + (event) => { + onSwitchLanguage(`/${event.path}/`) + }, + [onSwitchLanguage], + ) + //Handle page layout when redirection from mobile app. if (has_platform) { return ( @@ -108,33 +136,41 @@ const Layout = ({ ) } return ( - - {Navs[type]} - -
-
- {children} -
- - - -
- - {show_footer && } - + + + + {Navs[type]} + +
+
+ {children} +
+ + + +
+ + {show_footer && } + + + ) } diff --git a/src/features/components/quill/alert/index.tsx b/src/features/components/quill/alert/index.tsx new file mode 100644 index 00000000000..77ede2dde0e --- /dev/null +++ b/src/features/components/quill/alert/index.tsx @@ -0,0 +1,79 @@ +import React from 'react' +import * as AlertDialog from '@radix-ui/react-alert-dialog' +import { Button, Text, Heading } from '@deriv/quill-design' +import { TString } from 'types/generics' +import { Localize } from 'components/localization' + +type AlertButtonProps = { + text: TString + onClick?: React.MouseEventHandler +} + +export interface AlertProps { + title?: TString + description: TString + cancel_button?: AlertButtonProps + action_button: AlertButtonProps +} + +const Alert = ({ + title = '_t_Alert_t_', + description, + cancel_button, + action_button, +}: AlertProps) => { + return ( + + + + + +
+ + + +
+ + +
+ + + +
+ + +
+ + {cancel_button && ( + + + + )} + + + + + + +
+ + + + ) +} + +export default Alert diff --git a/src/features/components/quill/shared-link/external.tsx b/src/features/components/quill/shared-link/external.tsx new file mode 100644 index 00000000000..fb2a7cb1b0d --- /dev/null +++ b/src/features/components/quill/shared-link/external.tsx @@ -0,0 +1,56 @@ +import React, { ComponentProps, useState } from 'react' +import Alert from '../alert' +import useRegion from 'components/hooks/use-region' + +export type ExternalLinkProps = ComponentProps<'a'> & { + show_eu_modal?: boolean +} + +const ExternalLink = ({ href, onClick, target, show_eu_modal, ...rest }: ExternalLinkProps) => { + const [is_redirect_modal_visible, setIsRedirectModalVisible] = useState(false) + const { is_eu } = useRegion() + const show_modal = is_eu && show_eu_modal + + const handleCancel = () => { + setIsRedirectModalVisible(false) + } + + const handleProceed = () => { + if (target === '_blank') { + window.open(href) + } else { + window.location.href = href + } + setIsRedirectModalVisible(false) + } + + const handleClick: React.MouseEventHandler = (event) => { + if (show_modal) { + event.preventDefault() + setIsRedirectModalVisible(true) + } + onClick?.(event) + } + + return ( + <> + + {is_redirect_modal_visible && ( + + )} + + ) +} + +export default ExternalLink diff --git a/src/features/components/quill/shared-link/index.tsx b/src/features/components/quill/shared-link/index.tsx new file mode 100644 index 00000000000..0312e2bd435 --- /dev/null +++ b/src/features/components/quill/shared-link/index.tsx @@ -0,0 +1,22 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +import React from 'react' +import { SharedLinkProps, SharedLink } from '@deriv-com/providers' +import ExternalLink from './external' +import { LocalizedLink } from 'components/localization' + +const GatsbySharedLink: SharedLink = ({ href = '/', ...rest }: SharedLinkProps) => { + const link = href as `/${string}` + const isExternalUrl = /(http(s?)):\/\//i.test(link.toString()) + if (isExternalUrl) { + return ( + // @ts-ignore + + ) + } + return ( + // @ts-ignore + + ) +} + +export default GatsbySharedLink diff --git a/src/features/components/templates/footer/banner-and-awards.tsx b/src/features/components/templates/footer/banner-and-awards.tsx new file mode 100644 index 00000000000..ea7b8e93693 --- /dev/null +++ b/src/features/components/templates/footer/banner-and-awards.tsx @@ -0,0 +1,70 @@ +import React from 'react' +import { CaptionText, Heading, Text } from '@deriv/quill-design' +// eslint-disable-next-line import/no-unresolved +import { DerivProductDerivGoBrandLightLogoHorizontalIcon } from '@deriv/quill-icons/Logo' +import { StaticImage } from 'gatsby-plugin-image' +import DownloadBadges from './download' +import { Localize, localize } from 'components/localization' +import useRegion from 'components/hooks/use-region' + +export const DerivGoBannerAndAwards = () => { + const { is_row } = useRegion() + return ( +
+ {is_row && ( +
+
+
+
+ + + + +
+ + + +
+ +
+ + + + +
+
+ +
+ )} +
+
+ +
+
+ +
+
+
+ ) +} diff --git a/src/features/components/templates/footer/data.ts b/src/features/components/templates/footer/data.ts deleted file mode 100644 index f2e133933f5..00000000000 --- a/src/features/components/templates/footer/data.ts +++ /dev/null @@ -1,368 +0,0 @@ -import { SmartFooterLink, SmartFooterLinkColumn } from './types' -import { deriv_status_page_url } from 'common/constants' - -const aboutUsLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_Who we are_t_', - url: { type: 'internal', to: '/who-we-are/' }, - }, - }, - { - id: 1, - data: { - text: '_t_Why choose us_t_', - url: { type: 'internal', to: '/why-choose-us/' }, - }, - }, - { - id: 2, - data: { - text: '_t_Principles_t_', - url: { type: 'internal', to: '/our-principles/' }, - }, - }, - { - id: 3, - data: { - text: '_t_Partnership programmes_t_', - url: { type: 'internal', to: '/partners/' }, - }, - }, - { - id: 4, - data: { - text: '_t_Contact us_t_', - url: { type: 'internal', to: '/contact_us/' }, - }, - }, - { - id: 5, - data: { - text: '_t_Careers_t_', - url: { type: 'internal', to: '/careers/' }, - }, - }, - { - id: 6, - data: { - text: '_t_Deriv life_t_', - url: { type: 'company', url_name: 'derivlife' }, - }, - }, -] - -const tradesLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_CFDs_t_', - url: { type: 'internal', to: '/trade-types/cfds/' }, - }, - }, - { - id: 1, - data: { - text: '_t_Options_t_', - url: { type: 'internal', to: '/trade-types/options/digital-options/up-and-down/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 2, - data: { - text: '_t_Multipliers_t_', - url: { type: 'internal', to: '/trade-types/multiplier/' }, - }, - }, -] - -const marketsLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_Forex_t_', - url: { type: 'internal', to: '/markets/forex/' }, - }, - }, - { - id: 1, - data: { - text: '_t_Derived indices_t_', - url: { type: 'internal', to: '/markets/synthetic/' }, - }, - }, - { - id: 2, - data: { - text: '_t_Stocks & indices_t_', - url: { type: 'internal', to: '/markets/stock/' }, - }, - }, - { - id: 3, - data: { - text: '_t_ETFs_t_', - url: { type: 'internal', to: '/markets/exchange-traded-funds/' }, - }, - }, - { - id: 4, - data: { - text: '_t_Cryptocurrencies_t_', - url: { type: 'internal', to: '/markets/cryptocurrencies/' }, - }, - }, - { - id: 5, - data: { - text: '_t_Commodities_t_', - url: { type: 'internal', to: '/markets/commodities/' }, - }, - }, -] - -const platformsLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_Deriv MT5_t_', - url: ({ is_ppc_redirect }) => ({ - type: 'internal', - to: is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/', - }), - }, - }, - { - id: 1, - data: { - text: '_t_Deriv X_t_', - url: { type: 'internal', to: '/derivx/' }, - }, - visibility: { - is_row: true, - }, - }, - - { - id: 2, - data: { - text: '_t_Deriv GO_t_', - url: { type: 'internal', to: '/deriv-go/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 3, - data: { - text: '_t_Deriv Trader_t_', - url: { type: 'internal', to: '/dtrader/' }, - }, - }, - { - id: 4, - data: { - text: '_t_SmartTrader_t_', - url: { type: 'company', url_name: 'smart_trader', target: '_blank' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 5, - data: { - text: '_t_Deriv Bot_t_', - url: { type: 'internal', to: '/dbot/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 6, - data: { - text: '_t_Binary Bot_t_', - url: { type: 'company', url_name: 'binary_bot', target: '_blank' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 7, - data: { - text: '_t_Deriv cTrader_t_', - url: { type: 'internal', to: '/deriv-ctrader/' }, - }, - visibility: { - is_row: true, - }, - }, -] - -const legalLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_Regulatory information_t_', - url: { type: 'internal', to: '/regulatory/' }, - }, - }, - { - id: 1, - data: { - text: '_t_Terms & conditions_t_', - url: { type: 'internal', to: '/terms-and-conditions/#clients' }, - }, - }, - { - id: 2, - data: { - text: '_t_Secure & responsible trading_t_', - url: { type: 'internal', to: '/responsible/' }, - }, - }, -] - -const partnerLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_Deriv Prime_t_', - url: { type: 'internal', to: '/partners/deriv-prime/' }, - }, - }, - { - id: 1, - data: { - text: '_t_Affiliates and IBs_t_', - url: { type: 'internal', to: '/partners/affiliate-ib/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 2, - data: { - text: '_t_Affiliates_t_', - url: { type: 'internal', to: '/partners/affiliate-ib/' }, - }, - visibility: { - is_row: false, - }, - }, - { - id: 3, - data: { - text: '_t_Payment agents_t_', - url: { type: 'internal', to: '/partners/payment-agent/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 4, - data: { - text: '_t_API_t_', - url: { type: 'company', url_name: 'api' }, - }, - }, -] - -const supportLinks: SmartFooterLink[] = [ - { - id: 0, - data: { - text: '_t_Help centre_t_', - url: { type: 'internal', to: '/help-centre/' }, - }, - }, - { - id: 1, - data: { - text: '_t_Community_t_', - url: { type: 'company', url_name: 'community' }, - }, - }, - { - id: 2, - data: { - text: '_t_Payment methods_t_', - url: { type: 'internal', to: '/payment-methods/' }, - }, - }, - { - id: 3, - data: { - text: '_t_Status page_t_', - url: { type: 'non-company', href: deriv_status_page_url }, - }, - }, - { - id: 4, - data: { - text: '_t_Deriv Blog_t_', - url: { type: 'company', url_name: 'blog' }, - }, - }, -] - -export const footerLinks: SmartFooterLinkColumn[] = [ - { - id: 0, - data: { - title: '_t_ABOUT US_t_', - links: aboutUsLinks, - }, - }, - { - id: 1, - data: { - title: '_t_TRADE TYPES_t_', - links: tradesLinks, - }, - }, - { - id: 2, - data: { - title: '_t_MARKETS_t_', - links: marketsLinks, - }, - }, - { - id: 3, - data: { - title: '_t_PLATFORMS_t_', - links: platformsLinks, - }, - }, - { - id: 4, - data: { - title: '_t_LEGAL_t_', - links: legalLinks, - }, - }, - { - id: 5, - data: { - title: '_t_PARTNERS_t_', - links: partnerLinks, - }, - }, - { - id: 7, - data: { - title: '_t_SUPPORT_t_', - links: supportLinks, - }, - }, -] diff --git a/src/features/components/templates/footer/data.tsx b/src/features/components/templates/footer/data.tsx new file mode 100644 index 00000000000..e3eacbfb77c --- /dev/null +++ b/src/features/components/templates/footer/data.tsx @@ -0,0 +1,549 @@ +import React from 'react' +import { FooterItems } from '@deriv-com/blocks' +import { + StandaloneFacebookIcon, + StandaloneInstagramIcon, + StandaloneLinkedinIcon, + StandaloneXTwitterIcon, + StandaloneYoutubeIcon, + // eslint-disable-next-line import/no-unresolved +} from '@deriv/quill-icons/Standalone' +import { DerivGoBannerAndAwards } from './banner-and-awards' +import { Localize } from 'components/localization' + +export const RowFooterNavData: FooterItems[] = [ + { + id: 0, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/who-we-are', + text: , + }, + { + id: 1, + href: '/why-choose-us', + text: , + }, + { + id: 3, + href: '/our-principles', + text: , + }, + { + id: 4, + href: '/partners', + text: , + }, + { + id: 5, + href: '/contact_us', + text: , + }, + { id: 6, href: '/careers', text: }, + { + id: 7, + href: 'https://derivlife.com', + text: , + }, + ], + }, + ], + }, + { + id: 1, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/trade-types/cfds', + text: , + }, + { + id: 1, + href: '/trade-types/options', + text: , + }, + { + id: 2, + href: '/trade-types/multiplier', + text: , + }, + ], + }, + { + id: 1, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/markets/forex', + text: , + }, + { + id: 1, + href: '/markets/synthetic', + text: , + }, + { + id: 2, + href: '/markets/stock', + text: , + }, + { + id: 3, + href: '/markets/exchange-traded-funds', + text: , + }, + { + id: 4, + href: '/markets/cryptocurrencies', + text: , + }, + { + id: 5, + href: '/markets/commodities', + text: , + }, + ], + }, + ], + }, + { + id: 2, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { id: 0, href: '/dmt5', text: }, + { id: 1, href: '/derivx', text: }, + { + id: 2, + href: '/deriv-ctrader', + text: , + }, + { + id: 3, + href: '/deriv-go', + text: , + }, + { + id: 4, + href: '/dtrader', + text: , + }, + { + id: 5, + href: 'https://smarttrader.deriv.com/', + text: , + target: '_blank', + }, + { id: 6, href: '/dbot', text: }, + { + id: 7, + href: 'https://bot.deriv.com/', + text: , + target: '_blank', + }, + ], + }, + ], + }, + { + id: 3, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/help-centre', + text: , + }, + { + id: 1, + href: 'https://community.deriv.com/', + text: , + }, + { + id: 2, + href: '/payment-methods', + text: , + }, + { + id: 3, + href: 'https://deriv.statuspage.io/', + text: , + }, + { + id: 4, + href: 'https://blog.deriv.com/', + text: , + }, + ], + }, + ], + }, + { + id: 4, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/regulatory', + text: , + }, + { + id: 1, + href: '/terms-and-conditions/#clients', + text: , + }, + { + id: 2, + href: '/responsible', + text: , + }, + ], + }, + { + id: 1, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/partners/deriv-prime', + text: , + }, + { + id: 1, + href: '/partners/affiliate-ib', + text: , + }, + { + id: 2, + href: '/partners/payment-agent', + text: , + }, + { + id: 3, + href: 'https://api.deriv.com/', + text: , + }, + ], + }, + ], + }, + { + id: 5, + layers: [ + { + id: 0, + type: 'node', + node: , + }, + ], + }, +] + +export const EuFooterNavData: FooterItems[] = [ + { + id: 0, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/who-we-are', + text: , + }, + { + id: 1, + href: '/why-choose-us', + text: , + }, + { + id: 3, + href: '/our-principles', + text: , + }, + { + id: 4, + href: '/partners', + text: , + }, + { + id: 5, + href: '/contact_us', + text: , + }, + { id: 6, href: '/careers', text: }, + { + id: 7, + href: 'https://derivlife.com', + text: , + }, + ], + }, + ], + }, + { + id: 1, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/trade-types/cfds', + text: , + }, + { + id: 1, + href: '/trade-types/multiplier', + text: , + }, + ], + }, + { + id: 1, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/markets/forex', + text: , + }, + { + id: 1, + href: '/markets/synthetic', + text: , + }, + { + id: 2, + href: '/markets/stock', + text: , + }, + { + id: 3, + href: '/markets/exchange-traded-funds', + text: , + }, + { + id: 4, + href: '/markets/cryptocurrencies', + text: , + }, + { + id: 5, + href: '/markets/commodities', + text: , + }, + ], + }, + ], + }, + { + id: 2, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { id: 0, href: '/dmt5', text: }, + { + id: 1, + href: '/dtrader', + text: , + }, + ], + }, + ], + }, + { + id: 3, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/help-centre', + text: , + }, + { + id: 1, + href: 'https://community.deriv.com/', + text: , + }, + { + id: 2, + href: '/payment-methods', + text: , + }, + { + id: 3, + href: 'https://deriv.statuspage.io/', + text: , + }, + { + id: 4, + href: 'https://blog.deriv.com/', + text: , + }, + ], + }, + ], + }, + { + id: 4, + layers: [ + { + id: 0, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/regulatory', + text: , + }, + { + id: 1, + href: '/terms-and-conditions/#clients', + text: , + }, + { + id: 2, + href: '/responsible', + text: , + }, + ], + }, + { + id: 1, + header: , + type: 'link', + items: [ + { + id: 0, + href: '/partners/deriv-prime', + text: , + }, + { + id: 1, + href: '/partners/affiliate-ib', + text: , + }, + { + id: 3, + href: 'https://api.deriv.com/', + text: , + }, + ], + }, + ], + }, + { + id: 5, + layers: [ + { + id: 0, + type: 'node', + node: , + }, + ], + }, +] + +export const warnText = ( + +) + +export const socialButtonsROW = [ + { + icon: , + href: 'https://www.facebook.com/derivdotcom', + }, + { + icon: , + href: 'https://www.instagram.com/deriv_official', + }, + { + icon: , + href: 'https://twitter.com/derivdotcom/', + }, + { + icon: , + href: 'https://www.youtube.com/@deriv', + }, + { + icon: , + href: 'https://www.linkedin.com/company/derivdotcom/', + }, +] + +export const socialButtonsEU = [ + { + icon: , + href: 'https://www.facebook.com/DerivEU', + }, + { + icon: , + href: 'https://www.instagram.com/deriv_eu/', + }, + { + icon: , + href: 'https://twitter.com/deriv_eu/', + }, + { + icon: , + href: 'https://www.youtube.com/@deriv', + }, + { + icon: , + href: 'https://www.linkedin.com/company/derivdotcom/', + }, +] + +export const socialButtonsCareers = [ + { + icon: , + href: 'https://www.facebook.com/derivcareers', + }, + { + icon: , + href: 'https://www.instagram.com/derivcareers/', + }, + { + icon: , + href: 'https://www.linkedin.com/company/derivdotcom/life/', + }, +] diff --git a/src/features/components/templates/footer/description.tsx b/src/features/components/templates/footer/description.tsx new file mode 100644 index 00000000000..b23a2599da2 --- /dev/null +++ b/src/features/components/templates/footer/description.tsx @@ -0,0 +1,96 @@ +import React from 'react' +import { Text } from '@deriv/quill-design' +import clsx from 'clsx' +import { Localize } from 'components/localization' + +const sharedClasses = 'inline font-bold underline hover:text-typography-prominent' + +export const DescriptionContent = () => { + return ( + <> + + , + , + , + ]} + /> + + + , + , + , + ]} + /> + + + ) +} + +export const DescriptionContentEU = () => { + return ( + <> + + , + ]} + /> + + + , + , + , + ]} + /> + + + ) +} diff --git a/src/features/components/templates/footer/disclaimer/data.tsx b/src/features/components/templates/footer/disclaimer/data.tsx deleted file mode 100644 index 66bf10c0a2f..00000000000 --- a/src/features/components/templates/footer/disclaimer/data.tsx +++ /dev/null @@ -1,208 +0,0 @@ -import React from 'react' -import { SmartDisclaimerParagraph } from './types' -import Link from 'features/components/atoms/link' - -export const disclaimerContent: SmartDisclaimerParagraph[] = [ - { - id: 0, - data: { - text: '_t_Deriv Investments (Europe) Limited is licensed and regulated by the Malta Financial Services Authority under the Investment Services Act <0>(licence). Deriv.com Limited is the holding company for the above subsidiary with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_', - components: [ - , - ], - }, - visibility: { - is_eu: true, - }, - }, - { - id: 1, - data: { - text: '_t_Deriv Investments (Europe) Limited is licensed and regulated by the Malta Financial Services Authority under the Investment Services Act (<0>licence). Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority (<1>licence). Deriv (BVI) Ltd is licensed by the British Virgin Islands Financial Services Commission (<2>licence). Deriv (V) Ltd is licensed by the Vanuatu Financial Services Commission (<3>licence). Deriv (SVG) LLC has a registered office at First Floor, SVG Teachers Credit Union Uptown Building, Corner of James and Middle Street, Kingstown P.O., St Vincent and the Grenadines. Deriv.com Limited is the holding company for the above subsidiaries with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_', - components: [ - , - , - , - , - ], - }, - visibility: { - is_cpa_plan: true, - }, - }, - { - id: 2, - data: { - text: '_t_Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority (<0>licence). Deriv (BVI) Ltd is licensed by the British Virgin Islands Financial Services Commission (<1>licence). Deriv (V) Ltd is licensed by the Vanuatu Financial Services Commission (<2>licence). Deriv (SVG) LLC has a registered office at First Floor, SVG Teachers Credit Union Uptown Building, Corner of James and Middle Street, Kingstown P.O., St Vincent and the Grenadines. Deriv.com Limited is the holding company for the above subsidiaries with the registration number 71479 and the registered address is located at 2nd Floor, 1 Cornet Street, St Peter Port, Guernsey, GY1 1BZ._t_', - components: [ - , - , - , - ], - }, - visibility: { - is_eu: false, - is_cpa_plan: false, - }, - }, - { - id: 3, - data: { - text: '_t_Please read our <0>Terms and conditions,<1> Risk disclosure, and <2>Secure and responsible trading to fully understand the risks involved before using our services. The information on this website does not constitute investment advice._t_', - components: [ - , - , - , - ], - }, - visibility: { - is_non_eu: true, - }, - }, - { - id: 4, - data: { - text: '_t_Please read our <0>Terms and conditions,<1> Risk disclosure, and <2>Secure and responsible trading to fully understand the risks involved before using our services. The information on this website does not constitute investment advice._t_', - components: [ - , - , - , - ], - }, - visibility: { - is_eu: true, - }, - }, -] - -export const riskWarningContent: SmartDisclaimerParagraph[] = [ - { - id: 0, - data: { - text: '_t_CFDs and other products offered on this website are complex instruments with high risk of losing money rapidly owing to leverage. You should consider whether you understand how these products work and whether you can afford to risk losing your money._t_', - }, - visibility: { - is_non_eu: true, - }, - }, -] diff --git a/src/features/components/templates/footer/disclaimer/disclaimer.module.scss b/src/features/components/templates/footer/disclaimer/disclaimer.module.scss deleted file mode 100644 index be6678eda7e..00000000000 --- a/src/features/components/templates/footer/disclaimer/disclaimer.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.risk_warning_container { - border-radius: 1.5rem; -} diff --git a/src/features/components/templates/footer/disclaimer/index.tsx b/src/features/components/templates/footer/disclaimer/index.tsx deleted file mode 100644 index e3883e5ac54..00000000000 --- a/src/features/components/templates/footer/disclaimer/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useMemo } from 'react' -import { risk_warning_container } from './disclaimer.module.scss' -import { disclaimerContent, riskWarningContent } from './data' -import { DisclaimerParagraphConfig } from './types' -import Typography from 'features/components/atoms/typography' -import { Localize } from 'components/localization' -import useVisibleContent from 'components/hooks/use-visible-content' -import useRegion from 'components/hooks/use-region' -import Container from 'features/components/atoms/container' - -const Disclaimer = () => { - const { is_eu, is_non_eu, is_cpa_plan, is_row, is_region_loading } = useRegion() - - const visibility_config: DisclaimerParagraphConfig = useMemo(() => { - return { - is_cpa_plan, - is_eu, - is_non_eu, - is_non_eu_or_cpa_plan: is_non_eu || is_cpa_plan, - } - }, [is_cpa_plan, is_eu, is_non_eu]) - - const visible_disclaimer_content = useVisibleContent({ - content: disclaimerContent, - config: visibility_config, - }) - - const visible_risk_content = useVisibleContent({ - content: riskWarningContent, - config: visibility_config, - }) - - return ( - - {!is_region_loading && - visible_disclaimer_content.map((item) => ( - - - - ))} - {is_row && !is_cpa_plan && ( - - {visible_risk_content.map((item, index) => { - const not_last_item = - index !== visible_risk_content.length - 1 ? 'small' : undefined - return ( - - - - ) - })} - - )} - - ) -} - -export default Disclaimer diff --git a/src/features/components/templates/footer/disclaimer/types.ts b/src/features/components/templates/footer/disclaimer/types.ts deleted file mode 100644 index 9e031367bef..00000000000 --- a/src/features/components/templates/footer/disclaimer/types.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ReactElement } from 'react' -import { TSmartContent, TString } from 'types/generics' - -export type DisclaimerParagraph = { - text: TString - components?: ReactElement[] -} - -export type DisclaimerParagraphConfig = { - is_eu: boolean - is_non_eu: boolean - is_cpa_plan: boolean - is_non_eu_or_cpa_plan: boolean -} - -export type SmartDisclaimerParagraph = TSmartContent diff --git a/src/features/components/templates/footer/download.tsx b/src/features/components/templates/footer/download.tsx new file mode 100644 index 00000000000..a0a62c84386 --- /dev/null +++ b/src/features/components/templates/footer/download.tsx @@ -0,0 +1,65 @@ +import React from 'react' +import { + LabelPairedAppleIcon, + LabelPairedGooglePlayIcon, + LabelPairedHuaweiAppGalleryIcon, + // eslint-disable-next-line import/no-unresolved +} from '@deriv/quill-icons/LabelPaired' +import clsx from 'clsx' +import { StaticImage } from 'gatsby-plugin-image' +import { CustomLink } from '@deriv-com/components' +import { localize } from 'components/localization' + +const sharedClasses = + 'flex items-center justify-center gap-gap-md p-general-sm rounded-[4px] border-solid border-xs border-opacity-black-100' + +const DownloadBadges = () => { + return ( +
+ + + + + + + + + + + + +
+ ) +} + +export default DownloadBadges diff --git a/src/features/components/templates/footer/footer-icons/index.tsx b/src/features/components/templates/footer/footer-icons/index.tsx deleted file mode 100644 index f56af318f66..00000000000 --- a/src/features/components/templates/footer/footer-icons/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import FooterSocialIcons from '../social-icons' -import DerivFooterLogo from 'images/svg/layout/deriv_footer_logo.svg' -import Image from 'features/components/atoms/image' -import Flex from 'features/components/atoms/flex-box' - -const FooterIcons = () => { - return ( - - - deriv logo image - - - - ) -} - -export default FooterIcons diff --git a/src/features/components/templates/footer/footer.module.scss b/src/features/components/templates/footer/footer.module.scss deleted file mode 100644 index 7ad947d0921..00000000000 --- a/src/features/components/templates/footer/footer.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; -@import 'features/styles/theme/variables'; - -.footer { - opacity: 0.8; - - @include breakpoints(tablet) { - border-block-start: 1px solid $color-grey-44; - } -} - -.footer_grid { - display: grid; - inline-size: 100%; - grid-template-columns: 1fr; - - @include breakpoints(tablet) { - grid-template-columns: 2fr; - } -} diff --git a/src/features/components/templates/footer/index.tsx b/src/features/components/templates/footer/index.tsx index 825331c6aa8..468535a80d8 100644 --- a/src/features/components/templates/footer/index.tsx +++ b/src/features/components/templates/footer/index.tsx @@ -1,56 +1,47 @@ -import React from 'react' -import { footer_grid, footer } from './footer.module.scss' -import { footerLinks } from './data' -import FooterLinksColumn from './links-column' -import Disclaimer from './disclaimer' -import FooterIcons from './footer-icons' -import usePpc from 'features/hooks/use-ppc' -import Flex from 'features/components/atoms/flex-box' -import useVisibleContent from 'components/hooks/use-visible-content' -import Container from 'features/components/atoms/container' +import React, { useEffect, useState } from 'react' +import { Footer } from '@deriv-com/blocks' +import { qtMerge } from '@deriv/quill-design' +import { + EuFooterNavData, + RowFooterNavData, + socialButtonsCareers, + socialButtonsEU, + socialButtonsROW, + warnText, +} from './data' +import { DerivGoBannerAndAwards } from './banner-and-awards' +import { DescriptionContent, DescriptionContentEU } from './description' import useRegion from 'components/hooks/use-region' +import { getLocationPathname } from 'common/utility' -interface FooterProps { - no_footer_links?: boolean -} +export const MainFooter = () => { + const [is_career, setIsCareer] = useState(false) + const { is_eu } = useRegion() -const Footer = ({ no_footer_links = false }: FooterProps) => { - const { is_ppc } = usePpc() - const { is_eu, is_cpa_plan } = useRegion() + useEffect(() => { + const current_path = getLocationPathname() + const splitted_path = current_path.split('/') + const is_career_page = splitted_path.includes('careers') + setIsCareer(is_career_page) + }, []) - const content = useVisibleContent({ content: footerLinks, config: { is_ppc } }) + const socialButtons = is_career + ? socialButtonsCareers + : is_eu + ? socialButtonsEU + : socialButtonsROW return ( - - - - - {!no_footer_links && ( - - {content?.map((contentItem) => ( - - ))} - - )} - - - - + + ) } -export default Footer +export default MainFooter diff --git a/src/features/components/templates/footer/link-item/index.tsx b/src/features/components/templates/footer/link-item/index.tsx deleted file mode 100644 index 0860d9de8d9..00000000000 --- a/src/features/components/templates/footer/link-item/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import { SmartFooterLink } from '../types' -import usePpc from 'features/hooks/use-ppc' -import useRegion from 'components/hooks/use-region' -import Link from 'features/components/atoms/link' -import { Localize } from 'components/localization' - -interface FooterLinkProps { - item: SmartFooterLink -} - -const FooterLink = ({ item: { data } }: FooterLinkProps) => { - const { is_ppc, is_ppc_redirect } = usePpc() - const { is_row } = useRegion() - const { url } = data - - const visible_url = typeof url === 'function' ? url({ is_ppc, is_ppc_redirect, is_row }) : url - - return ( - - - - ) -} - -export default FooterLink diff --git a/src/features/components/templates/footer/links-column/index.tsx b/src/features/components/templates/footer/links-column/index.tsx deleted file mode 100644 index 92deff95a84..00000000000 --- a/src/features/components/templates/footer/links-column/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import { SmartFooterLinkColumn } from '../types' -import FooterLink from '../link-item' -import Flex from 'features/components/atoms/flex-box' -import Typography from 'features/components/atoms/typography' -import { Localize } from 'components/localization' -import useVisibleContent from 'components/hooks/use-visible-content' -import usePpc from 'features/hooks/use-ppc' -import useRegion from 'components/hooks/use-region' - -interface FooterLinksColumnProps { - item: SmartFooterLinkColumn -} - -const FooterLinksColumn = ({ item: { data } }: FooterLinksColumnProps) => { - const { is_ppc, is_ppc_redirect } = usePpc() - const { is_row } = useRegion() - - const links = useVisibleContent({ - content: data.links, - config: { is_ppc, is_ppc_redirect, is_row }, - }) - - return ( - - - - - {links.map((linkItem) => ( - - ))} - - ) -} - -export default FooterLinksColumn diff --git a/src/features/components/templates/footer/social-icons/data.ts b/src/features/components/templates/footer/social-icons/data.ts deleted file mode 100644 index 128c642262c..00000000000 --- a/src/features/components/templates/footer/social-icons/data.ts +++ /dev/null @@ -1,353 +0,0 @@ -import Telegram from 'images/svg/footer/telegram_icon.svg' -import Twitter from 'images/svg/footer/twitter_icon.svg' -import Youtube from 'images/svg/footer/youtube_icon.svg' -import Instagram from 'images/svg/footer/instagram_icon.svg' -import Facebook from 'images/svg/footer/facebook_icon.svg' -import Linkedin from 'images/svg/footer/linkedin_icon.svg' -import { TSmartContent, TString } from 'types/generics' -import { LinkUrlType } from 'features/types' - -export type SocialMediaAccount = { - url: ((config: Config) => LinkUrlType) | LinkUrlType - icon: string - image_alt?: TString -} - -export type Config = { - is_eu?: boolean - is_career_page?: boolean - is_ar?: boolean - is_es?: boolean -} - -export type SmartSocialAccount = TSmartContent - -export const socialMediaAccounts: SmartSocialAccount[] = [ - { - id: 0, - data: { - url: ({ is_ar, is_es }) => { - if (is_es) { - return { - type: 'non-company', - target: '_blank', - href: 'https://www.facebook.com/derivespanol', - } - } else if (is_ar) { - return { - type: 'non-company', - target: '_blank', - href: 'https://www.facebook.com/derivarabic', - } - } - return { - type: 'non-company', - target: '_blank', - href: 'https://www.facebook.com/derivdotcom', - } - }, - icon: Facebook, - image_alt: '_t_Facebook_t_', - }, - visibility: { - is_eu: false, - is_career_page: false, - }, - }, - { - id: 1, - data: { - url: ({ is_ar, is_es }) => { - if (is_es) { - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.facebook.com/derivespanol', - } - } else if (is_ar) { - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.facebook.com/derivarabic', - } - } - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.facebook.com/derivEU/', - } - }, - icon: Facebook, - image_alt: '_t_Facebook_t_', - }, - visibility: { - is_eu: true, - is_career_page: false, - }, - }, - { - id: 2, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.facebook.com/derivcareers', - show_eu_modal: true, - }, - icon: Facebook, - image_alt: '_t_Facebook_t_', - }, - visibility: { - is_career_page: true, - }, - }, - { - id: 3, - data: { - url: ({ is_ar, is_es }) => { - if (is_es) { - return { - type: 'non-company', - target: '_blank', - href: 'https://www.instagram.com/deriv_espanol/', - } - } else if (is_ar) { - return { - type: 'non-company', - target: '_blank', - href: 'https://www.instagram.com/deriv_ar/', - } - } - return { - type: 'non-company', - target: '_blank', - href: 'https://www.instagram.com/deriv_official/', - } - }, - icon: Instagram, - image_alt: '_t_Instagram_t_', - }, - visibility: { - is_eu: false, - is_career_page: false, - }, - }, - { - id: 4, - data: { - url: ({ is_ar, is_es }) => { - if (is_es) { - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.instagram.com/deriv_espanol/', - } - } else if (is_ar) { - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.instagram.com/deriv_ar/', - } - } - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.instagram.com/deriv_eu/', - } - }, - icon: Instagram, - image_alt: '_t_Instagram_t_', - }, - visibility: { - is_career_page: false, - is_eu: true, - }, - }, - { - id: 5, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.instagram.com/derivcareers/', - show_eu_modal: true, - }, - icon: Instagram, - image_alt: '_t_Instagram_t_', - }, - visibility: { - is_career_page: true, - }, - }, - { - id: 6, - data: { - url: ({ is_ar, is_es }) => { - if (is_es) { - return { - type: 'non-company', - target: '_blank', - href: 'https://twitter.com/DerivEspanol', - } - } else if (is_ar) { - return { - type: 'non-company', - target: '_blank', - href: 'https://twitter.com/DerivArabic', - } - } - return { - type: 'non-company', - target: '_blank', - href: 'https://twitter.com/derivdotcom/', - } - }, - icon: Twitter, - image_alt: '_t_Twitter_t_', - }, - visibility: { - is_career_page: false, - is_eu: false, - }, - }, - { - id: 7, - data: { - url: ({ is_ar, is_es }) => { - if (is_es) { - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://twitter.com/DerivEspanol', - } - } else if (is_ar) { - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://twitter.com/DerivArabic', - } - } - return { - type: 'non-company', - show_eu_modal: true, - target: '_blank', - href: 'https://www.twitter.com/deriv_eu/', - } - }, - icon: Twitter, - image_alt: '_t_Twitter_t_', - }, - visibility: { - is_career_page: false, - is_eu: true, - }, - }, - { - id: 8, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.youtube.com/@deriv', - }, - icon: Youtube, - image_alt: '_t_Youtube_t_', - }, - visibility: { - is_career_page: false, - is_eu: false, - }, - }, - { - id: 9, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.youtube.com/@deriv', - show_eu_modal: true, - }, - icon: Youtube, - image_alt: '_t_Youtube_t_', - }, - visibility: { - is_career_page: false, - is_eu: true, - }, - }, - { - id: 10, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.linkedin.com/company/derivdotcom/', - }, - icon: Linkedin, - image_alt: '_t_Linkedin_t_', - }, - visibility: { - is_career_page: false, - is_eu: false, - }, - }, - { - id: 11, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.linkedin.com/company/derivdotcom/', - show_eu_modal: true, - }, - icon: Linkedin, - image_alt: '_t_Linkedin_t_', - }, - visibility: { - is_career_page: false, - is_eu: true, - }, - }, - { - id: 12, - data: { - url: { - type: 'non-company', - target: '_blank', - href: 'https://www.linkedin.com/company/derivdotcom/life/', - show_eu_modal: true, - }, - icon: Linkedin, - image_alt: '_t_Linkedin_t_', - }, - visibility: { - is_career_page: true, - }, - }, - //temp removal of telegram : Start - // { - // id: 13, - // data: { - // url: { - // type: 'non-company', - // target: '_blank', - // href: 'https://t.me/derivdotcomofficial', - // }, - // icon: Telegram, - // image_alt: '_t_Telegram_t_', - // }, - // visibility: { - // is_eu: false, - // is_career_page: false, - // }, - // }, - //temp removal of telegram : End -] diff --git a/src/features/components/templates/footer/social-icons/index.tsx b/src/features/components/templates/footer/social-icons/index.tsx deleted file mode 100644 index 2d2b33dfd2e..00000000000 --- a/src/features/components/templates/footer/social-icons/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' -import { socialMediaAccounts } from './data' -import Flex from 'features/components/atoms/flex-box' -import { getLocationPathname } from 'common/utility' -import Image from 'features/components/atoms/image' -import Link from 'features/components/atoms/link' -import useVisibleContent from 'components/hooks/use-visible-content' -import useRegion from 'components/hooks/use-region' - -const FooterSocialIcons = () => { - const [is_career, setIsCareer] = useState(false) - const { is_eu } = useRegion() - const { i18n } = useTranslation() - const { language } = i18n - - useEffect(() => { - const current_path = getLocationPathname() - const splitted_path = current_path.split('/') - const is_career_page = splitted_path.includes('careers') - setIsCareer(is_career_page) - }, []) - - const config = { - is_career_page: is_career, - is_eu, - is_ar: language === 'ar', - is_es: language === 'es', - } - - const icons = useVisibleContent({ - content: socialMediaAccounts, - config, - }) - - return ( - - {icons.map(({ data, id }) => { - const iconUrl = typeof data.url === 'function' ? data.url(config) : data.url - return ( - - {data.image_alt} - - ) - })} - - ) -} - -export default FooterSocialIcons diff --git a/src/features/components/templates/footer/types.ts b/src/features/components/templates/footer/types.ts deleted file mode 100644 index c68420548a4..00000000000 --- a/src/features/components/templates/footer/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { LinkUrlType } from 'features/types' -import { TSmartContent, TString } from 'types/generics' - -export interface FooterLinkConfig { - is_ppc: boolean - is_ppc_redirect: boolean - is_row: boolean -} - -export interface FooterLink { - text: TString - url: LinkUrlType | ((config: Partial) => LinkUrlType) -} - -export type SmartFooterLink = TSmartContent - -export interface FooterLinkColumn { - title: TString - links: SmartFooterLink[] -} - -export type SmartFooterLinkColumn = TSmartContent diff --git a/src/features/components/templates/layout/data.ts b/src/features/components/templates/layout/data.ts new file mode 100644 index 00000000000..01966ba5b6d --- /dev/null +++ b/src/features/components/templates/layout/data.ts @@ -0,0 +1,106 @@ +import { LangItems } from '@deriv-com/providers' + +export const langItemsROW: LangItems = { + en: { + isDefault: true, + path: 'en', + displayName: 'English', + shortName: 'EN', + affiliateLang: 0, + }, + es: { + path: 'es', + displayName: 'Español', + shortName: 'ES', + affiliateLang: 8, + }, + fr: { + path: 'fr', + displayName: 'Français', + shortName: 'FR', + affiliateLang: 2, + }, + it: { + path: 'it', + displayName: 'Italiano', + shortName: 'IT', + affiliateLang: 3, + }, + pl: { + path: 'pl', + displayName: 'Polski', + shortName: 'PL', + affiliateLang: 5, + }, + pt: { + path: 'pt', + displayName: 'Português', + shortName: 'PT', + affiliateLang: 9, + }, + ru: { + path: 'ru', + displayName: 'Русский', + shortName: 'RU', + affiliateLang: 1, + }, + th: { + path: 'th', + displayName: 'Thai', + shortName: 'TH', + affiliateLang: 12, + }, + vi: { + path: 'vi', + displayName: 'Tiếng Việt', + shortName: 'VI', + affiliateLang: 6, + }, + tr: { + path: 'tr', + displayName: 'Türkçe', + shortName: 'TR', + affiliateLang: 14, + }, + zhcn: { + path: 'zh-cn', + displayName: '简体中文', + shortName: '简体', + affiliateLang: 10, + }, + zhtw: { + path: 'zh-tw', + displayName: '繁體中文', + shortName: '繁體', + affiliateLang: 11, + }, + bn: { + path: 'bn', + displayName: 'বাংলা', + shortName: 'BN', + affiliateLang: 15, + }, + ar: { + path: 'ar', + displayName: 'العربية', + shortName: 'AR', + }, + ko: { + path: 'ko', + displayName: '한국어', + shortName: 'KO', + affiliateLang: 16, + }, + de: { + path: 'de', + displayName: 'Deutsch', + shortName: 'DE', + affiliateLang: 16, + }, + si: { + path: 'si', + displayName: 'සිංහල', + shortName: 'SI', + affiliateLang: 17, + }, +} diff --git a/src/features/components/templates/layout/index.tsx b/src/features/components/templates/layout/index.tsx index 7174a2d83fa..3e481ef83f1 100644 --- a/src/features/components/templates/layout/index.tsx +++ b/src/features/components/templates/layout/index.tsx @@ -1,5 +1,8 @@ -import React, { ReactNode } from 'react' +/* eslint-disable @typescript-eslint/ban-ts-comment */ +import React, { ReactNode, useCallback } from 'react' +import { LanguageProvider, SharedLinkProvider } from '@deriv-com/providers' import { main_wrapper } from './style.module.scss' +import { langItemsROW } from './data' import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param' import PpcProvider from 'features/contexts/ppc-campaign/ppc.provider' import { getLanguage, isBrowser } from 'common/utility' @@ -8,6 +11,10 @@ import BrowserUpdateAlert from 'features/components/molecules/browser-update-ale import apiManager from 'common/websocket' import 'swiper/swiper-bundle.min.css' import 'features/styles/app.scss' +import { useLangDirection } from 'components/hooks/use-lang-direction' +import { LocaleContext } from 'components/localization' +import useLangSwitcher from 'features/components/molecules/language-switcher/useLangSwitcher' +import GatsbySharedLink from 'features/components/quill/shared-link' interface LayoutProps { is_ppc?: boolean is_ppc_redirect?: boolean @@ -28,17 +35,46 @@ const Layout = ({ }: LayoutProps) => { const { has_platform } = usePlatformQueryParam() + const lang_direction = useLangDirection() + const { locale } = React.useContext(LocaleContext) + const formatted_lang = locale.replace('_', '-') + + React.useEffect(() => { + document.body.dir = lang_direction + document.documentElement.lang = formatted_lang + }, [lang_direction, formatted_lang]) + + //need to update the language data and type + //here using langauge data from `i18n-config.js` + const { onSwitchLanguage, currentLang } = useLangSwitcher() + const activeLang = langItemsROW[currentLang.path.replace('-', '')] + + const onLanguageChange = useCallback( + (event) => { + onSwitchLanguage(`/${event.path}/`) + }, + [onSwitchLanguage], + ) + //Handle page layout when redirection from mobile app. if (has_platform) { return <>{children} } return ( - -
{children}
- - {!hide_layout_overlay && } - + + + +
{children}
+ + {!hide_layout_overlay && } + + + ) } diff --git a/src/features/components/templates/navigation/affiliates-nav/index.tsx b/src/features/components/templates/navigation/affiliates-nav/index.tsx index 178a3039e39..73eda7ef687 100644 --- a/src/features/components/templates/navigation/affiliates-nav/index.tsx +++ b/src/features/components/templates/navigation/affiliates-nav/index.tsx @@ -1,9 +1,9 @@ import React from 'react' +import { partners_nav_logo } from './nav.module.scss' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' import NavTemplate from 'features/components/templates/navigation/template' import LanguageSwitcher from 'features/components/molecules/language-switcher' -import { partners_nav_logo } from 'features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss' import PartnerNavLogo from 'images/svg/partner-nav-logo.svg' const AffiliateNav = () => { diff --git a/src/features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss b/src/features/components/templates/navigation/affiliates-nav/nav.module.scss similarity index 74% rename from src/features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss rename to src/features/components/templates/navigation/affiliates-nav/nav.module.scss index 4e57b7afe32..50c03c72a18 100644 --- a/src/features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss +++ b/src/features/components/templates/navigation/affiliates-nav/nav.module.scss @@ -3,12 +3,9 @@ .partners_nav_logo { inline-size: 12rem; block-size: 2rem; + @include breakpoints(tablet) { inline-size: 19rem; block-size: 3.2rem; } -} - -html:not([lang='en']) .partners_buttons { - max-inline-size: 17rem; -} +} \ No newline at end of file diff --git a/src/features/components/templates/navigation/career-nav/career-nav.module.scss b/src/features/components/templates/navigation/career-nav/career-nav.module.scss deleted file mode 100644 index 113e22678ec..00000000000 --- a/src/features/components/templates/navigation/career-nav/career-nav.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; - -.careers_nav_logo { - inline-size: 10.5rem; - block-size: 1.6rem; - - @include breakpoints(tablet) { - inline-size: 19rem; - block-size: 3.2rem; - } -} diff --git a/src/features/components/templates/navigation/career-nav/data.tsx b/src/features/components/templates/navigation/career-nav/data.tsx index f4b3c6d204d..df2e09146d5 100644 --- a/src/features/components/templates/navigation/career-nav/data.tsx +++ b/src/features/components/templates/navigation/career-nav/data.tsx @@ -1,28 +1,20 @@ -import { NavItems } from '../types' +import React from 'react' +import { NavLinkItems } from '@deriv-com/providers' +import { Localize } from 'components/localization' -const career_nav_items: NavItems = [ - { +export const career_nav_items: NavLinkItems = { + home: { id: 0, - data: { - type: 'single-item', - title: '_t_Home_t_', - content: { - type: 'internal', - to: '/careers/', - }, - }, + type: 'direct', + href: '/careers', + text: , }, - { + trade: { id: 1, - data: { - type: 'single-item', - title: '_t_Locations_t_', - content: { - type: 'internal', - to: '/careers/locations/', - }, - }, + type: 'direct', + href: '/careers/locations', + text: , }, -] +} export default career_nav_items diff --git a/src/features/components/templates/navigation/career-nav/index.tsx b/src/features/components/templates/navigation/career-nav/index.tsx index 1665cab0b1a..28bd6e4a528 100644 --- a/src/features/components/templates/navigation/career-nav/index.tsx +++ b/src/features/components/templates/navigation/career-nav/index.tsx @@ -1,48 +1,50 @@ import React from 'react' -import NavTemplate from '../template' -import career_nav_items from './data' -import { careers_nav_logo } from './career-nav.module.scss' -import Image from 'features/components/atoms/image' -import CareerNavLogo from 'images/svg/career-nav-icon.svg' -import Button from 'features/components/atoms/button' -import { Localize } from 'components/localization/localize' -import LanguageSwitcher from 'features/components/molecules/language-switcher' -import Link from 'features/components/atoms/link' -import Flex from 'features/components/atoms/flex-box' -import { localize } from 'components/localization' +import { MobileNavToggle, NavigationBlock } from '@deriv-com/blocks' +// eslint-disable-next-line import/no-unresolved +import { SubBrandDerivCareersBrandLightIcon } from '@deriv/quill-icons/Logo' +import { CustomLink } from '@deriv-com/components' +import { Button } from '@deriv/quill-design' +import TopNavigation from '../partners-nav/top-navigation' +import { career_nav_items } from './data' +import { Localize } from 'components/localization' + +const CareersButtons = () => { + return ( +
+ + + +
+ ) +} const CareerNav = () => { return ( - ( - - {localize('_t_Deriv - + + + )} items={career_nav_items} - has_centered_items - > - - - window.open('https://deriv.zohorecruit.eu/jobs/Careers', '_blank') - } - > - - - - + hasLanguageSwitch={false} + /> ) } diff --git a/src/features/components/templates/navigation/main-nav/content/about/index.ts b/src/features/components/templates/navigation/main-nav/content/about/index.ts deleted file mode 100644 index 15537f4485d..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/about/index.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { SmartNavContent } from '../../../types' - -export const aboutUsNavSectionContent: SmartNavContent[] = [ - { - id: 0, - data: { - title: '_t_Who we are_t_', - url: { type: 'internal', to: '/who-we-are/' }, - }, - }, - { - id: 1, - data: { - title: '_t_Regulatory information_t_', - url: { type: 'internal', to: '/regulatory/' }, - }, - }, - { - id: 2, - data: { - title: '_t_Why choose us_t_', - url: { type: 'internal', to: '/why-choose-us/' }, - }, - }, - { - id: 3, - data: { - title: '_t_Partnership programmes_t_', - url: { type: 'internal', to: '/partners/' }, - }, - }, - { - id: 4, - data: { - title: '_t_Contact us_t_', - url: { type: 'internal', to: '/contact_us/' }, - }, - }, - { - id: 5, - data: { - title: '_t_Careers_t_', - url: { type: 'internal', to: '/careers/' }, - }, - }, - { - id: 6, - data: { - url: { type: 'company', url_name: 'derivlife', target: '_blank' }, - title: '_t_Deriv life_t_', - }, - }, -] - -export const aboutUsNavSectionContentMobile: SmartNavContent[] = [ - { - id: 0, - data: { - title: '_t_Who we are_t_', - url: { type: 'internal', to: '/who-we-are/' }, - }, - }, - { - id: 2, - data: { - title: '_t_Why choose us_t_', - url: { type: 'internal', to: '/why-choose-us/' }, - }, - }, - { - id: 3, - data: { - title: '_t_Partnership programmes_t_', - url: { type: 'internal', to: '/partners/' }, - }, - }, - { - id: 4, - data: { - title: '_t_Contact us_t_', - url: { type: 'internal', to: '/contact_us/' }, - }, - }, - { - id: 5, - data: { - title: '_t_Careers_t_', - url: { type: 'internal', to: '/careers/' }, - }, - }, - { - id: 6, - data: { - url: { type: 'company', url_name: 'derivlife', target: '_blank' }, - title: '_t_Deriv life_t_', - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/content/index.ts b/src/features/components/templates/navigation/main-nav/content/index.ts deleted file mode 100644 index 1afd9659e02..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/index.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { NavItems } from '../../types' -import { aboutUsNavSectionContent, aboutUsNavSectionContentMobile } from './about' -import { legalNavSectionContent } from './legal' -import { marketSectionContent } from './market' -import { partnerNavSectionContent } from './partner' -import { trade_nav_section_items } from './platform' -import { resourcesNavSectionContent } from './resources/data' - -export const mainItems: NavItems = [ - { - id: 0, - data: { - title: '_t_Trade_t_', - type: 'multi-column', - content: trade_nav_section_items, - }, - }, - { - id: 1, - data: { - title: '_t_Markets_t_', - type: 'multi-column', - content: marketSectionContent, - }, - }, - { - id: 2, - data: { - title: '_t_About us_t_', - type: 'single-column', - content: aboutUsNavSectionContent, - }, - visibility: { - is_mobile: false, - }, - }, - { - id: 22, - data: { - title: '_t_About us_t_', - type: 'single-column', - content: aboutUsNavSectionContentMobile, - }, - visibility: { - is_mobile: true, - }, - }, - - { - id: 3, - data: { - title: '_t_Resources_t_', - type: 'single-column', - content: resourcesNavSectionContent, - }, - }, - { - id: 4, - data: { - title: '_t_Legal_t_', - type: 'single-column', - content: legalNavSectionContent, - }, - visibility: { - is_mobile: true, - }, - }, - { - id: 5, - data: { - title: '_t_Partners_t_', - type: 'single-column', - content: partnerNavSectionContent, - }, - visibility: { - is_mobile: true, - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/content/legal/index.ts b/src/features/components/templates/navigation/main-nav/content/legal/index.ts deleted file mode 100644 index f662c5088bf..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/legal/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { SmartNavContent } from '../../../types' - -export const legalNavSectionContent: SmartNavContent[] = [ - { - id: 0, - data: { - title: '_t_Regulatory information_t_', - url: { type: 'internal', to: '/regulatory/' }, - }, - }, - { - id: 1, - data: { - title: '_t_Terms and conditions_t_', - url: { type: 'internal', to: '/terms-and-conditions/#clients' }, - }, - }, - { - id: 2, - data: { - title: '_t_Secure and responsible trading_t_', - url: { type: 'internal', to: '/responsible/' }, - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/content/market/index.ts b/src/features/components/templates/navigation/main-nav/content/market/index.ts deleted file mode 100644 index fc10176bfd4..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/market/index.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { SmartNavSectionColumns } from '../../../types' -import Commodities from 'images/svg/custom/rebranding/commodities-icon.svg' -import Cryptocurrencies from 'images/svg/custom/rebranding/cryptocurrencies-icon.svg' -import DerivedFX from 'images/svg/custom/rebranding/derived-fx-icon.svg' -import Forex from 'images/svg/custom/rebranding/forex-icon.svg' -import ETF from 'images/svg/custom/rebranding/etf-icon.svg' -import StockIndices from 'images/svg/custom/rebranding/stock-indices-icon.svg' - -export const marketSectionContent: SmartNavSectionColumns[] = [ - { - id: 0, - data: { - section: [ - { - id: 0, - data: { - aria_label: 'Forex', - icon: { - src: Forex, - alt: 'Forex', - }, - content: - '_t_Trade the world’s largest financial market with popular forex pairs._t_', - title: '_t_Forex_t_', - url: { type: 'internal', to: '/markets/forex/' }, - }, - }, - { - id: 1, - data: { - aria_label: 'Derived indices', - icon: { - src: DerivedFX, - alt: 'Synthetic indices', - }, - content: ({ is_eu }) => { - return is_eu - ? '_t_Enjoy trading asset prices derived from simulated markets._t_' - : '_t_Enjoy trading asset prices derived from real-world or simulated markets._t_' - }, - title: '_t_Derived indices_t_', - url: { type: 'internal', to: '/markets/synthetic/' }, - }, - }, - { - id: 2, - data: { - aria_label: 'Stocks & indices', - icon: { - src: StockIndices, - alt: 'Stocks & indices', - }, - content: - '_t_Predict broader market trends and diversify your risk with stocks & indices._t_', - title: '_t_Stocks & indices_t_', - url: { type: 'internal', to: '/markets/stock/' }, - }, - }, - ], - no_divider: true, - no_title: true, - }, - }, - { - id: 1, - data: { - section: [ - { - id: 3, - data: { - aria_label: 'Commodities', - icon: { - src: Commodities, - alt: 'Commodities', - }, - content: - "_t_Trade natural resources that are central to the world's economy._t_", - title: '_t_Commodities_t_', - url: { type: 'internal', to: '/markets/commodities/' }, - }, - }, - { - id: 4, - data: { - aria_label: 'Cryptocurrencies', - icon: { - src: Cryptocurrencies, - alt: 'Cryptocurrencies', - }, - content: - '_t_Trade with leverage on the price movement of popular crypto-fiat pairs._t_', - title: '_t_Cryptocurrencies_t_', - url: { type: 'internal', to: '/markets/cryptocurrencies/' }, - }, - }, - { - id: 3, - data: { - aria_label: 'Exchange-traded funds (ETFs)', - icon: { - src: ETF, - alt: 'Exchange-traded funds (ETFs)', - }, - content: - '_t_Diversify your portfolio and enjoy low-cost intraday trading with ETFs._t_', - title: '_t_Exchange-traded funds (ETFs)_t_', - url: { type: 'internal', to: '/markets/exchange-traded-funds/' }, - }, - }, - ], - no_divider: true, - no_title: true, - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/content/partner/index.ts b/src/features/components/templates/navigation/main-nav/content/partner/index.ts deleted file mode 100644 index 82d568a130e..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/partner/index.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { SmartNavContent } from '../../../types' - -export const partnerNavSectionContent: SmartNavContent[] = [ - { - id: 0, - data: { - title: '_t_Deriv Prime_t_', - url: { type: 'internal', to: '/partners/deriv-prime/' }, - }, - }, - { - id: 1, - data: { - title: '_t_Affiliates and IBs_t_', - url: { type: 'internal', to: '/partners/affiliate-ib/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 2, - data: { - title: '_t_Affiliates_t_', - url: { type: 'internal', to: '/partners/affiliate-ib/' }, - }, - visibility: { - is_eu: true, - }, - }, - { - id: 3, - data: { - title: '_t_Payment agents_t_', - url: { type: 'internal', to: '/partners/payment-agent/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 4, - data: { - title: '_t_API_t_', - url: { type: 'company', url_name: 'api', target: '_blank' }, - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/content/platform/index.ts b/src/features/components/templates/navigation/main-nav/content/platform/index.ts deleted file mode 100644 index 04e7a333b4a..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/platform/index.ts +++ /dev/null @@ -1,266 +0,0 @@ -import { SmartNavContent, SmartNavSectionColumns } from '../../../types' -import DerivcTrader from 'images/svg/custom/rebranding/deriv-ctrader-icon.svg' -import BinaryBot from 'images/svg/custom/rebranding/binarybot-icon.svg' -import DerivX from 'images/svg/custom/rebranding/deriv-x-icon.svg' -import CFD from 'images/svg/custom/rebranding/cfds-icon.svg' -import Multipliers from 'images/svg/custom/rebranding/multipliers-icon.svg' -import Options from 'images/svg/custom/rebranding/options-icon.svg' -import Smarttrader from 'images/svg/custom/rebranding/smarttrader-icon.svg' -import DerivGo from 'images/svg/custom/rebranding/deriv-go-icon.svg' -import DMT5 from 'images/svg/custom/rebranding/dmt5-icon.svg' -import DTrader from 'images/svg/custom/rebranding/dtrader-icon.svg' -import DerivBot from 'images/svg/custom/rebranding/deriv-bot-icon.svg' - -export const tradeTypesContent: SmartNavContent[] = [ - { - id: 0, - data: { - aria_label: 'Deriv Trader', - icon: { - src: DTrader, - alt: 'Dtrader trading platform', - }, - content: '_t_A whole new trading experience on a powerful yet easy to use platform._t_', - title: '_t_Deriv Trader_t_', - url: { type: 'internal', to: '/dtrader/' }, - }, - visibility: { - is_eu: true, - is_ppc: false, - is_row: true, - }, - }, - { - id: 1, - data: { - aria_label: 'CFDs', - icon: { - src: CFD, - alt: 'CFDs trade type', - }, - content: - '_t_Trade with leverage and tight spreads for better returns on successful trades._t_', - title: '_t_CFDs_t_', - url: { type: 'internal', to: '/trade-types/cfds/' }, - }, - visibility: { - is_ppc: false, - }, - }, - { - id: 2, - data: { - aria_label: 'Options', - icon: { - src: Options, - alt: 'Options trade type', - }, - content: '_t_Earn a range of payouts without risking more than your initial stake._t_', - title: '_t_Options_t_', - url: { type: 'internal', to: '/trade-types/options/digital-options/up-and-down/' }, - }, - visibility: { - is_ppc: false, - is_row: true, - }, - }, - { - id: 3, - data: { - aria_label: 'Multipliers', - icon: { - src: Multipliers, - alt: 'Multipliers trade type', - }, - content: - '_t_Get the upside of CFDs without the downside of losing more than your stake._t_', - title: '_t_Multipliers_t_', - url: { type: 'internal', to: '/trade-types/multiplier/' }, - }, - visibility: { - is_ppc: false, - }, - }, -] - -export const tradingPlatformsContent: SmartNavContent[] = [ - { - id: 0, - data: { - aria_label: 'Deriv MT5', - icon: { - src: DMT5, - alt: 'Deriv MT5 trading platform', - }, - content: '_t_Trade on Deriv MT5, the all-in-one CFD trading platform._t_', - title: '_t_Deriv MT5_t_', - url: ({ is_ppc_redirect }) => ({ - type: 'internal', - to: is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/', - }), - }, - visibility: {}, - }, - { - id: 1, - data: { - aria_label: 'Derivx', - icon: { - src: DerivX, - alt: 'Deriv X trading paltform', - }, - content: '_t_A highly customisable and easy-to-use CFD trading platform._t_', - title: '_t_Deriv X_t_', - url: { type: 'internal', to: '/derivx/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 2, - data: { - aria_label: 'SmartTrader', - icon: { - src: Smarttrader, - alt: 'SmartTrader trading platform', - }, - content: '_t_Trade the world’s markets with our popular user-friendly platform._t_', - title: '_t_SmartTrader_t_', - url: { type: 'company', url_name: 'smart_trader', target: '_blank' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 3, - data: { - aria_label: 'Deriv Trader', - icon: { - src: DTrader, - alt: 'Deriv trader trading platform', - }, - content: '_t_A whole new trading experience on a powerful yet easy to use platform._t_', - title: '_t_Deriv Trader_t_', - url: { type: 'internal', to: '/dtrader/' }, - }, - visibility: { - is_eu: true, - }, - }, - { - id: 4, - data: { - aria_label: 'Deriv cTrader', - icon: { - src: DerivcTrader, - alt: 'Deriv cTrader trading platform', - }, - content: - '_t_An intuitive, multi-asset CFD trading platform with copy trading and custom indicators._t_', - title: '_t_Deriv cTrader_t_', - url: { type: 'internal', to: '/deriv-ctrader/' }, - }, - visibility: { - is_row: true, - }, - }, -] - -export const noTitleSection: SmartNavContent[] = [ - { - id: 0, - data: { - aria_label: 'Dtrader', - icon: { - src: DTrader, - alt: 'Dtrader trading platform', - }, - content: '_t_A whole new trading experience on a powerful yet easy to use platform._t_', - title: '_t_Deriv Trader_t_', - url: { type: 'internal', to: '/dtrader/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 1, - data: { - aria_label: 'Deriv GO', - icon: { - src: DerivGo, - alt: 'Deriv GO mobile trading app', - }, - content: - '_t_Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app._t_', - title: '_t_Deriv GO_t_', - - url: { type: 'internal', to: '/deriv-go/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 2, - data: { - aria_label: 'Deriv Bot', - icon: { - src: DerivBot, - alt: 'Deriv Bot Automated trading', - }, - content: '_t_Automated trading at your fingertips. No coding needed._t_', - title: '_t_Deriv Bot_t_', - - url: { type: 'internal', to: '/dbot/' }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 3, - data: { - aria_label: 'Binary Bot', - icon: { - src: BinaryBot, - alt: 'Binary bot for creating trading bot', - }, - content: - '_t_Our classic "drag-and-drop" tool for creating trading bots, featuring pop-up trading charts, for advanced users._t_', - title: '_t_Binary Bot_t_', - url: { type: 'company', url_name: 'binary_bot', target: '_blank' }, - }, - visibility: { - is_row: true, - }, - }, -] - -export const trade_nav_section_items: SmartNavSectionColumns[] = [ - { - id: 0, - data: { - title: '_t_Trade types_t_', - section: tradeTypesContent, - }, - }, - { - id: 1, - data: { - title: '_t_Trading platforms_t_', - section: tradingPlatformsContent, - }, - }, - { - id: 3, - data: { - section: noTitleSection, - }, - visibility: { - is_row: true, - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/content/resources/data.ts b/src/features/components/templates/navigation/main-nav/content/resources/data.ts deleted file mode 100644 index b95809d063b..00000000000 --- a/src/features/components/templates/navigation/main-nav/content/resources/data.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { SmartNavContent } from '../../../types' - -export const resourcesNavSectionContent: SmartNavContent[] = [ - { - id: 0, - data: { - title: '_t_Help centre_t_', - url: { type: 'internal', to: '/help-centre/' }, - }, - }, - { - id: 1, - data: { - title: '_t_Community_t_', - url: { type: 'company', url_name: 'community', target: '_blank' }, - }, - }, - { - id: 2, - data: { - title: '_t_Traders’ tools_t_', - url: { type: 'internal', to: '/trader-tools/' }, - }, - }, - { - id: 3, - data: { - title: '_t_Payment methods_t_', - url: { type: 'internal', to: '/payment-methods/' }, - }, - }, - { - id: 4, - data: { - title: '_t_Deriv MT5 Signals_t_', - url: { type: 'internal', to: '/dmt5-trading-signals/#signal-subscriber/' }, - }, - }, - { - id: 5, - data: { - title: '_t_Status page_t_', - url: { type: 'non-company', href: 'https://deriv.statuspage.io', show_eu_modal: true }, - }, - visibility: { - is_mobile: true, - }, - }, - { - id: 6, - data: { - title: '_t_Deriv Blog_t_', - url: { type: 'company', url_name: 'blog', target: '_blank' }, - }, - }, -] diff --git a/src/features/components/templates/navigation/main-nav/data.tsx b/src/features/components/templates/navigation/main-nav/data.tsx new file mode 100644 index 00000000000..0fb0ee3727c --- /dev/null +++ b/src/features/components/templates/navigation/main-nav/data.tsx @@ -0,0 +1,821 @@ +import React from 'react' +import { NavLinkItems } from '@deriv-com/providers' +import { + IllustrativeCfdsIcon, + IllustrativeDerivedIcon, + IllustrativeMultipliersIcon, + IllustrativeOptionsIcon, + IllustrativeForexIcon, + IllustrativeStocksAndIndicesIcon, + IllustrativeCommoditiesIcon, + IllustrativeCryptocurrenciesIcon, + IllustrativeEtfIcon, + // eslint-disable-next-line import/no-unresolved +} from '@deriv/quill-icons/Illustrative' +import { + DerivProductDerivBotBrandDarkLogoHorizontalIcon, + DerivProductDerivGoBrandDarkLogoHorizontalIcon, + DerivProductDerivTraderBrandDarkLogoHorizontalIcon, + DerivProductDerivXBrandDarkLogoIcon, + PartnersProductDerivCtraderBrandDarkLogoHorizontalIcon, + PartnersProductDerivMt5BrandDarkLogoHorizontalIcon, + PartnersProductSmarttraderBrandDarkLogoIcon, + PartnersProductBinaryBotBrandDarkLogoHorizontalIcon, + // eslint-disable-next-line import/no-unresolved +} from '@deriv/quill-icons/Logo' +import { Localize } from 'components/localization' + +export const mainRowNavItems: NavLinkItems = { + trade: { + id: 0, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + header: { + text: , + type: 'text', + }, + items: [ + { + id: 0, + href: '/trade-types/cfds', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 1, + href: '/trade-types/options', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/trade-types/multiplier', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + ], + }, + { + id: 1, + header: { + text: , + type: 'text', + }, + items: [ + { + id: 0, + href: '/dmt5', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + { + id: 1, + href: '/derivx', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/deriv-ctrader', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + { + id: 3, + href: 'https://smarttrader.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + target: '_blank', + }, + ], + }, + { + id: 2, + header: { + text: null, + type: 'text', + }, + items: [ + { + id: 0, + href: '/dtrader', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + { + id: 1, + href: '/deriv-go', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + { + id: 2, + href: '/dbot', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + { + id: 3, + href: 'https://bot.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + target: '_blank', + }, + ], + }, + ], + }, + markets: { + id: 1, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/markets/forex', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 1, + href: '/markets/synthetic', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/markets/stock', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + ], + }, + { + id: 1, + items: [ + { + id: 0, + href: '/markets/commodities', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 1, + href: '/markets/cryptocurrencies', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/markets/exchange-traded-funds', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + ], + }, + ], + }, + 'about-us': { + id: 2, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/who-we-are', + text: , + type: 'direct', + }, + { + id: 1, + href: '/regulatory', + text: , + type: 'direct', + isDesktopNavOnly: true, + }, + { + id: 2, + href: '/why-choose-us', + text: , + type: 'direct', + }, + { + id: 3, + href: '/partners', + text: , + type: 'direct', + }, + ], + }, + { + id: 1, + items: [ + { + id: 0, + href: '/contact_us', + text: , + type: 'direct', + }, + { + id: 1, + href: '/careers', + text: , + type: 'direct', + }, + { + id: 2, + href: 'https://derivlife.com', //need to update target/type in link component + text: , + type: 'direct', + external: true, + target: '_blank', + }, + ], + }, + ], + }, + resources: { + id: 3, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/help-centre', + text: , + type: 'direct', + }, + { + id: 1, + href: 'https://community.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + external: true, + target: '_blank', + }, + { + id: 2, + href: '/trader-tools', + text: , + type: 'direct', + }, + { + id: 3, + href: '/payment-methods', + text: , + type: 'direct', + }, + ], + }, + { + id: 1, + items: [ + { + id: 0, + href: '/dmt5-trading-signals', + text: , + type: 'direct', + }, + { + id: 1, + href: 'https://deriv.statuspage.io/', //need to update target/type in link component + text: , + type: 'direct', + isMobileNavOnly: true, + }, + { + id: 2, + href: 'https://blog.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + external: true, + target: '_blank', + }, + ], + }, + ], + }, + legal: { + id: 4, + type: 'nav-dropdown', + text: , + isMobileNavOnly: true, + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/regulatory', + text: , + type: 'direct', + }, + { + id: 1, + href: '/terms-and-conditions', + text: , + type: 'direct', + }, + { + id: 2, + href: '/responsible', + text: , + type: 'direct', + }, + ], + }, + ], + }, + partners: { + id: 5, + type: 'nav-dropdown', + text: , + isMobileNavOnly: true, + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/partners/deriv-prime', + text: , + type: 'direct', + }, + { + id: 1, + href: '/partners/affiliate-ib', + text: , + type: 'direct', + }, + { + id: 2, + href: '/partners/payment-agent', + text: , + type: 'direct', + }, + { + id: 3, + href: 'https://api.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + }, + ], + }, + ], + }, +} + +export const mainEuNavItems: NavLinkItems = { + trade: { + id: 0, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + header: { + text: , + type: 'text', + }, + items: [ + { + id: 0, + href: '/trade-types/cfds', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/trade-types/multiplier', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + ], + }, + { + id: 1, + header: { + text: , + type: 'text', + }, + items: [ + { + id: 0, + href: '/dmt5', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + { + id: 1, + href: '/dtrader', + text: , + type: 'direct', + icon: ( + + ), + description: ( + + ), + }, + ], + }, + ], + }, + markets: { + id: 1, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/markets/forex', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 1, + href: '/markets/synthetic', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/markets/stock', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + ], + }, + { + id: 1, + items: [ + { + id: 0, + href: '/markets/commodities', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 1, + href: '/markets/cryptocurrencies', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + { + id: 2, + href: '/markets/exchange-traded-funds', + text: , + type: 'direct', + icon: , + description: ( + + ), + }, + ], + }, + ], + }, + 'about-us': { + id: 2, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/who-we-are', + text: , + type: 'direct', + }, + { + id: 1, + href: '/regulatory', + text: , + type: 'direct', + isDesktopNavOnly: true, + }, + { + id: 2, + href: '/why-choose-us', + text: , + type: 'direct', + }, + { + id: 3, + href: '/partners', + text: , + type: 'direct', + }, + ], + }, + { + id: 1, + items: [ + { + id: 0, + href: '/contact_us', + text: , + type: 'direct', + }, + { + id: 1, + href: '/careers', + text: , + type: 'direct', + }, + { + id: 2, + href: 'https://derivlife.com', //need to update target/type in link component + text: , + type: 'direct', + external: true, + target: '_blank', + }, + ], + }, + ], + }, + resources: { + id: 3, + type: 'nav-dropdown', + text: , + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/help-centre', + text: , + type: 'direct', + }, + { + id: 1, + href: 'https://community.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + external: true, + target: '_blank', + }, + { + id: 2, + href: '/trader-tools', + text: , + type: 'direct', + }, + { + id: 3, + href: '/payment-methods', + text: , + type: 'direct', + }, + ], + }, + { + id: 1, + items: [ + { + id: 0, + href: '/dmt5-trading-signals', + text: , + type: 'direct', + }, + { + id: 1, + href: 'https://deriv.statuspage.io/', //need to update target/type in link component + text: , + type: 'direct', + isMobileNavOnly: true, + }, + { + id: 2, + href: 'https://blog.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + external: true, + target: '_blank', + }, + ], + }, + ], + }, + legal: { + id: 4, + type: 'nav-dropdown', + text: , + isMobileNavOnly: true, + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/regulatory', + text: , + type: 'direct', + }, + { + id: 1, + href: '/terms-and-conditions', + text: , + type: 'direct', + }, + { + id: 2, + href: '/responsible', + text: , + type: 'direct', + }, + ], + }, + ], + }, + partners: { + id: 5, + type: 'nav-dropdown', + text: , + isMobileNavOnly: true, + columns: [ + { + id: 0, + items: [ + { + id: 0, + href: '/partners/deriv-prime', + text: , + type: 'direct', + }, + { + id: 1, + href: '/partners/affiliate-ib', + text: , + type: 'direct', + }, + { + id: 3, + href: 'https://api.deriv.com/', //need to update target/type in link component + text: , + type: 'direct', + }, + ], + }, + ], + }, +} diff --git a/src/features/components/templates/navigation/main-nav/index.tsx b/src/features/components/templates/navigation/main-nav/index.tsx index 607aef50b47..b3a8a607c16 100644 --- a/src/features/components/templates/navigation/main-nav/index.tsx +++ b/src/features/components/templates/navigation/main-nav/index.tsx @@ -1,25 +1,19 @@ import React from 'react' -import NavTemplate from '../template' -import MainNavButtons from './main-nav-buttons' -import { main_nav_logo } from './main-nav.module.scss' -import { mainItems } from './content' -import Image from 'features/components/atoms/image' -import LogoImage from 'images/common/rebranding_logo.svg' -import Link from 'features/components/atoms/link' +import { NavigationBlock } from '@deriv-com/blocks' +import MainNavigationButtons from './nav.buttons' +import MainNavigationLogo from './nav.logo' +import { mainEuNavItems, mainRowNavItems } from './data' +import useRegion from 'components/hooks/use-region' -const MainNav = () => { +const MainRowNavigation = () => { + const { is_eu } = useRegion() return ( - ( - - deriv-logo - - )} - items={mainItems} - > - - + ) } -export default MainNav +export default MainRowNavigation diff --git a/src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx b/src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx deleted file mode 100644 index 325998fb7fd..00000000000 --- a/src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' -import useAuthCheck from 'components/hooks/use-auth-check' -import { Localize } from 'components/localization' -import Button from 'features/components/atoms/button' -import useHandleLogin from 'components/hooks/use-handle-login' -import useHandleSignup from 'components/hooks/use-handle-signup' -import usePpc from 'features/hooks/use-ppc' -import LanguageSwitcher from 'features/components/molecules/language-switcher' -import Flex from 'features/components/atoms/flex-box' -import { handleRedirectToTradersHub } from 'components/custom/utils' - -const MainNavButtons = () => { - const [is_logged_in] = useAuthCheck() - const { is_ppc_redirect } = usePpc() - - const handleLogin = useHandleLogin() - const handleSignup = useHandleSignup(is_ppc_redirect) - - return ( - - {is_logged_in ? ( - - - - ) : ( - <> - - - - - - - - )} - - - ) -} - -export default MainNavButtons diff --git a/src/features/components/templates/navigation/main-nav/main-nav.module.scss b/src/features/components/templates/navigation/main-nav/main-nav.module.scss deleted file mode 100644 index 56061fe826d..00000000000 --- a/src/features/components/templates/navigation/main-nav/main-nav.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; - -.main_nav_logo { - inline-size: 7rem; - block-size: 2.4rem; - - @include breakpoints(tablet) { - inline-size: 9.6rem; - block-size: 3.6rem; - } -} diff --git a/src/features/components/templates/navigation/main-nav/nav.buttons.tsx b/src/features/components/templates/navigation/main-nav/nav.buttons.tsx new file mode 100644 index 00000000000..eb74b6d7115 --- /dev/null +++ b/src/features/components/templates/navigation/main-nav/nav.buttons.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import { MobileNavToggle } from '@deriv-com/blocks' +import { Button } from '@deriv/quill-design' +// eslint-disable-next-line import/no-unresolved +import { LabelPairedGrid2BoldIcon } from '@deriv/quill-icons/LabelPaired' +import { Localize } from 'components/localization' +import { handleRedirectToTradersHub } from 'components/custom/utils' +import useAuthCheck from 'components/hooks/use-auth-check' +import useHandleLogin from 'components/hooks/use-handle-login' +import useHandleSignup from 'components/hooks/use-handle-signup' +import usePpc from 'features/hooks/use-ppc' + +export const MainNavigationButtons = () => { + const [is_logged_in] = useAuthCheck() + const { is_ppc_redirect } = usePpc() + + const handleLogin = useHandleLogin() + const handleSignup = useHandleSignup(is_ppc_redirect) + + return ( +
+ {is_logged_in ? ( + + ) : ( + <> + + + + )} + +
+ ) +} + +export default MainNavigationButtons diff --git a/src/features/components/templates/navigation/main-nav/nav.logo.tsx b/src/features/components/templates/navigation/main-nav/nav.logo.tsx new file mode 100644 index 00000000000..6ff144566e1 --- /dev/null +++ b/src/features/components/templates/navigation/main-nav/nav.logo.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { CustomLink } from '@deriv-com/components' +// eslint-disable-next-line import/no-unresolved +import { BrandDerivWordmarkCoralIcon } from '@deriv/quill-icons/Logo' + +export const MainNavigationLogo = () => { + return ( + + + + ) +} + +export default MainNavigationLogo diff --git a/src/features/components/templates/navigation/market-nav/index.tsx b/src/features/components/templates/navigation/market-nav/index.tsx deleted file mode 100644 index ac5f90ef165..00000000000 --- a/src/features/components/templates/navigation/market-nav/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { StringParam, useQueryParam } from 'use-query-params' -import NavTemplate from '../template' -import { mainItems } from '../main-nav/content' -import MainNavButtons from '../main-nav/main-nav-buttons' -import MarketBottomNav from '../template/market-bottom-nav' -import { market_nav_logo } from './market-nav.module.scss' -import Image from 'features/components/atoms/image' -import LogoImage from 'images/common/rebranding_logo.svg' -import Link from 'features/components/atoms/link' -import { localize } from 'components/localization' - -const MarketNav = () => { - const [platform] = useQueryParam('platform', StringParam) - const [is_deriv_go, setIsDerivGo] = useState(false) - - useEffect(() => { - setIsDerivGo(platform === 'derivgo') - }, [platform]) - - return ( - <> - {is_deriv_go ? null : ( - } - renderLogo={() => ( - - {localize('_t_deriv-logo_t_')} - - )} - items={mainItems} - > - - - )} - - ) -} - -export default MarketNav diff --git a/src/features/components/templates/navigation/market-nav/market-nav.module.scss b/src/features/components/templates/navigation/market-nav/market-nav.module.scss deleted file mode 100644 index 30cc73afc59..00000000000 --- a/src/features/components/templates/navigation/market-nav/market-nav.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'features/styles/theme/theme-mixins' as *; - -.market_nav_logo { - inline-size: 7rem; - block-size: 2.4rem; - - @include breakpoints(tablet) { - inline-size: 9.6rem; - block-size: 3.6rem; - } -} diff --git a/src/features/components/templates/navigation/partners-nav/data.tsx b/src/features/components/templates/navigation/partners-nav/data.tsx new file mode 100644 index 00000000000..5b423b719b6 --- /dev/null +++ b/src/features/components/templates/navigation/partners-nav/data.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { NavLinkItems } from '@deriv-com/providers' +import { Localize } from 'components/localization' +import { deriv_api_url } from 'common/constants' + +export const partnersItems: NavLinkItems = { + trade: { + id: 0, + type: 'direct', + href: '/partners/deriv-prime', + text: , + }, + affiliates: { + id: 1, + href: '/partners/affiliate-ib', + text: , + type: 'direct', + }, + 'payment-agents': { + id: 2, + href: '/partners/payment-agent', + text: , + type: 'direct', + }, + 'deriv-api': { + id: 3, + href: deriv_api_url, + text: , + type: 'direct', + }, +} + +export const partnersEUItems: NavLinkItems = { + trade: { + id: 0, + type: 'direct', + href: '/partners/deriv-prime', + text: , + }, + affiliates: { + id: 1, + href: '/partners/affiliate-ib', + text: , + type: 'direct', + }, + 'deriv-api': { + id: 3, + href: deriv_api_url, + text: , + type: 'direct', + }, +} diff --git a/src/features/components/templates/navigation/partners-nav/index.tsx b/src/features/components/templates/navigation/partners-nav/index.tsx new file mode 100644 index 00000000000..dacfc236968 --- /dev/null +++ b/src/features/components/templates/navigation/partners-nav/index.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { NavigationBlock } from '@deriv-com/blocks' +// eslint-disable-next-line import/no-unresolved +import { SubBrandDerivPartnersBrandLightIcon } from '@deriv/quill-icons/Logo' +import { CustomLink } from '@deriv-com/components' +import TopNavigation from './top-navigation' +import { partnersItems, partnersEUItems } from './data' +import PartnersNavButtons from './nav.buttons' +import useRegion from 'components/hooks/use-region' + +const PartnersNav = () => { + const { is_eu } = useRegion() + + return ( + ( + + + + )} + items={is_eu ? partnersEUItems : partnersItems} + /> + ) +} + +export default PartnersNav diff --git a/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx b/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx new file mode 100644 index 00000000000..e5e69b0d942 --- /dev/null +++ b/src/features/components/templates/navigation/partners-nav/nav.buttons.tsx @@ -0,0 +1,65 @@ +import React, { useMemo } from 'react' +import { MobileNavToggle } from '@deriv-com/blocks' +import { Button } from '@deriv/quill-design' +import { getLocationPathname } from 'common/utility' +import useRegion from 'components/hooks/use-region' +import { Localize, LocalizedLink } from 'components/localization' +import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link' + +const AffiliateButtons = () => { + const { affiliate_signup_link } = useAffiliateSignupLink() + return ( + <> + + + + ) +} + +const PaymentAgentButtons = () => { + return ( + + + + + ) +} + +const PartnersNavButtons = () => { + const { is_eu } = useRegion() + const path_name = getLocationPathname() + + const affiliate_buttons = useMemo(() => { + return !path_name ? null : path_name.includes('affiliate-ib') ? ( + + ) : path_name.includes('payment-agent') && !is_eu ? ( + + ) : null + }, [is_eu, path_name]) + + return ( +
+ {affiliate_buttons} + +
+ ) +} + +export default PartnersNavButtons diff --git a/src/features/components/templates/navigation/partners-nav/prime-nav.tsx b/src/features/components/templates/navigation/partners-nav/prime-nav.tsx new file mode 100644 index 00000000000..1b3d459a65d --- /dev/null +++ b/src/features/components/templates/navigation/partners-nav/prime-nav.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import { MobileNavToggle, NavigationBlock } from '@deriv-com/blocks' +// eslint-disable-next-line import/no-unresolved +import { SubBrandDerivPartnersBrandLightIcon } from '@deriv/quill-icons/Logo' +import { Button } from '@deriv/quill-design' +import { CustomLink } from '@deriv-com/components' +import { partnersEUItems, partnersItems } from './data' +import TopNavigation from './top-navigation' +import useRegion from 'components/hooks/use-region' +import { Localize } from 'components/localization' +import useScrollToElement from 'features/hooks/use-scroll-to-element' + +const PrimeNavButtons = () => { + return ( +
+ + + +
+ ) +} + +const PrimeNav = () => { + const { is_eu } = useRegion() + return ( + ( + + + + )} + items={is_eu ? partnersEUItems : partnersItems} + /> + ) +} + +export default PrimeNav diff --git a/src/features/components/templates/navigation/partners-nav/top-navigation.tsx b/src/features/components/templates/navigation/partners-nav/top-navigation.tsx new file mode 100644 index 00000000000..1b56c5ebc77 --- /dev/null +++ b/src/features/components/templates/navigation/partners-nav/top-navigation.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { CustomLink } from '@deriv-com/components' +import clsx from 'clsx' + +export const TopNavigation = () => { + const sharedClasses = 'text-body-sm hover:text-typography-prominent hover:no-underline' + return ( +
+ + Deriv website + + + Who we are + + + Contact us + +
+ ) +} + +export default TopNavigation diff --git a/src/features/components/templates/navigation/payment-agent-nav/data.tsx b/src/features/components/templates/navigation/payment-agent-nav/data.tsx deleted file mode 100644 index 41b97b0905d..00000000000 --- a/src/features/components/templates/navigation/payment-agent-nav/data.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { NavItems } from '../types' - -const affiliateNavItems: NavItems = [ - { - id: 0, - data: { - type: 'single-item', - title: '_t_Deriv Prime_t_', - content: { - type: 'internal', - to: '/partners/deriv-prime/', - }, - }, - }, - { - id: 1, - data: { - type: 'single-item', - title: '_t_Affiliates and IBs_t_', - content: { - type: 'internal', - to: '/partners/affiliate-ib/', - }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 2, - data: { - type: 'single-item', - title: '_t_Affiliates_t_', - content: { - type: 'internal', - to: '/partners/affiliate-ib/', - }, - }, - visibility: { - is_eu: true, - }, - }, - { - id: 3, - data: { - type: 'single-item', - title: '_t_Payment agents_t_', - content: { - type: 'internal', - to: '/partners/payment-agent/', - }, - }, - visibility: { - is_row: true, - }, - }, - { - id: 4, - data: { - type: 'single-item', - title: '_t_API_t_', - content: { - type: 'company', - url_name: 'api', - }, - }, - }, -] -export default affiliateNavItems diff --git a/src/features/components/templates/navigation/payment-agent-nav/index.tsx b/src/features/components/templates/navigation/payment-agent-nav/index.tsx deleted file mode 100644 index 5eb0980efdf..00000000000 --- a/src/features/components/templates/navigation/payment-agent-nav/index.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import React, { useMemo } from 'react' -import NavTemplate from '../template' -import affiliateNavItems from './data' -import { partners_buttons, partners_nav_logo } from './payment-agent-nav.module.scss' -import PrimeLogo from 'images/svg/deriv-prime/deriv-prime-logo.svg' -import PartnerNavLogo from 'images/svg/partner-nav-logo.svg' -import Image from 'features/components/atoms/image' -import Button from 'features/components/atoms/button' -import { Localize } from 'components/localization/localize' -import LanguageSwitcher from 'features/components/molecules/language-switcher' -import Link from 'features/components/atoms/link' -import Flex from 'features/components/atoms/flex-box' -import { getLocationPathname } from 'common/utility' -import useScrollToElement from 'features/hooks/use-scroll-to-element' -import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link' -import useRegion from 'components/hooks/use-region' -import { TString } from 'types/generics' -import { localize } from 'components/localization' - -type contentType = { - [T: string]: TString -} - -const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: boolean }) => { - const path_name = getLocationPathname() - const clickToScrollHandler = useScrollToElement('getintouch') - - const { is_eu } = useRegion() - const { affiliate_signup_link } = useAffiliateSignupLink() - - const texts: contentType = is_eu - ? { - login: '_t_Affiliate log in_t_', - sign_up: '_t_Affiliate sign up_t_', - } - : { - login: '_t_Affiliate & IB Log in_t_', - sign_up: '_t_Affiliate & IB sign up_t_', - } - - const generate_buttons = useMemo(() => { - return !path_name ? null : path_name.includes('deriv-prime') ? ( - - - - ) : ( - <> - - window.open('https://login.deriv.com/signin.php?lang=0', '_blank') - } - outlined - visible={'larger-than-tablet'} - className={partners_buttons} - > - - - - window.open('https://login.deriv.com/signin.php?lang=0', '_blank') - } - outlined - visible={'phone-and-tablet'} - > - - - window.open(affiliate_signup_link, '_blank')} - visible={'larger-than-tablet'} - className={partners_buttons} - > - - - - ) - }, [path_name, affiliate_signup_link]) - - return ( - ( - - {is_prime_page ? ( - {localize('_t_Deriv - ) : ( - {localize('_t_Deriv - )} - - )} - items={affiliateNavItems} - has_top_nav - has_centered_items - > - - {generate_buttons} - - - - ) -} - -export default PaymentAgentAffiliateNav diff --git a/src/features/components/templates/options-layout/index.tsx b/src/features/components/templates/options-layout/index.tsx index 003bb6e2826..3f6bd537b97 100644 --- a/src/features/components/templates/options-layout/index.tsx +++ b/src/features/components/templates/options-layout/index.tsx @@ -1,8 +1,8 @@ import React, { ReactNode } from 'react' +import MainRowNavigation from '../navigation/main-nav' import Layout from 'features/components/templates/layout' import { start_trading_data, why_trade_options_data } from './data' -import MainNav from 'features/components/templates/navigation/main-nav' -import Footer from 'features/components/templates/footer' +import MainFooter from 'features/components/templates/footer' import StartTrading from 'features/components/templates/start-trading' import WhyTradeOptions from 'features/components/templates/why-trade-options' import { TString } from 'types/generics' @@ -24,7 +24,7 @@ const OptionsLayout = ({ }: OptionsLayoutProps) => { return ( - + -