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 </Ul>
93 ),
94 },
95 'submit-support-ticket': {
96 text: (
97 <>
98 At the bottom of the form, click <strong>Submit Support Ticket</strong>.
99 </>
100 ),
101 },
102
103 /* Billing */
104 'billing-creditcard-form': {
105 text: (
106 <>
107 In the credit card information dialog box, enter your credit card information:
108 <Ul>
109 <li>Card number</li>
110 <li>MM / YY: the month and year of the card expiration date</li>
111 <li>CVC: the three-digit code on the credit card</li>
112 </Ul>
113 </>
114 ),
115 image: <Screenshot src="/shared/billing-creditcard-form.png" alt="Screenshot of the credit card form" />,
116 },
117 'billing-downgrade-selection': {
118 text: (
119 <>
120 Under "change plan", click <strong>Downgrade Plan</strong>.
121 </>
122 ),
123 image: <Screenshot src="/shared/billing-downgrade-selection.png" alt="Screenshot of the downgrade plan button" />,
124 },
125 'billing-downgrade-confirm': {
126 text: (
127 <>
128 Under "Are you sure?", click <strong>Downgrade to a free account</strong>.
129 </>
130 ),
131 image: (
132 <Screenshot src="/shared/billing-downgrade-confirm.png" alt="Screenshot of the downgrade plan confirmation" />
133 ),
134 },
135 'billing-download': {
136 text: (
137 <>
138 To download a single receipt, find the row of the receipt you want to download, then click the PDF icon on the
139 right side of the row.
140 </>
141 ),
142 image: <Screenshot src="/shared/billing-download-icon.png" alt="Screenshot of the download receipt icon" />,
143 },
144 'billing-download-checked': {
145 text: (
146 <>
147 To download multiple receipts, first select the receipts that you wish to download by selecting the box next to
148 the date. To select all receipts, select the checkbox next to the "Date" header. Then click{' '}
149 <strong>Download Checked</strong>.
150 </>
151 ),
152 image: <Screenshot src="/shared/billing-download-checked.png" alt="Screenshot of the download checked option" />,
153 },
154 'billing-email': {
155 text: (
156 <>
157 To email a single receipt, find the row of the receipt you want to download, then, on the right side of the row,
158 click the email icon.
159 </>
160 ),
161 image: <Screenshot src="/shared/billing-email-icon.png" alt="Screenshot of the email receipt icon" />,
162 },
163 'billing-email-checked': {
164 text: (
165 <>
166 To email multiple receipts, first select the receipts that you wish to download by selecting the box next to the
167 date. To select all receipts, select the checkbox next to the "Date" header. Then click{' '}
168 <strong>Email Checked</strong>.
169 </>
170 ),
171 image: <Screenshot src="/shared/billing-email-checked.png" alt="Screenshot of the email checked receipt icon" />,
172 },
173 'billing-email-receipt': {
174 text: <>In the Email Receipt dialog box, fill in the "From", "To", and "Message" fields.</>,
175 image: <Screenshot src="/shared/billing-email-receipt.png" alt="Screenshot of the email receipt dialog" />,
176 },
177 'billing-extra-info': {
178 text: (
179 <>
180 To add a business name, VAT number, address of record, or other information to your receipts, in the "Extra
181 Billing Information" text box, type the information.
182 </>
183 ),
184 image: <Screenshot src="/shared/billing-extra-info.png" alt="Screenshot of the extra billing info dialog" />,
185 },
186 'billing-extra-receipt-email': {
187 text: (
188 <>
189 To update the email address used for receipts, beside "Send my receipts", select the checkbox and type the email
190 address that should receive billing receipts.
191 </>
192 ),
193 image: (
194 <Screenshot src="/shared/billing-extra-receipt-email.png" alt="Screenshot of billing receipt email settings" />
195 ),
196 },
197 'billing-extra-save': {
198 text: (
199 <>
200 Click <strong>Save</strong>.
201 </>
202 ),
203 image: <Screenshot src="/shared/billing-extra-save.png" alt="Screenshot of billing extra info save button" />,
204 },
205 'billing-form': {
206 text: (
207 <>
208 In the billing information dialog box, enter your billing information:
209 <Ul>
210 <li>Email: the email address used for the billing contact</li>
211 <li>Name: the name on the credit card used to pay</li>
212 <li>Street, City, ZIP Code, Country: the billing address associated with the credit card</li>
213 </Ul>
214 </>
215 ),
216 image: <Screenshot src="/shared/billing-form.png" alt="Screenshot of billing form" />,
217 },
218 'billing-history': {
219 text: (
220 <>
221 On the Billing Information page, under "monthly bill", select <strong>View Billing History</strong>.
222 </>
223 ),
224 image: <Screenshot src="/shared/billing-history.png" alt="Screenshot of billing history selection in user menu" />,
225 },
226 'billing-info': {
227 text: (
228 <>
229 In the upper right corner of the page, click your profile picture, then select <strong>Billing Info</strong>.
230 </>
231 ),
232 image: <Screenshot src="/shared/billing-info.png" alt="Screenshot of billing info selection in user menu" />,
233 },
234 'billing-receipt-settings': {
235 text: <>At the bottom of the Billing History dialog box, click "Receipt Settings".</>,
236 image: <Screenshot src="/shared/billing-receipt-settings.png" alt="Screenshot of billing receipt settings" />,
237 },
238 'billing-update-card': {
239 text: (
240 <>
241 Click <strong>Update Card</strong>.
242 </>
243 ),
244 image: (
245 <Screenshot src="/shared/billing-update-card.png" alt="Screenshot of update credit card confirmation button" />
246 ),
247 },
248 'billing-view': {
249 text: (
250 <>
251 To view a single receipt, find the row of the receipt you want to view, then, on the right side of the row,
252 click the view icon.
253 </>
254 ),
255 image: <Screenshot src="/shared/billing-view-icon.png" alt="Screenshot of the view receipt icon" />,
256 },
257 'grace-period': {
258 text: 'nine days',
259 },
260 'payment-info-button': {
261 text: (
262 <>
263 Click <strong>Payment Info</strong>.
264 </>
265 ),
266 image: <Screenshot src="/shared/payment-info-button.png" alt="Screenshot of payment information button" />,
267 },
268 'payment-remember-me': {
269 text: <>To save your credit card information for other payments on npm, select "Remember me".</>,
270 image: <Screenshot src="/shared/payment-remember-me.png" alt="Screenshot of payment remember me button" />,
271 },
272 'payment-info': {
273 text: (
274 <>
275 Under "monthly bill", click <strong>Edit Payment Info</strong>.
276 </>
277 ),
278 image: <Screenshot src="/shared/payment-info.png" alt="Screenshot of edit payment info link" />,
279 },
280 'billing-price-teams': {
281 text: <>$7 per member per month</>,
282 },
283 'billing-organization-plans': {
284 image: (
285 <Screenshot src="/shared/billing-plan-selection.png" alt="Screenshot showing the billing plan selection dialog" />
286 ),
287 },
288
289 /* Package management */
290 'organization-package-public': {
291 image: <Screenshot src="/shared/organization-package-public.png" alt="Screenshot of a public npm Teams package" />,
292 },
293 'organization-package-private': {
294 image: (
295 <Screenshot src="/shared/organization-package-private.png" alt="Screenshot of a private npm Teams package" />
296 ),
297 },
298
299 /* Organizations */
300 'organization-create': {
301 text: (
302 <>
303 In the upper right corner of the page, click your profile picture, then click{' '}
304 <strong>Add an Organization</strong>.
305 </>
306 ),
307 image: (
308 <Screenshot src="/shared/organization-create.png" alt="Screenshot of the add an organization dropdown menu" />
309 ),
310 },
311 'organization-selection': {
312 text: <>In the left sidebar, click the name of your organization.</>,
313 image: <Screenshot src="/shared/organization-selection.png" alt="Screenshot of a selected organization" />,
314 },
315 'organization-billing-tab': {
316 text: (
317 <>
318 On the organization settings page, click <strong>Billing</strong>.
319 </>
320 ),
321 image: <Screenshot src="/shared/organization-billing-tab.png" alt="Screenshot of the organization billing tab" />,
322 },
323 'organization-members-tab': {
324 text: (
325 <>
326 On the organization settings page, click <strong>Members</strong>.
327 </>
328 ),
329 image: <Screenshot src="/shared/organization-members-tab.png" alt="Screenshot of the organization members tab" />,
330 },
331 'organization-teams-tab': {
332 text: (
333 <>
334 On the organization settings page, click <strong>Teams</strong>.
335 </>
336 ),
337 image: <Screenshot src="/shared/organization-teams-tab.png" alt="Screenshot of the organization teams tab" />,
338 },
339 }
340
341 export default shared