{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/implement-delete-user/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Implement user deletion","slug":"implement-delete-user","updated":"2022-04-05T00:00:00.000Z","category":"how-to-users-and-authentication","ingress":"This article guides you in implementing a feature where a user can delete their own account through the FTW template Account settings section.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Starting from 2022-03, Sharetribe Flex Marketplace API has an endpoint\nfor\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#delete-user","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"deleting a user's account"}]},{"type":"text","value":".\nAfter the user has been deleted, any transactions where they are a\nparticipant cannot transition forward, and no payouts will be made to\nthe user – even if the payouts have already been scheduled."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This how-to article guides you in implementing an account deleting\nfeature in the FTW template \"Account settings\" section. When the\nsigned-in user navigates to the account deletion page, they need to\nenter their password to confirm that they do in fact want to delete\ntheir account. An endpoint in the FTW application's server then gets\ncalled, and that endpoint checks whether the user has incomplete\ntransactions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Depending on the result the endpoint then either returns the count of\nincomplete transactions, or deletes the user's account through the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"current_user/delete"}]},{"type":"text","value":" endpoint. If the user cannot be deleted, the page\nshows the count of unfinished transactions, and if the user is deleted,\nthey are immediately logged out."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This how-to guide is based on the FTW-daily template and\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex-default-process"}]},{"type":"text","value":". As you implement the guide, you will need to\nreview the transaction processes used on your marketplace to see which\ntransitions count as non-final transitions, i.e. ones where you do not\nwant to allow the user to delete their profile."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/89cbe/non-final-transitions.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 81.76100628930817%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB+klEQVQ4y42U607jMBBG+/5vuGK3UFha0saX2I4vsZ2zsmmhlSjsj5Gl2HPmm5lP2ZS6ci9yWalACBFrHaXSv5VyP2fzHawB/OyJMZJLodbSC+TKXeiXwNxOYAW0lkQ3k6TEjQP+eKQs+S508yWsQlQKdzohX1+wb2+oh1/opz84ISi59g4u8R/AFa80dhiwwxvjbot43rLMrqtu6lrrdYWynkfwU8stYVlKX4bWE+4yyyVSosdLwSwE0djeev5JYWtFKs1+f8DNoSvriSvUJaP/7jg+PjAfB+olr9zdcrNHxYfI7AMhpo8iOSaSnfGTZ9IG3+8+F7T5zodtPn1OF/8BSWum309E49DSIaVmyfXjzSew3Eb+IkpMeGMRoyTmjDWOabK9aL5ReDZxWa/irPAyglpWpv0e+bxjLZVRiT6Ka9g78AzLzawhkEPsc8ppZYlXYTPTMKCHAylERiEwxlKvLNOBnb5CkJJx+8j4uGN6eSX7wtKhlZLp2xS7bfekORzISyEtBR9SP28VrnSPqeMRPUqsMZ8LWd9NPNsZfTwxSYGzttsoLRkhFaOQ3Vrt/SbEBT0ZtFZYa5iMRooTSimEkN3YzR5qbHcOqSdOo0AI1WGzj7cKm9/SWX6rmFJ6j+gJ3uFngxYKKTTGuq4khERMC03M5a90Af4DI63iTEZVoqEAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/82e29/non-final-transitions.webp 159w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/ef33f/non-final-transitions.webp 318w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/f1837/non-final-transitions.webp 635w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/29549/non-final-transitions.webp 953w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/c5420/non-final-transitions.webp 1270w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/c7a40/non-final-transitions.webp 1384w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/8b9b5/non-final-transitions.png 159w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/fa108/non-final-transitions.png 318w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/53fb6/non-final-transitions.png 635w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/5a426/non-final-transitions.png 953w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/91155/non-final-transitions.png 1270w","/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/89cbe/non-final-transitions.png 1384w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/7bbdae402fe6db6c9180bbc69b28dbc9/53fb6/non-final-transitions.png","alt":"Non-final transitions in flex-default-process","title":"Non-final transitions in flex-default-process","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition to incomplete transactions, your marketplace transaction\nprocesses may have payout considerations. If your transaction process\nuses the default Stripe integration including payouts, it may take up to\n7 days from "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripe-confirm-payment-intent"}]},{"type":"text","value":" action until the payout is\nprocessed by Stripe, even if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripe-create-payout"}]},{"type":"text","value":" is called and the\npayout has been scheduled."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In other words, if your transaction processes create a provider payout\nclose to the payment intent being confirmed, you may want to prevent\nusers from deleting their profile before 7 days have passed from payment\nintent being confirmed. Alternatively, you can of course handle payouts\nmanually for deleted users, if the transactions have otherwise been\ncompleted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"add-ui-components","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-ui-components","ariaLabel":"add ui components permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add UI components"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-delete-account-tab-to-account-settings","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-delete-account-tab-to-account-settings","ariaLabel":"add delete account tab to account settings permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add \"Delete account\" tab to Account settings"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, add a new tab to the Account settings section of the template."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── components\n         └── LayoutWrapperAccountSettingsSideNav\n              └── LayoutWrapperAccountSettingsSideNav.js\n          "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":".."}]},{"type":"text","value":"."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The new page will appear as the final tab in Account Settings side\nnavigation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const tabs = [\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     text: <FormattedMessage id=\"LayoutWrapperAccountSettingsSideNav.contactDetailsTabTitle\" />,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" ...\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     linkProps: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"       name: 'PaymentMethodsPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   },\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     text: <FormattedMessage id=\"LayoutWrapperAccountSettingsSideNav.deleteAccountTabTitle\" />,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     selected: currentTab === 'DeleteAccountPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     id: 'DeleteAccountPageTab',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     linkProps: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       name: 'DeleteAccountPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   },\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" ];"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, add the actual DeleteAccountPage component. You can use the\nexample files directly, or modify them for your use case."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── containers\n         └── DeleteAccountPage\n              └── DeleteAccountPage.js\n              └── DeleteAccountPage.duck.js\n              └── DeleteAccountPage.module.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/25ed6e4821030db1ea46c7deb1fb9b36/DeleteAccountPage.js"},"children":[{"type":"text","value":"DeleteAccountPage.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/db3c8388f7dce4686cadfc5b4dd29be0/DeleteAccountPage.duck.js"},"children":[{"type":"text","value":"DeleteAccountPage.duck.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/bf040c46e02239f39fe01ee9e5659810/DeleteAccountPage.module.css"},"children":[{"type":"text","value":"DeleteAccountPage.module.css"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once the DeleteAccountPage component and corresponding Redux store\nDeleteAccountPage.duck.js exist in the project, import the Redux file\nreducer to a combined reducer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── containers\n         └── reducers.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more info on the Redux structure, you can read about\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/erikras/ducks-modular-redux","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"the Ducks modular Redux proposal"}]},{"type":"text","value":",\nwhich is the proposal of Redux usage followed in the FTW templates."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" import ContactDetailsPage from './ContactDetailsPage/ContactDetailsPage.duck';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import DeleteAccountPage from './DeleteAccountPage/DeleteAccountPage.duck';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" import EditListingPage from './EditListingPage/EditListingPage.duck';\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" ...\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" export {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   CheckoutPage,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   ContactDetailsPage,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   DeleteAccountPage,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   EditListingPage,"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since DeleteAccountPage has a new route, add the component to the\napplication's route configuration."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── routeConfiguration.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The \"Account settings\" side navigation tabs are defined in\nrouteConfiguration.js as well, so add DeleteAccountPage in the tab\narray."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const ContactDetailsPage = loadable(() => import(/* webpackChunkName: \"ContactDetailsPage\" */ './containers/ContactDetailsPage/ContactDetailsPage'));\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const DeleteAccountPage = loadable(() => import(/* webpackChunkName: \"DeleteAccountPage\" */ './containers/DeleteAccountPage/DeleteAccountPage'));\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const EditListingPage = loadable(() => import(/* webpackChunkName: \"EditListingPage\" */ './containers/EditListingPage/EditListingPage'));\n"}]},{"type":"text","value":"...\nexport const ACCOUNT_SETTINGS_PAGES = [\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" 'ContactDetailsPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" 'PasswordChangePage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" 'StripePayoutPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" 'PaymentMethodsPage',\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" 'DeleteAccountPage',\n"}]},{"type":"text","value":"];\n...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     component: PaymentMethodsPage,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     loadData: pageDataLoadingAPI.PaymentMethodsPage.loadData,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   },\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     path: '/account/delete-profile',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     name: 'DeleteAccountPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     auth: true,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     authPage: 'LoginPage',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     component: DeleteAccountPage,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   },\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     path: '/terms-of-service',"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, add the necessary microcopy rows into en.json"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── translations\n         └── en.json"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Feel free to modify the texts to suit your marketplace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" \"DateInput.screenReaderInputMessage\": \"Date input\",\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountPage.details\": \"This action is permanent and cannot be undone! After deleting your account, you will be logged out immediately and will not be able to access your listings or transactions anymore.\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountPage.heading\": \"Delete your account\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountPage.title\": \"Delete your account\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountPage.error\": \"Cannot delete user profile. You have {errorCause} Please contact Saunatime support or complete the unfinished issues and try again.\",\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" \"EditListingAvailabilityForm.fetchMonthDataFailed\": \"Oops, couldn't load data for {month}, please try again.\",\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" \"LayoutWrapperAccountSettingsSideNav.contactDetailsTabTitle\": \"Contact details\",\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"LayoutWrapperAccountSettingsSideNav.deleteAccountTabTitle\": \"Delete account\",\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" \"LayoutWrapperAccountSettingsSideNav.passwordTabTitle\": \"Password\","}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you now navigate to Account Settings, you can see the \"Delete\naccount\" tab on the left side navigation. If you click the tab, you can\nsee the info text."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/45bd1/delete-account-page.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 37.106918238993714%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAu0lEQVQoz62QyQqEMBBE8/960LN+nLhHFHHfLemCwCBhmMMEHh1CV3V1lOM4eOO67k94nkd830cYhgiCAAp/PmrfdxzHgXme0XUdpmnCdV2o6xpRFKGqKmitkec5mqah6L5v9thQYiYXEcVxTGMRrOuKYRgwjiPp+55V3kVjjN/Q8DxPtG2LoihYZYCkSZKEQ4SyLDk0yzJu8tXQrJimKZu3bSOSRliWhUONSPqlWv9QDE3KT97HlsaW8AGyigrK1bZDkAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/82e29/delete-account-page.webp 159w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/ef33f/delete-account-page.webp 318w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/f1837/delete-account-page.webp 635w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/29549/delete-account-page.webp 953w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/c5420/delete-account-page.webp 1270w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/80d3c/delete-account-page.webp 2665w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/8b9b5/delete-account-page.png 159w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/fa108/delete-account-page.png 318w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/53fb6/delete-account-page.png 635w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/5a426/delete-account-page.png 953w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/91155/delete-account-page.png 1270w","/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/45bd1/delete-account-page.png 2665w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/151f42ad7a77c6d9a5dcfc016ae20647/53fb6/delete-account-page.png","alt":"Initial Delete Account page","title":"Initial Delete Account page","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, we'll implement the form component for deleting the user account."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-deleteaccountform","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-deleteaccountform","ariaLabel":"add deleteaccountform permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add DeleteAccountForm"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, we want to add the form that actually handles the user deletion\nexperience."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── forms\n         └── DeleteAccountForm\n               └── DeleteAccountForm.js\n               └── DeleteAccountForm.module.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/3133e961a649dec2a8f3252285f83e6c/DeleteAccountForm.js"},"children":[{"type":"text","value":"DeleteAccountForm.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/7be6bf4c81fa51e33f396e7222adadf2/DeleteAccountForm.module.css"},"children":[{"type":"text","value":"DeleteAccountForm.module.css"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can either use the files directly, or use them as a template for\nmodification. You can, for instance, add a feedback field if you need\nthe user to submit some information before they can delete their\naccount."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When adding a new form, exporting it from "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/forms/index"}]},{"type":"text","value":" simplifies\nimporting in other components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── forms\n         └── index.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" export { default as ConfirmSignupForm } from './ConfirmSignupForm/ConfirmSignupForm';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" export { default as DeleteAccountForm } from './DeleteAccountForm/DeleteAccountForm';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" export { default as EditListingAvailabilityForm } from './EditListingAvailabilityForm/EditListingAvailabilityForm';"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that the DeleteAccountForm component exists, implement it into the\nDeleteAccountPage template you downloaded earlier."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── containers\n         └── DeleteAccountPage\n              └── DeleteAccountPage.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set DeleteAccountPage to only show the form for authenticated users."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" } from '../../components';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import { DeleteAccountForm } from '../../forms';\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" // Show form for a valid current user\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const showDeleteAccountForm = (currentUser && currentUser.id);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const deleteAccountForm = showDeleteAccountForm ? (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     <DeleteAccountForm\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       className={css.form}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       deleteAccountError={deleteAccountError}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       currentUser={currentUser}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       onSubmit={handleDeleteAccount}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       onChange={onChange}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       onResetPassword={onResetPassword}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       resetPasswordInProgress={resetPasswordInProgress}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       resetPasswordError={resetPasswordError}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       inProgress={deleteAccountInProgress}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"       ready={accountDeleted}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     />\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   ) :\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   null;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" return (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   <Page title={title} scrollingDisabled={scrollingDisabled}>\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"           {pageDetails}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           {deleteAccountForm}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"         </div>\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   </Page>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" );"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You still need to add some microcopy related to the form."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── translations\n         └── en.json"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The DeleteAccountForm template file has validations for password length\nand requirements, so those validation error messages require microcopy\nstrings. The file also has the capability to send a password reset link\nto the user if they have forgotten their password."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" \"DateInput.screenReaderInputMessage\": \"Date input\",\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.confirmChangesInfo\": \"To delete your account, please enter your current password.\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.confirmChangesTitle\": \"Confirm deleting your account\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.conflictingData\":  \"Unable to delete user profile. You have {errorCause}\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.genericFailure\": \"Whoops, something went wrong. Please refresh the page and try again.\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.passwordFailed\": \"Please double-check your current password\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.passwordLabel\": \"Current password\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.passwordPlaceholder\": \"Enter your current password…\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.passwordRequired\": \"Current password is required\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.passwordTooLong\": \"The password should be at most {maxLength} characters\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.passwordTooShort\": \"The password should be at least {minLength} characters\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.resetPasswordInfo\": \"Forgot your password or don't have one? {resetPasswordLink}\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.resetPasswordLinkSent\": \"The instructions for resetting your password have been sent to {email}.\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.resetPasswordLinkText\": \"Send reset instructions.\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.resendPasswordLinkText\": \"Resend instructions.\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" \"DeleteAccountForm.saveChanges\": \"Yes, delete my Saunatime account permanently\","}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can now see the input for the user's current password, as well as\nthe button for deleting the account. on the page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/7793a8334679176901fae2ef4282eab9/dccd4/delete-account-form-blank.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 47.79874213836478%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABBklEQVQoz42Sy46FIBBE/X6NceXCrzNuVfDBUwVr0j3hjndGJ5fkhIZIUV2S5XmOoihAc4LWn1CWJaqqYpqmQV3XyKy1IJxz8N7znGpi27a3+onjOJgsxojzPHlznmc+SGMcR/R9j2mauF7XFZ+MjFRJdFkWdF0HpRRfQELDMPwhXUjf3PEm2LYtu9r3nddCiJc7ikFrzZ1cBW8dhhBYJGVBa60Ui1IMRms4Z1/ukuBty3Q4iSTIsTEWWhtY52CsxboqjiPEeHH4kOFvSNA7De8Uzkgthh/O8JgfZ3h1dnV4HDv2jZ6K5/m7drz/719Ob+wKZcnPRQhIKSGEhJCS15TpXVepsy9TKPVqptFQsQAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7793a8334679176901fae2ef4282eab9/82e29/delete-account-form-blank.webp 159w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/ef33f/delete-account-form-blank.webp 318w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/f1837/delete-account-form-blank.webp 635w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/29549/delete-account-form-blank.webp 953w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/c5420/delete-account-form-blank.webp 1270w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/32993/delete-account-form-blank.webp 2673w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7793a8334679176901fae2ef4282eab9/8b9b5/delete-account-form-blank.png 159w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/fa108/delete-account-form-blank.png 318w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/53fb6/delete-account-form-blank.png 635w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/5a426/delete-account-form-blank.png 953w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/91155/delete-account-form-blank.png 1270w","/docs/legacy/static/7793a8334679176901fae2ef4282eab9/dccd4/delete-account-form-blank.png 2673w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/7793a8334679176901fae2ef4282eab9/53fb6/delete-account-form-blank.png","alt":"Inputs to delete user account","title":"Inputs to delete user account","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"Wrap DeleteAccountForm in a modal"},"children":[{"type":"text","value":"\nIf you want to add a second step of confirmation, you can wrap the\nDeleteAccountForm in a modal on DeleteAccountPage, and just show a\nbutton on DeleteAccountPage to open the modal.\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── containers\n         └── DeleteAccountPage\n              └── DeleteAccountPage.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" import React, { useEffect } from 'react';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import React, { useEffect, useState } from 'react';\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" import { isScrollingDisabled } from '../../ducks/UI.duck';\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import { isScrollingDisabled, manageDisableScrolling } from '../../ducks/UI.duck';\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   UserNav,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   Button,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   Modal\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" } from '../../components';\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   onLogout,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   onManageDisableScrolling,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   onSubmitDeleteAccount,...\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" } = props;\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const [modalIsOpen, toggleModalOpen] = useState(false);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const handleModalOpen = () => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   toggleModalOpen(true);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" }\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const handleModalClose = () => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   toggleModalOpen(false);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" }\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const handleDeleteAccount = (values) => {\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   handleModalClose()\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   return onSubmitDeleteAccount(values).then(() => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     onLogout();\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   })\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" }\n"}]},{"type":"text","value":"...\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const incompleteTransactions = deleteAccountError?.status === 409;\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"             {deleteAccountForm}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           <Button\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             onClick={handleModalOpen}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             disabled={incompleteTransactions}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           >\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             Delete my account\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           </Button>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           <Modal\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             id=\"DeleteAccountPage.deleteAccountModal\"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             isOpen={modalIsOpen}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             onManageDisableScrolling={onManageDisableScrolling}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             onClose={handleModalClose}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           >\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"             {deleteAccountForm}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"           </Modal>\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" onChange: func.isRequired,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" onManageDisableScrolling: func.isRequired,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" onSubmitDeleteAccount: func.isRequired,\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" onLogout: () => dispatch(logout()),\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" onManageDisableScrolling: () => dispatch(manageDisableScrolling()),\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" onSubmitDeleteAccount: values => dispatch(deleteAccount(values)),"}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you now enter the password for the account you used to log in, the\nbutton activates when the input length is long enough to be a valid\npassword."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/4bb67/delete-account-form-filled.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 50.314465408805034%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABOklEQVQoz42SS0vEMBSF+1/dCQ6CgiK4nQddOYuC/0oc3ZbZCGMfNpO2aZumPXKiqXVswQuHm5sbvpw8vNVqBaflcjmM1+s1xj0358R6s9nA932r7XaLIAjglWUJp6qqbFZKoa7rP2Kfmuo1TQOtNbyu69D3vS2Ox6NtMrIsQxRFEEIgTVOb/xNe27YgVEqJ/X5vodyAmcA4joecJIk9AYNrpjQA8zxHGIY4HA7gHB0RQBjdEsQ1vI4xcNKhMcZCeFxXE0CXVFEUw125mIJZoIMxuzEdV0qhkBKKD1YUyKWEFAKt1j/AOYenIjBRGm95g8wAHwbIum8Z527mDp2zU4e1yFBG7yj5EEn8pZiKZo9rHfK7/FLTwPQ9wscHPC3O8HJ3id3NBXa3Czxfn+P1/gptXYFIbjwWHX4CBtrr87SQ2WIAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/82e29/delete-account-form-filled.webp 159w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/ef33f/delete-account-form-filled.webp 318w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/f1837/delete-account-form-filled.webp 635w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/29549/delete-account-form-filled.webp 953w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/c5420/delete-account-form-filled.webp 1270w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/bdb4c/delete-account-form-filled.webp 2533w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/8b9b5/delete-account-form-filled.png 159w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/fa108/delete-account-form-filled.png 318w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/53fb6/delete-account-form-filled.png 635w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/5a426/delete-account-form-filled.png 953w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/91155/delete-account-form-filled.png 1270w","/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/4bb67/delete-account-form-filled.png 2533w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/0e82da3c2b8355b95353b9292c1ba3eb/53fb6/delete-account-form-filled.png","alt":"Active button to delete user account","title":"Active button to delete user account","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, if you click the button now, you will get an error from\nDeleteAccountPage.duck.js stating that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"deleteUserAccount"}]},{"type":"text","value":" is not\ndefined. We will add the endpoint to the Redux action next."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"add-logic-to-call-the-flex-api-endpoint","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-logic-to-call-the-flex-api-endpoint","ariaLabel":"add logic to call the flex api endpoint permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add logic to call the Flex API endpoint"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The next step is to add the logic that calls the server endpoint, which\nthen calls the Marketplace API endpoint if the user can be deleted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"update-sdk","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#update-sdk","ariaLabel":"update sdk permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Update SDK"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First of all, to get access to the new endpoint, you will need to update\nthe SDK package."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"  "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"yarn"}]},{"type":"text","value":" upgrade sharetribe-sdk"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After updating the SDK, you can start adding the endpoint and logic."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-endpoint-to-client-side","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-endpoint-to-client-side","ariaLabel":"add endpoint to client side permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add endpoint to client side"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you click the button to delete the user account,\nDeleteAccountPage.js dispatches a\n"},{"type":"element","tagName":"a","properties":{"href":"https://redux.js.org/usage/writing-logic-thunks","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"thunk"}]},{"type":"text","value":" called\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"deleteAccount"}]},{"type":"text","value":", which in turn calls endpoint "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"deleteUserAccount"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, create the endpoint in the client-side API file."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── util\n        └── api.js\n          "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":".."}]},{"type":"text","value":"."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  // Check if user can be deleted and then delete the user. Endpoint logic\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  // must be modified to accommodate the transaction processes used in\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  // the marketplace.\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  export const deleteUserAccount = body => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"    return post('/api/delete-account', body);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  }"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, import the endpoint in DeleteAccountPage.duck.js."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import { deleteUserAccount } from '../../util/api';"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, clicking the delete button should show a 404 error in the dev tools\nconsole, since the endpoint does not yet exist on the server side. You\nwill also see a generic error ("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"Whoops, something went wrong. Please\nrefresh the page and try again.\""}]},{"type":"text","value":") above the delete button."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, in the server endpoint, you need to check whether the user has\nany transactions that have not finished and would thus prevent deleting\ntheir account."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-endpoint-logic","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-endpoint-logic","ariaLabel":"add endpoint logic permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add endpoint logic"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, set up the endpoint logic. You can use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"delete-account.js"}]},{"type":"text","value":"\nfile below as your starting point. However, you will need to modify the\nlogic to correspond to your own transaction processes. For convenience,\nwe've commented out the code that calls the SDK, so you can test the\nactual flow of the user interface first, before accidentally deleting\nany of your test users."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Save the file in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"server/api"}]},{"type":"text","value":" folder."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── server\n    └── api\n        └── delete-account.js\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":".."}]},{"type":"text","value":"."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/02a483340d7bbafca6f88f30befe3a52/delete-account.js"},"children":[{"type":"text","value":"delete-account.js"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each transaction process has its own logic and flow. Determine the\npoints at which you want to prevent the user from deleting their own\nprofile."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// The list of non-final transitions depends on the transaction processes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// being used on the marketplace. This list contains the non-final transitions"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// of an unmodified flex-default-process i.e. the transitions where we do not want to allow the user"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// to delete their account."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" nonFinalTransitions "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/request-payment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/request-payment-after-enquiry'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/confirm-payment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/accept'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/complete'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/review-1-by-customer'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/review-1-by-provider'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"Check pending payouts"},"children":[{"type":"text","value":"\nIf your transaction process has other limitations related to deleting\nusers, e.g. payouts are often scheduled immediately after creating and\ncapturing a payment intent, you may want to create a logic that checks\nwhether the user has provider transactions where the payout transition\nhas been created less than seven days ago. You can use this example as a\nstarting point for such logic.\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" sdk.transactions.query({\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   only: \"sale\"\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" })\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(resp => {\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  // In flex-default-process, payouts are created on \"transition/complete\". We want to\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  // determine the transactions where this transition has been created less than 7 days ago.\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  const pendingPayouts = resp.data.data.filter(tx =>{+\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"      // For the transactions where the user is the provider, check the transitions\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"      // to determine whether \"transition/complete\" was created less than 7 days ago.\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"      return tx.attributes.transitions.some(tr => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"          const today = new Date();\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"          const sevenDaysFromCreated = new Date(tr.createdAt);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"          sevenDaysFromCreated.setDate(sevenDaysFromCreated.getDate() + 7);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"          return tr.transition == 'transition/complete' && today < sevenDaysFromCreated;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"      });\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"  })\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, add the endpoint to apiRouter in the server."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── server\n    └── apiRouter.js\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":".."}]},{"type":"text","value":"."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const transitionPrivileged = require('./api/transition-privileged');\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const deleteAccount = require('./api/delete-account');\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" router.post('/transition-privileged', transitionPrivileged);\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" router.post('/delete-account', deleteAccount);"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to hide the password field and delete button when the user\nhas unfinished transactions, you can check the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"status"}]},{"type":"text","value":" of\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"deleteAccountError"}]},{"type":"text","value":" on DeleteAccountPage.js and only show the fields\nwhen the user has not already received a 409 Conflict error."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"// Show form for a valid current user\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" const showDeleteAccountForm = (currentUser && currentUser.id);\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const showDeleteAccountForm = (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   currentUser\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   && currentUser.id\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   && deleteAccountError?.status !== 409\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" );"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"test-functionality","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#test-functionality","ariaLabel":"test functionality permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Test functionality"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can now test the functionality! When you enter your password and\nclick the delete button, depending on the user's transaction history you\nwill either see an error message on the page or be logged out."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/dc72d/delete-account-conflict.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 34.59119496855346%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAvklEQVQoz52QywqFMAxE++squnHVT9Sd1ie+62NkArm4ES4WDp20aTKpCcMQJAgCqNb4yfNOiaIISZIgjmOkaQprLYxzDqSua1RVJbppGvR9L3RdJ3vbtpLzhHk81/xhGGAA4LouCaZpYgjvPYqikEQWZKN5nvHPMvu+Y9s2cTaOI87zxLquKMvy55YFubPpsixi4A1zHIcUyLIMeZ6LJvqY0B3dsyHvdKrXgnRIR/wXarr+umRkFtUOqjn6F24URAbFTOk01QAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/82e29/delete-account-conflict.webp 159w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/ef33f/delete-account-conflict.webp 318w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/f1837/delete-account-conflict.webp 635w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/29549/delete-account-conflict.webp 953w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/c5420/delete-account-conflict.webp 1270w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/b082d/delete-account-conflict.webp 2438w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/8b9b5/delete-account-conflict.png 159w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/fa108/delete-account-conflict.png 318w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/53fb6/delete-account-conflict.png 635w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/5a426/delete-account-conflict.png 953w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/91155/delete-account-conflict.png 1270w","/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/dc72d/delete-account-conflict.png 2438w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/d1bcede9e6731cd5c271c30b300af490/53fb6/delete-account-conflict.png","alt":"Delete page when delete blocked","title":"Delete page when delete blocked","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Marketplace API endpoint also validates the user's password. If the\npassword they entered is not their valid current password, the endpoint\nreturns 403 Forbidden, and the page shows a validation error message\nunder the password input."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/d53f6/delete-account-form-check-password.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 50.943396226415096%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTElEQVQoz4WQSU/DMBCF85ORuEDFqXCp2ohLVH4YUAmpgVKWrmls14kdZ3lopnVUdRGWnsa2PJ/fm6DX6+GcBoMBq9/vt/X4Dd2FYciKogjD4RCBUgokKSWEEKztdovFYoH5fI7VatXWLMtYWut272WMgbUWQdM0oEWX1FgUBZ8JTBCqSZJwraoK/63AOYe6rpGmKeI4xnq95kY6L5fL1h3dz2YzTkOLjJxTUJYlA8khxaTo9AnF8iOgOMeNHnrikNx4KD2guvtAQ0kJJQXXNN1ApBvUdXURxkCCeagXAYXKsBEama1YOnfQWYHcltixmvMOD0GHQC00ZKKQK4tcGuS2QV4Cpty7uzRDcncoDyx+v2EmY5jPd5hJDPM1gZl+wPxML8Y9degc3H4E46dHPHeuMLrv4LV7g1H3Fi9313gLH1A7x7H93P3syeEfC7TrezmFSvUAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/82e29/delete-account-form-check-password.webp 159w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/ef33f/delete-account-form-check-password.webp 318w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/f1837/delete-account-form-check-password.webp 635w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/29549/delete-account-form-check-password.webp 953w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/c5420/delete-account-form-check-password.webp 1270w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/e5bcf/delete-account-form-check-password.webp 2527w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/8b9b5/delete-account-form-check-password.png 159w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/fa108/delete-account-form-check-password.png 318w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/53fb6/delete-account-form-check-password.png 635w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/5a426/delete-account-form-check-password.png 953w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/91155/delete-account-form-check-password.png 1270w","/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/d53f6/delete-account-form-check-password.png 2527w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/197a6999214e8d6d061520256b4aca3c/53fb6/delete-account-form-check-password.png","alt":"Delete page with non-valid password","title":"Delete page with non-valid password","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you are happy with the user flow without the deletion SDK call, you\ncan uncomment the code in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"delete-account.js"}]},{"type":"text","value":" that calls the SDK\nendpoint. After that, you can confirm the deletion of the user in your\nFlex Console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once a user has been deleted, their listings are also removed. However,\ntheir transactions and messages will still show up in the inbox of the\ntransaction's other party."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/0e0fa/deleted-user-transaction.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 47.16981132075471%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABDklEQVQoz42STWuEMBCG/f+/pofSQ+899NLDguDBQl3Y7KJJ1WKiiYnvMrNqo92FCg+J85WZvEnGccTCNE3YfyEE9nnvGfqPIVtcI1k25GjbFkopVFW1YoxZk5qmYRvFEFJK9H2/+mndFMyyDGmaoixLTqRVdx38HEM2cTohz3MURQEhBLquW6dYO1xOoGStNXdFJxPGB4wAx1RSQpzP+HxQ8NZh1K7d3QchXp8hXp7gAfwcv6De39BqzePXdY1hGP6OzAZn4WT5W2wWoU4PUIcP+BDghgH15QJtzF3RtiM7B/utYK3ddEi6E7RnZecie5WXV7ARpbeO75DGWOiNgY3GukfsS2KHc455lPgfrhFUu4+7Fk0RAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/82e29/deleted-user-transaction.webp 159w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/ef33f/deleted-user-transaction.webp 318w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/f1837/deleted-user-transaction.webp 635w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/29549/deleted-user-transaction.webp 953w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/c5420/deleted-user-transaction.webp 1270w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/9fb36/deleted-user-transaction.webp 2419w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/8b9b5/deleted-user-transaction.png 159w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/fa108/deleted-user-transaction.png 318w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/53fb6/deleted-user-transaction.png 635w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/5a426/deleted-user-transaction.png 953w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/91155/deleted-user-transaction.png 1270w","/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/0e0fa/deleted-user-transaction.png 2419w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/a346128be2db5beb7b3b421ae0831789/53fb6/deleted-user-transaction.png","alt":"Deleted user transaction","title":"Deleted user transaction","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And that's it! Depending on your marketplace needs, you can build\nfurther steps into the process before you allow the user to delete their\nown account."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Add UI components","depth":2},{"value":"Add \"Delete account\" tab to Account settings","depth":3},{"value":"Add DeleteAccountForm","depth":3},{"value":"Add logic to call the Flex API endpoint","depth":2},{"value":"Update SDK","depth":3},{"value":"Add endpoint to client side","depth":3},{"value":"Add endpoint logic","depth":3},{"value":"Test functionality","depth":2}]}},"pageContext":{"slug":"implement-delete-user","category":"how-to-users-and-authentication"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}