jpg619/fix-accessibility-content-flow
@reggi/path-to-regexp
dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2
dependabot/npm_and_yarn/main/eslint-10.4.0
dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0
dependabot/npm_and_yarn/main/proc-log-7.0.0
dependabot/npm_and_yarn/npm_and_yarn-826852524d
dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2
deprecate-totp-2fa
dhei/classic-tokens
gat-bypass-2fa-docs
jpg619/fix-accessibility-content-flow
jpg619/version-bump-tar-2
kartykp/gat-bypass-2fa-docs
kartykp/upgrade-path-to-regex
main
maitxn/version-bump-tar
patch-1
reggi/cache-based-on-version
reggi/dev-engines
reggi/fix-transform-prettier
reggi/overrides
update-search-sensitivity
| 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 |