dependabot/npm_and_yarn/npm_and_yarn-826852524d
@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 | </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 |