Skip to content

Commit fa7bc20

Browse files
bragininibraginini
authored
Add reference to the Apple Store on the Add Peer window (netbirdio#311)
1 parent 87ff65f commit fa7bc20

File tree

7 files changed

+114
-5
lines changed

7 files changed

+114
-5
lines changed

‎e2e-tests/pages/modals/add-peer-modal.ts

+14
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export class AddPeerModal {
66
private readonly windowsTab = this.page.getByTestId('add-peer-modal-windows-tab')
77
private readonly macTab = this.page.getByTestId('add-peer-modal-mac-tab')
88
private readonly androidTab = this.page.getByTestId('add-peer-modal-android-tab')
9+
private readonly iosTab = this.page.getByTestId('add-peer-modal-ios-tab')
910
private readonly dockerTab = this.page.getByTestId('add-peer-modal-docker-tab')
1011
private readonly linuxTabText = this.page.locator('pre').filter({ hasText: 'curl -fsSL https://pkgs.netbird.io/install.sh | sh' })
1112
private readonly windowsDownloadButton = this.page.getByTestId('download-windows-button')
@@ -57,6 +58,13 @@ export class AddPeerModal {
5758
})
5859
}
5960

61+
async openIOSTab() {
62+
await test.step('Open iOS tab on add peer modal', async () => {
63+
await this.iosTab.click();
64+
65+
})
66+
}
67+
6068
async openDockerTab() {
6169
await test.step('Open Docker tab on add peer modal', async () => {
6270
await this.dockerTab.click();
@@ -94,6 +102,12 @@ export class AddPeerModal {
94102
})
95103
}
96104

105+
async assertiOSDownloadButtonHasCorrectLink() {
106+
await test.step('Assert iOS download button has a correct link', async () => {
107+
await expect(this.androidDownloadButton).toHaveAttribute('href', 'https://apps.apple.com/app/netbird-p2p-vpn/id6469329339');
108+
})
109+
}
110+
97111
async assertDockerDownloadButtonHasCorrectLink() {
98112
await test.step('Assert Docker download button has a correct link', async () => {
99113
await expect(this.dockerDownloadButton).toHaveAttribute('href', 'https://docs.docker.com/engine/install/');

‎e2e-tests/tests/peers.test.ts

+5
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ test('Test MacOS tab on a first access add peer modal / @bc', async () => {
3030
await addPeerModal.assertM1M2DownloadButtonHasCorrectLink();
3131
});
3232

33+
test('Test iOS tab on a first access add peer modal', async () => {
34+
await addPeerModal.openIOSTab();
35+
await addPeerModal.assertiOSDownloadButtonHasCorrectLink();
36+
});
37+
3338
test('Test Android tab on a first access add peer modal', async () => {
3439
await addPeerModal.openAndroidTab();
3540
await addPeerModal.assertAndroidDownloadButtonHasCorrectLink();

‎src/assets/app-store-badge.png

24.6 KB
Loading

‎src/components/Banner.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ const Banner = () => {
1515
localStorage.setItem(banner_closed_key,'true');
1616
};
1717

18-
const announcement = "New Release! Manage DNS with NetBird."
18+
const announcement = "NetBird is now available on the App Store."
1919

2020
const announcement_md5 = Md5.hashStr(announcement)
2121

2222
const linkLearnMore = () => {
2323
return (
2424
<a
25-
href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
25+
href="https://apps.apple.com/us/app/netbird-p2p-vpn/id6469329339"
2626
className="font-bold underline"
2727
target="_blank"
2828
rel="noreferrer"
29-
><Text strong style={{color: "#ffffff"}}>Learn more&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
29+
><Text strong style={{color: "#ffffff"}}>Download&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
3030
)
3131
}
3232

@@ -36,7 +36,7 @@ const Banner = () => {
3636

3737
if((!stored_banner_closed || stored_banner_closed !== 'true') ||
3838
(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
39-
//setShow(true);
39+
setShow(true);
4040
localStorage.setItem(banner_md5_key,announcement_md5);
4141
localStorage.setItem(banner_closed_key,'false');
4242
}

‎src/components/popups/addpeer/addpeer/AddPeerPopup.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import MacTab from "./MacTab";
1111
import Link from "antd/lib/typography/Link";
1212
import DockerTab from "./DockerTab";
1313
import AndroidTab from "./AndroidTab";
14+
import IOSTab from "./IOSTab";
15+
import {IOSIcon} from "./IOSIcon";
1416

1517
type Props = {
1618
greeting?: string;
@@ -54,11 +56,16 @@ export const AddPeerPopup: React.FC<Props> = ({
5456
},
5557
{
5658
key: "4",
59+
label: <span data-testid="add-peer-modal-ios-tab"><IOSIcon/>iOS</span>,
60+
children: <IOSTab/>,
61+
},
62+
{
63+
key: "5",
5764
label: <span data-testid="add-peer-modal-android-tab"><AndroidFilled/>Android</span>,
5865
children: <AndroidTab/>,
5966
},
6067
{
61-
key: "5",
68+
key: "6",
6269
label: <span data-testid="add-peer-modal-docker-tab"><Icon component={DockerSVG}/>Docker</span>,
6370
children: <DockerTab/>,
6471
}

‎src/components/popups/addpeer/addpeer/IOSIcon.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import Icon, { HomeOutlined } from '@ant-design/icons';
3+
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
4+
import { Space } from 'antd';
5+
6+
7+
const SvgIcon = () => (
8+
<svg xmlns="http://www.w3.org/2000/svg"
9+
width="15"
10+
height="15"
11+
viewBox="0 0 30 30"
12+
>
13+
<path
14+
d="M 27.126316,5.731579 C 26.889474,5.1078948 26.321052,4.231579 25.51579,3.6078948 25.042106,3.2526316 24.505264,2.9052632 23.747368,2.6842106 22.926316,2.4473684 21.91579,2.368421 20.68421,2.368421 H 9.3157894 c -1.2394736,0 -2.2421052,0.078948 -3.055263,0.3236842 C 5.5026316,2.9210526 4.9421052,3.2605264 4.4842106,3.6157894 3.6789474,4.231579 3.1105264,5.1157894 2.8657894,5.7394736 2.3763158,6.9947368 2.368421,8.4157894 2.368421,9.3157894 V 20.68421 c 0,0.9 0.0079,2.321054 0.4973684,3.584212 0.244737,0.623684 0.813158,1.5 1.6184212,2.123684 0.4657894,0.355262 1.018421,0.70263 1.7763158,0.923684 0.8131578,0.236842 1.8157894,0.315788 3.055263,0.315788 H 20.68421 c 1.239474,0 2.242106,-0.07894 3.055264,-0.323684 0.757894,-0.228946 1.31842,-0.56842 1.776316,-0.923684 0.805262,-0.615788 1.373684,-1.5 1.61842,-2.123684 0.497368,-1.255262 0.497368,-2.68421 0.497368,-3.58421 V 9.3078948 c 0,-0.9 -0.0078,-2.3210526 -0.497368,-3.5842106 z M 7.3736842,19.736842 H 6.4342106 V 14.123684 H 7.3736842 Z M 6.9078948,13.176316 c -0.3157896,0 -0.5842106,-0.260527 -0.5842106,-0.584211 0,-0.323684 0.2605264,-0.58421 0.5842106,-0.58421 0.3236842,0 0.5921052,0.260526 0.5921052,0.58421 -0.0079,0.323684 -0.268421,0.584211 -0.5921052,0.584211 z m 5.6447372,6.702631 c -2.478948,0 -4.0421056,-1.768421 -4.0421056,-4.586842 0,-2.818421 1.5631576,-4.594737 4.0421056,-4.594737 2.478947,0 4.042105,1.776316 4.042105,4.594737 0,2.818421 -1.563158,4.586842 -4.042105,4.586842 z m 8.178946,0 c -1.863157,0 -3.173683,-1.026315 -3.260525,-2.557894 h 0.844736 c 0.09474,1.065789 1.097369,1.792105 2.494737,1.792105 1.33421,0 2.289474,-0.726316 2.289474,-1.728947 0,-0.828948 -0.576316,-1.326316 -1.894736,-1.657895 L 20.1,15.442105 c -1.65,-0.418421 -2.384211,-1.113158 -2.384211,-2.289473 0,-1.436843 1.294737,-2.463158 3.047369,-2.463158 1.736842,0 3,1.026315 3.055264,2.439473 h -0.844738 c -0.07894,-1.002631 -0.971052,-1.673684 -2.23421,-1.673684 -1.231579,0 -2.147369,0.686842 -2.147369,1.66579 0,0.765789 0.552632,1.215789 1.863159,1.547368 l 0.963158,0.244737 c 1.792104,0.45 2.542104,1.136842 2.542104,2.376316 0,1.563158 -1.255262,2.589473 -3.228948,2.589473 z m -4.997367,-4.586842 c 0,2.328948 -1.231579,3.805263 -3.181579,3.805263 -1.95,0 -3.1736846,-1.476315 -3.1736846,-3.805263 0,-2.336842 1.2236846,-3.813158 3.1736846,-3.813158 1.95,0 3.181579,1.476316 3.181579,3.813158 z"
15+
/>
16+
</svg>
17+
);
18+
19+
export const IOSIcon = (props: Partial<CustomIconComponentProps>) => (
20+
<Icon component={SvgIcon} {...props} />
21+
);

‎src/components/popups/addpeer/addpeer/IOSTab.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, {useState} from 'react';
2+
3+
import {Button, Image, Typography} from "antd";
4+
import TabSteps from "./TabSteps";
5+
import { StepCommand } from "./types"
6+
import applestore from '../../../../assets/app-store-badge.png';
7+
import {getConfig} from "../../../../config";
8+
const { grpcApiOrigin } = getConfig();
9+
10+
const {Text} = Typography;
11+
12+
export const IOSTab = () => {
13+
14+
const [steps, setSteps] = useState([
15+
{
16+
key: 1,
17+
title: 'Download and install the application from App Store:',
18+
commands: (
19+
<a data-testid="download-android-button" href="https://apps.apple.com/app/netbird-p2p-vpn/id6469329339" target="_blank">
20+
<Image width="12em" preview={false} style={{marginTop: "5px"}} src={applestore}/>
21+
</a>
22+
),
23+
copied: false
24+
} as StepCommand,
25+
... grpcApiOrigin ? [{
26+
key: 2,
27+
title: 'Click on "Change Server" and enter the following "Server"',
28+
commands: grpcApiOrigin,
29+
commandsForCopy: grpcApiOrigin,
30+
copied: false,
31+
showCopyButton: false
32+
}] : [],
33+
{
34+
key: 2 + (grpcApiOrigin ? 1 : 0),
35+
title: 'Click on the "Connect" button in the middle of the screen',
36+
commands: '',
37+
copied: false,
38+
showCopyButton: false
39+
},
40+
{
41+
key: 3 + (grpcApiOrigin ? 1 : 0),
42+
title: 'Sign up using your email address',
43+
commands: '',
44+
copied: false,
45+
showCopyButton: false
46+
}
47+
])
48+
49+
return (
50+
<div style={{marginTop: 10}}>
51+
<Text style={{fontWeight: "bold"}}>
52+
Install on Android
53+
</Text>
54+
<div style={{marginTop: 5}}>
55+
<TabSteps stepsItems={steps}/>
56+
</div>
57+
58+
</div>
59+
)
60+
}
61+
62+
export default IOSTab

0 commit comments

Comments
 (0)