1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import React, { useState } from "react";
import { AboutWelcomeUtils } from "../lib/aboutwelcome-utils.mjs";
import { Localized } from "./MSLocalized";
export const Loader = () => {
return (
<button className="primary">
<div className="loaderContainer">
<span className="loader" />
</div>
</button>
);
};
export const InstallButton = props => {
const [installing, setInstalling] = useState(false);
const [installComplete, setInstallComplete] = useState(false);
let buttonLabel = installComplete ? "Installed" : "Add to Firefox";
function onClick(event) {
props.handleAction(event);
// Replace the label with the spinner
setInstalling(true);
window.AWEnsureAddonInstalled(props.addonId).then(value => {
if (value === "complete") {
// Set the label to "Installed"
setInstallComplete(true);
}
// Whether the addon installs or not, we want to remove the spinner
setInstalling(false);
});
}
return (
<div className="install-button-wrapper">
{installing ? (
<Loader />
) : (
<Localized text={buttonLabel}>
<button
id={props.name}
value={props.index}
onClick={onClick}
disabled={installComplete}
className="primary"
/>
</Localized>
)}
</div>
);
};
export const AddonsPicker = props => {
const { content } = props;
if (!content) {
return null;
}
function handleAction(event) {
const { message_id } = props;
let { action, source_id } = content.tiles.data[event.currentTarget.value];
let { type, data } = action;
if (type === "INSTALL_ADDON_FROM_URL") {
if (!data) {
return;
}
}
AboutWelcomeUtils.handleUserAction({ type, data });
AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
}
return (
<div className={"addons-picker-container"}>
{content.tiles.data.map(({ id, name, type, description, icon }, index) =>
name ? (
<div key={id} className="addon-container">
<div className="rtamo-icon">
<img
className={`${
type === "theme" ? "rtamo-theme-icon" : "brand-logo"
}`}
src={icon}
role="presentation"
alt=""
/>
</div>
<div className="addon-details">
<Localized text={name}>
<div className="addon-title" />
</Localized>
<Localized text={description}>
<div className="addon-description" />
</Localized>
</div>
<InstallButton
key={id}
addonId={id}
name={name}
handleAction={handleAction}
index={index}
/>
</div>
) : null
)}
</div>
);
};
|
