1 import React from 'react'
2 import {Link, Screenshot, ul as Ul} from './mdx'
3
4 const shared = {
5 /* User login */
6 'user-login': {
7 text: (
8 <>
9 On the npm "<Link href="https://www.npmjs.com/login">Sign In</Link>" page, enter your account details and click{' '}
10 <strong>Sign In</strong>.
11 </>
12 ),
13 image: <Screenshot src="/shared/user-login.png" alt="Screenshot of npm login dialog" />,
14 },
15 'contact-support': {
16 text: <Link href="https://www.npmjs.com/support">contact npm Support</Link>,
17 },
18 'contact-enterprise-support': {
19 text: <Link href="mailto:enterprise@npmjs.com">contact Enterprise Support</Link>,
20 },
21 'profile-settings': {
22 text: (
23 <>
24 In the upper right corner of the page, click your profile picture, then click <strong>Profile Settings</strong>.
25 </>
26 ),
27 image: (
28 <Screenshot src="/shared/profile-settings.png" alt="Screenshot of profile settings selection in user menu" />
29 ),
30 },
31 'account-settings': {
32 text: (
33 <>
34 In the upper right corner of the page, click your profile picture, then click <strong>Account</strong>.
35 </>
36 ),
37 image: (
38 <Screenshot src="/shared/account-settings.png" alt="Screenshot of account settings selection in user menu" />
39 ),
40 },
41 'start-account-recovery': {
42 text: (
43 <>
44 On the "Request an Account Recovery" page, click <strong>Start Account Recovery</strong>.
45 </>
46 ),
47 image: (
48 <Screenshot
49 src="/getting-started/setting-up-your-npm-user-account/request-account-recovery.png"
50 alt="Screenshot showing account recovery page"
51 />
52 ),
53 },
54 'use-recovery-code': {
55 text: (
56 <>
57 On the "Two-Factor Authentication" page, click <strong>Use a recovery code or request a reset</strong>.
58 </>
59 ),
60 image: (
61 <Screenshot
62 src="/getting-started/setting-up-your-npm-user-account/recovery-code-link.png"
63 alt="Screenshot showing Security Key prompt with a link to navigate to the recovery code input screen"
64 />
65 ),
66 },
67 'support-ticket-form': {
68 text: <>In the "Open a Support Ticket" form, enter the following information:</>,
69 },
70 'enter-email-address': {
71 text: (
72 <>
73 In the <strong>Email</strong> field, enter an email address where our support team can contact you.
74 </>
75 ),
76 },
77 'support-ticket-other': {
78 text: (
79 <>
80 If you need help with anything else, in the <strong>How can we help?</strong> section, select{' '}
81 <strong>Other</strong> and enter more information in the <strong>Additional Details</strong> field.
82 </>
83 ),
84 },
85 'connect-to-accounts': {
86 text: (
87 <Ul>
88 <li>
89 If you have previously linked a GitHub account to your npm account, select <strong>Connect to GitHub</strong>.
90 This will help our support team verify your account.
91 </li>
92 <li>
93 If you have previously linked a Twitter account to your npm account, select{' '}
94 <strong>Connect to Twitter</strong>. This will help our support team verify your account.
95 </li>
96 </Ul>
97 ),
98 },
99 'submit-support-ticket': {
100 text: (
101 <>
102 At the bottom of the form, click <strong>Submit Support Ticket</strong>.
103 </>
104 ),
105 },
106
107 /* Billing */
108 'billing-creditcard-form': {
109 text: (
110 <>
111 In the credit card information dialog box, enter your credit card information:
112 <Ul>
113 <li>Card number</li>
114 <li>MM / YY: the month and year of the card expiration date</li>
115 <li>CVC: the three-digit code on the credit card</li>
116 </Ul>
117 </>
118 ),
119 image: <Screenshot src="/shared/billing-creditcard-form.png" alt="Screenshot of the credit card form" />,
120 },
121 'billing-downgrade-selection': {
122 text: (
123 <>
124 Under "change plan", click <strong>Downgrade Plan</strong>.
125 </>
126 ),
127 image: <Screenshot src="/shared/billing-downgrade-selection.png" alt="Screenshot of the downgrade plan button" />,
128 },
129 'billing-downgrade-confirm': {
130 text: (
131 <>
132 Under "Are you sure?", click <strong>Downgrade to a free account</strong>.
133 </>
134 ),
135 image: (
136 <Screenshot src="/shared/billing-downgrade-confirm.png" alt="Screenshot of the downgrade plan confirmation" />
137 ),
138 },
139 'billing-download': {
140 text: (
141 <>
142 To download a single receipt, find the row of the receipt you want to download, then click the PDF icon on the
143 right side of the row.
144 </>
145 ),
146 image: <Screenshot src="/shared/billing-download-icon.png" alt="Screenshot of the download receipt icon" />,
147 },
148 'billing-download-checked': {
149 text: (
150 <>
151 To download multiple receipts, first select the receipts that you wish to download by selecting the box next to
152 the date. To select all receipts, select the checkbox next to the "Date" header. Then click{' '}
153 <strong>Download Checked</strong>.
154 </>
155 ),
156 image: <Screenshot src="/shared/billing-download-checked.png" alt="Screenshot of the download checked option" />,
157 },
158 'billing-email': {
159 text: (
160 <>
161 To email a single receipt, find the row of the receipt you want to download, then, on the right side of the row,
162 click the email icon.
163 </>
164 ),
165 image: <Screenshot src="/shared/billing-email-icon.png" alt="Screenshot of the email receipt icon" />,
166 },
167 'billing-email-checked': {
168 text: (
169 <>
170 To email multiple receipts, first select the receipts that you wish to download by selecting the box next to the
171 date. To select all receipts, select the checkbox next to the "Date" header. Then click{' '}
172 <strong>Email Checked</strong>.
173 </>
174 ),
175 image: <Screenshot src="/shared/billing-email-checked.png" alt="Screenshot of the email checked receipt icon" />,
176 },
177 'billing-email-receipt': {
178 text: <>In the Email Receipt dialog box, fill in the "From", "To", and "Message" fields.</>,
179 image: <Screenshot src="/shared/billing-email-receipt.png" alt="Screenshot of the email receipt dialog" />,
180 },
181 'billing-extra-info': {
182 text: (
183 <>
184 To add a business name, VAT number, address of record, or other information to your receipts, in the "Extra
185 Billing Information" text box, type the information.
186 </>
187 ),
188 image: <Screenshot src="/shared/billing-extra-info.png" alt="Screenshot of the extra billing info dialog" />,
189 },
190 'billing-extra-receipt-email': {
191 text: (
192 <>
193 To update the email address used for receipts, beside "Send my receipts", select the checkbox and type the email
194 address that should receive billing receipts.
195 </>
196 ),
197 image: (
198 <Screenshot src="/shared/billing-extra-receipt-email.png" alt="Screenshot of billing receipt email settings" />
199 ),
200 },
201 'billing-extra-save': {
202 text: (
203 <>
204 Click <strong>Save</strong>.
205 </>
206 ),
207 image: <Screenshot src="/shared/billing-extra-save.png" alt="Screenshot of billing extra info save button" />,
208 },
209 'billing-form': {
210 text: (
211 <>
212 In the billing information dialog box, enter your billing information:
213 <Ul>
214 <li>Email: the email address used for the billing contact</li>
215 <li>Name: the name on the credit card used to pay</li>
216 <li>Street, City, ZIP Code, Country: the billing address associated with the credit card</li>
217 </Ul>
218 </>
219 ),
220 image: <Screenshot src="/shared/billing-form.png" alt="Screenshot of billing form" />,
221 },
222 'billing-history': {
223 text: (
224 <>
225 On the Billing Information page, under "monthly bill", select <strong>View Billing History</strong>.
226 </>
227 ),
228 image: <Screenshot src="/shared/billing-history.png" alt="Screenshot of billing history selection in user menu" />,
229 },
230 'billing-info': {
231 text: (
232 <>
233 In the upper right corner of the page, click your profile picture, then select <strong>Billing Info</strong>.
234 </>
235 ),
236 image: <Screenshot src="/shared/billing-info.png" alt="Screenshot of billing info selection in user menu" />,
237 },
238 'billing-receipt-settings': {
239 text: <>At the bottom of the Billing History dialog box, click "Receipt Settings".</>,
240 image: <Screenshot src="/shared/billing-receipt-settings.png" alt="Screenshot of billing receipt settings" />,
241 },
242 'billing-update-card': {
243 text: (
244 <>
245 Click <strong>Update Card</strong>.
246 </>
247 ),
248 image: (
249 <Screenshot src="/shared/billing-update-card.png" alt="Screenshot of update credit card confirmation button" />
250 ),
251 },
252 'billing-view': {
253 text: (
254 <>
255 To view a single receipt, find the row of the receipt you want to view, then, on the right side of the row,
256 click the view icon.
257 </>
258 ),
259 image: <Screenshot src="/shared/billing-view-icon.png" alt="Screenshot of the view receipt icon" />,
260 },
261 'grace-period': {
262 text: 'nine days',
263 },
264 'payment-info-button': {
265 text: (
266 <>
267 Click <strong>Payment Info</strong>.
268 </>
269 ),
270 image: <Screenshot src="/shared/payment-info-button.png" alt="Screenshot of payment information button" />,
271 },
272 'payment-remember-me': {
273 text: <>To save your credit card information for other payments on npm, select "Remember me".</>,
274 image: <Screenshot src="/shared/payment-remember-me.png" alt="Screenshot of payment remember me button" />,
275 },
276 'payment-info': {
277 text: (
278 <>
279 Under "monthly bill", click <strong>Edit Payment Info</strong>.
280 </>
281 ),
282 image: <Screenshot src="/shared/payment-info.png" alt="Screenshot of edit payment info link" />,
283 },
284 'billing-price-teams': {
285 text: <>$7 per member per month</>,
286 },
287 'billing-organization-plans': {
288 image: (
289 <Screenshot src="/shared/billing-plan-selection.png" alt="Screenshot showing the billing plan selection dialog" />
290 ),
291 },
292
293 /* Package management */
294 'organization-package-public': {
295 image: <Screenshot src="/shared/organization-package-public.png" alt="Screenshot of a public npm Teams package" />,
296 },
297 'organization-package-private': {
298 image: (
299 <Screenshot src="/shared/organization-package-private.png" alt="Screenshot of a private npm Teams package" />
300 ),
301 },
302
303 /* Organizations */
304 'organization-create': {
305 text: (
306 <>
307 In the upper right corner of the page, click your profile picture, then click{' '}
308 <strong>Add an Organization</strong>.
309 </>
310 ),
311 image: (
312 <Screenshot src="/shared/organization-create.png" alt="Screenshot of the add an organization dropdown menu" />
313 ),
314 },
315 'organization-selection': {
316 text: <>In the left sidebar, click the name of your organization.</>,
317 image: <Screenshot src="/shared/organization-selection.png" alt="Screenshot of a selected organization" />,
318 },
319 'organization-billing-tab': {
320 text: (
321 <>
322 On the organization settings page, click <strong>Billing</strong>.
323 </>
324 ),
325 image: <Screenshot src="/shared/organization-billing-tab.png" alt="Screenshot of the organization billing tab" />,
326 },
327 'organization-members-tab': {
328 text: (
329 <>
330 On the organization settings page, click <strong>Members</strong>.
331 </>
332 ),
333 image: <Screenshot src="/shared/organization-members-tab.png" alt="Screenshot of the organization members tab" />,
334 },
335 'organization-teams-tab': {
336 text: (
337 <>
338 On the organization settings page, click <strong>Teams</strong>.
339 </>
340 ),
341 image: <Screenshot src="/shared/organization-teams-tab.png" alt="Screenshot of the organization teams tab" />,
342 },
343 }
344
345 export default shared