feat: support page components (#2211)

src/app/assets/svg/index.ts

@@ -5,6 +5,7 @@ import { ReactComponent as Ark } from "./ark.svg";
 import { ReactComponent as ArrowBack } from "./arrow-back.svg";
 import { ReactComponent as ArrowDown } from "./arrowdown.svg";
 import { ReactComponent as ArrowUp } from "./arrowup.svg";
+import { ReactComponent as Article } from "./article.svg";
 import { ReactComponent as Btc } from "./btc.svg";
 import { ReactComponent as Checkmark } from "./checkmark.svg";
 import { ReactComponent as ChevronDown } from "./chevron-down.svg";
@@ -16,8 +17,10 @@ import { ReactComponent as Delegate } from "./delegate.svg";
 import { ReactComponent as Discord } from "./discord.svg";
 import { ReactComponent as Download } from "./download.svg";
 import { ReactComponent as Eth } from "./eth.svg";
+import { ReactComponent as Exchange } from "./exchange.svg";
 import { ReactComponent as Explorer } from "./explorer.svg";
 import { ReactComponent as EyeOff } from "./eye-off.svg";
+import { ReactComponent as EyeTag } from "./eye-tag.svg";
 import { ReactComponent as Eye } from "./eye.svg";
 import { ReactComponent as FilePassword } from "./file-password.svg";
 import { ReactComponent as Filters } from "./filters.svg";
@@ -37,7 +40,11 @@ import { ReactComponent as OfficialArkPlugin } from "./official-ark-plugin.svg";
 import { ReactComponent as Ok } from "./ok.svg";
 import { ReactComponent as Peer } from "./peer.svg";
 import { ReactComponent as Plugin } from "./plugin.svg";
+import { ReactComponent as Plugins } from "./plugins.svg";
 import { ReactComponent as Plus } from "./plus.svg";
+import { ReactComponent as PortfolioTag } from "./portfolio-tag.svg";
+import { ReactComponent as Portfolio } from "./portfolio.svg";
+import { ReactComponent as Profile } from "./profile.svg";
 import { ReactComponent as Qrcode } from "./qrcode.svg";
 import { ReactComponent as Receive } from "./receive.svg";
 import { ReactComponent as Received } from "./received.svg";
@@ -120,4 +127,11 @@ export const SvgCollection: any = {
 	Notification,
 	Receive,
 	User,
+	Exchange,
+	Plugins,
+	Profile,
+	Portfolio,
+	PortfolioTag,
+	Article,
+	EyeTag,
 };

src/app/i18n/helpers/index.ts

@@ -6,6 +6,7 @@ import { translations as PLUGINS } from "../../../domains/plugins/i18n";
 import { translations as PROFILE } from "../../../domains/profile/i18n";
 import { translations as SEARCH } from "../../../domains/search/i18n";
 import { translations as SETTINGS } from "../../../domains/settings/i18n";
+import { translations as SUPPORT } from "../../../domains/support/i18n";
 import { translations as TRANSACTION } from "../../../domains/transaction/i18n";
 import { translations as WALLETS } from "../../../domains/wallets/i18n";
 import { translations as COMMON } from "../common/i18n";
@@ -21,4 +22,5 @@ export const buildTranslations = (): any => ({
 	SETTINGS,
 	TRANSACTION,
 	WALLETS,
+	SUPPORT,
 });

src/domains/support/data.ts

@@ -0,0 +1,147 @@
+export const categories = [
+	{
+		title: "Profile",
+		subtitle: "38 topics",
+		icon: "Profile",
+		path: "/",
+	},
+	{
+		title: "Portfolio",
+		subtitle: "9 topics",
+		icon: "Portfolio",
+		path: "/",
+	},
+	{
+		title: "Plugins",
+		subtitle: "106 topics",
+		icon: "Plugins",
+		path: "/",
+	},
+	{
+		title: "Exchanges",
+		subtitle: "28 topics",
+		icon: "Exchange",
+		path: "/",
+	},
+];
+
+export const helpfulArticles = [
+	{
+		title: "How to register an account?",
+		path: "/",
+	},
+	{
+		title: "How to enter your account",
+		path: "/",
+	},
+	{
+		title:
+			"How can I change my personal data if I do not have access to my account (forgot my password) and to my mail?",
+		path: "/",
+	},
+	{
+		title:
+			"If you need to make changes to the data entered during the passage of verification, where to apply, how to issue a request?",
+		path: "/",
+	},
+	{
+		title: "Can I delete my account",
+		path: "/",
+	},
+];
+
+export const popularArticles = [
+	{
+		title: "How to delete YubiKey for Two-factor Authentication (2FA)",
+		path: "/",
+	},
+	{
+		title: "Using a YubiKey for Two-Factor Authentication (2FA)",
+		path: "/",
+	},
+	{
+		title: "2FA Code Error",
+		path: "/",
+	},
+	{
+		title: "How to Reset SMS Authentication",
+		path: "/",
+	},
+	{
+		title: "Supported SMS countries Not Receiving SMS Auth Codes",
+		path: "/",
+	},
+];
+
+export const newestArticles = [
+	{
+		title: "How to withdraw from wallet",
+		path: "/",
+	},
+	{
+		title: "How to Make Internal Transfer within wallet",
+		path: "/",
+	},
+	{
+		title: "Missing Withdrawals",
+		path: "/",
+	},
+	{
+		title: "Withdrawal to a Wrong Address",
+		path: "/",
+	},
+	{
+		title: "How to Resume the Withdrawal Function",
+		path: "/",
+	},
+];
+
+export const faqArticles = [
+	{
+		title: "Development Environment Setup",
+		description:
+			"ARK Core is written in TypeScript, and it has been using Lerna to manage the development and publication of its packages and uses Node.js as execution environment. This guid will take you through the basic steps of setting up a development environment",
+		path: "/",
+	},
+	{
+		title: "Core-Tester provides set of instructions on how to run commands for creating and sending transactions?",
+		description:
+			"With our testnet up and running, the first thing we need to do is to connect to it. All interactions between ARK Nodes and the outside world happen through the Public API, which is a REST API facilitating different actions on the blockchain.",
+		path: "/",
+	},
+	{
+		title: "Setup Your Own Blockchain Explorer",
+		description:
+			"ARK Core is written in TypeScript, and it has been using Lerna to manage the development and publication of its packages and uses Node.js as execution environment. This guid will take you through the basic steps of setting up a development environment",
+		path: "/",
+	},
+	{
+		title: "Is it essential for you to understand and master the art of ARK Core Module development?",
+		description:
+			"ARK Core is written in TypeScript, and it has been using Lerna to manage the development and publication of its packages and uses Node.js as execution environment. This guid will take you through the basic steps of setting up a development environment",
+		path: "/",
+	},
+];
+
+export const article = {
+	title: "Setup Your Own Blockchain Explorer",
+	body: "jfdskfjdskajfkasjfasdf",
+	category: "Portfolio",
+	categoryIcon: "PortfolioTag",
+	views: "32 908",
+	image: "https://picsum.photos/seed/picsum/800/400",
+	sections: [
+		{
+			title: "1. Introduction",
+			id: "introduction",
+			body:
+				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Bibendum arcu vitae elementum curabitur. Eget lorem dolor sed viverra ipsum. Ut venenatis tellus in metus vulputate eu scelerisque. Mi bibendum neque egestas congue quisque egestas diam in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nullam vehicula ipsum a arcu cursus. Sed libero enim sed faucibus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Dui id ornare arcu odio ut sem nulla pharetra diam. Diam quam nulla porttitor massa.\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Bibendum arcu vitae elementum curabitur. Eget lorem dolor sed viverra ipsum. Ut venenatis tellus in metus vulputate eu scelerisque. Mi bibendum neque egestas congue quisque egestas diam in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nullam vehicula ipsum a arcu cursus. Sed libero enim sed faucibus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Dui id ornare arcu odio ut sem nulla pharetra diam. Diam quam nulla porttitor massa.",
+		},
+		{
+			title: "2. Create Account",
+			id: "account",
+			body:
+				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Bibendum arcu vitae elementum curabitur. Eget lorem dolor sed viverra ipsum. Ut venenatis tellus in metus vulputate eu scelerisque. Mi bibendum neque egestas congue quisque egestas diam in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nullam vehicula ipsum a arcu cursus. Sed libero enim sed faucibus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Dui id ornare arcu odio ut sem nulla pharetra diam. Diam quam nulla porttitor massa.\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Bibendum arcu vitae elementum curabitur. Eget lorem dolor sed viverra ipsum. Ut venenatis tellus in metus vulputate eu scelerisque. Mi bibendum neque egestas congue quisque egestas diam in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nullam vehicula ipsum a arcu cursus. Sed libero enim sed faucibus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Dui id ornare arcu odio ut sem nulla pharetra diam. Diam quam nulla porttitor massa.",
+		},
+	],
+};

src/domains/support/i18n.tsx

@@ -0,0 +1,12 @@
+export const translations: { [key: string]: any } = {
+	HELP_SUPPORT_TITLE: "Help & Support",
+	HELP_SUPPORT_SUBTITLE: "Do you need any help? Find it in our archive or write to us",
+	CONTACT_US: "Contact us",
+	HELPFUL_CATEGORY_TITLE: "Most Helpful",
+	POPULAR_CATEGORY_TITLE: "Most Popular",
+	NEWEST_CATEGORY_TITLE: "Newest",
+	FAQ_PORTFOLIO_TITLE: "Portfolio",
+	FAQ_PORTFOLIO_SUBTITLE: "Frequently asked questions about portfolio and addresses",
+	FOOTER_HELP_TITLE: "Do you still need help with you question?",
+	FOOTER_HELP_SUBTITLE: "Write us a letter and we will reply as soon as possible.",
+};

src/domains/support/pages/Article/Article.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { article } from "../../data";
+import { Article } from "./Article";
+
+export default {
+	title: "Support / Pages / Article",
+};
+
+export const Default = () => {
+	return (
+		<Article
+			title={article.title}
+			category={article.category}
+			categoryIcon={article.categoryIcon}
+			views={article.views}
+			sections={article.sections}
+		/>
+	);
+};
+
+export const WithImage = () => {
+	return (
+		<Article
+			title={article.title}
+			category={article.category}
+			categoryIcon={article.categoryIcon}
+			views={article.views}
+			sections={article.sections}
+			image={article.image}
+		/>
+	);
+};

src/domains/support/pages/Article/Article.styles.ts

@@ -0,0 +1,21 @@
+export const navStyles = `
+    & {
+        .active {
+            position: relative;
+            font-weight: bold;
+
+            &:after {
+                position: absolute;
+                content: '';
+                display: block;
+                left: 0;
+                top: 0.2rem;
+                bottom: 0.2rem;
+                background: var(--theme-color-primary-500);
+                width: 0.2rem;
+                margin-left: -0.1rem;
+                border-radius: 2rem;
+            }
+        }
+    }
+`;

src/domains/support/pages/Article/Article.test.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/require-await */
+import { render } from "@testing-library/react";
+import { i18n } from "app/i18n";
+import React from "react";
+import { I18nextProvider } from "react-i18next";
+
+import { article } from "../../data";
+import { Article } from "./Article";
+
+describe("SupportPage", () => {
+	it("should render article support page", () => {
+		const { container } = render(
+			<I18nextProvider i18n={i18n}>
+				<Article
+					title={article.title}
+					category={article.category}
+					categoryIcon={article.categoryIcon}
+					views={article.views}
+					sections={article.sections}
+				/>
+			</I18nextProvider>,
+		);
+		expect(container).toMatchSnapshot();
+	});
+
+	it("should render article support page with main image", () => {
+		const { container } = render(
+			<I18nextProvider i18n={i18n}>
+				<Article
+					title={article.title}
+					category={article.category}
+					categoryIcon={article.categoryIcon}
+					views={article.views}
+					sections={article.sections}
+					image={article.image}
+				/>
+			</I18nextProvider>,
+		);
+		expect(container).toMatchSnapshot();
+	});
+});