{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/tutorial/customize-pricing-tutorial/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Customize pricing","slug":"customize-pricing-tutorial","updated":"2022-01-01T00:00:00.000Z","category":"tutorial-transaction-process","ingress":"Learn how to customize pricing in your marketplace by adding an optional cleaning fee on top of the regular nightly price of the accommodation.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"store-cleaning-fee-into-listing","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#store-cleaning-fee-into-listing","ariaLabel":"store cleaning fee into listing 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":"Store cleaning fee into listing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pricing can be based on a lot of variables but one practical way to\nbuild it is to base it on information stored as extended data in\nlistings. In this example, we are using listing's public data to store\ninformation about the cleaning fee. We start by doing some changes to\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"EditListingPricingPanel"}]},{"type":"text","value":" in "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"EditListingWizard"}]},{"type":"text","value":"."}]},{"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        └── EditListingPricingPanel\n            └── EditListingPricingPanel.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"FTW-product has moved EditListingWizard components under EditListingPage"},"children":[{"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        └── EditListingPage\n            └── EditListingWizard\n                └── EditListingPricingPanel\n                    └── EditListingPricingPanel.js"}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here we will only list the required changes. See the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial/add-extended-data/"},"children":[{"type":"text","value":"Add extended data to listing entity tutorial"}]},{"type":"text","value":"\nfor step-by-step instructions on how to add public data field for\nlisting."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"save-to-public-data","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#save-to-public-data","ariaLabel":"save to public data 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":"Save to public data"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"EditListingPricingPanel"}]},{"type":"text","value":", we need to edit the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"onSubmit"}]},{"type":"text","value":" function to\nsave the new public data field called "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":". Because we are\nusing "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FieldCurrencyInput"}]},{"type":"text","value":" component in this example as the input of\nchoice, the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":" variable will be Money object when we get that\nfrom the submitted "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"values"}]},{"type":"text","value":". Money object can't be used directly as\npublic data so we need to create a JSON object with keys "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"amount"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"currency"}]},{"type":"text","value":" and use it in the underlying API call."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"price"}]},{"type":"text","value":" attribute is one of the listing's default attributes\nso it's passed to Marketplace API directly unlike the new public data\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":" which needs to be under the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"publicData"}]},{"type":"text","value":" key."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"text","value":"onSubmit"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"values"}]},{"type":"text","value":" "},{"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","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" price"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" values"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" updatedValues "},{"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    price"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"publicData"}]},{"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","literal-property","property"]},"children":[{"type":"text","value":"cleaningFee"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"amount"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"amount"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"currency"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"currency "},{"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":"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":"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":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"onSubmit"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"updatedValues"},{"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":"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":"h3","properties":{"id":"initialize-the-form","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#initialize-the-form","ariaLabel":"initialize the form 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":"Initialize the form"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next we want to pass inital values for "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"price"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":". For\nthis we need to get the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":" from listing attributes under the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"publicData"}]},{"type":"text","value":" key. Also, because "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FieldCurrencyInput"}]},{"type":"text","value":" expects the value\nto be Money object we need to convert the value we get from Marketplace\nAPI back to instance of Money."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" price"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" publicData "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" currentListing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"\n  publicData "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" publicData"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" publicData"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" cleaningFeeAsMoney "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" cleaningFee\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Money"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"amount"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"currency"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" initialValues "},{"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":" price"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" cleaningFeeAsMoney "},{"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":"p","properties":{},"children":[{"type":"text","value":"Now pass the whole "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initialValues"}]},{"type":"text","value":" map in the corresponding prop to\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"EditListingPricingForm"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-input-component","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-input-component","ariaLabel":"add input component 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 input component"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We want to be able to save the amount of listing's cleaning fee so we\nadd new "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FieldCurrencyInput"}]},{"type":"text","value":" to the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"EditListingPricingForm"}]},{"type":"text","value":". The id and\nname of this field will be "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":". Adding this fee will be\noptional so we don't want to add any "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"validate"}]},{"type":"text","value":" param to the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FieldCurrencyInput"}]},{"type":"text","value":" like there is in the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"price"}]},{"type":"text","value":" input."}]},{"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        └── EditListingPricingForm\n            └── EditListingPricingForm.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"FTW-product has moved EditListingWizard components under EditListingPage"},"children":[{"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        └── EditListingPage\n            └── EditListingWizard\n                └── EditListingPricingPanel\n                    └── EditListingPricingForm.js"}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"FieldCurrencyInput"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"price"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"price"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"className"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"css"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"priceInput"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"autoFocus"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"pricePerUnitMessage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"pricePlaceholderMessage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"currencyConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"currencyConfig"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"validate"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"priceValidators"},{"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":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"FieldCurrencyInput"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"className"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"css"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFeeInput"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"autoFocus"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"cleaningFeeMessage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"cleaningFeePlaceholderMessage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"currencyConfig"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"currencyConfig"},{"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":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After adding the new microcopy keys and some padding to price input in\nCSS file, the EditListingPricingPanel should look something like this:"}]},{"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":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 62.26415094339623%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABS0lEQVQoz42SPU7DQBCFfUdKTkABFVAjRJWejhtQ0CBEESkSBRJXcKIIWylsxzZgHHt//dBM2CSOjclIT6P90bdvdsbTWmNfTdPgkHD3KDt5xhjsiw6qqoKUklXXNa+FECxak3ahLjy6GMcxSym1AQZBgCAMOM/nc8xmM/i+j8Vigel0iizLOu7YIb0URRHyPGcYlWythVaa3SgpB2rubrHDJEmQpikDCEYvRcsYy48MK1FBaAVldY9MK5vGwiMIOSyKgmGu7K+ywGdZoBTVH7CuGFiWJcIwBGVy5j49yZdIixzfcoWVrlEbCWHVoHRj1iWTQ9JuU/rCNra3Ea2m0FiQO4Jpo9ejYw3uXkcYjS9x+3KNm+czvL1PGEZnQ7GZQzfUDjgaX+D84RhXTyc4vT/CxH88DNgC/YL/K/kgh7suCUhOttKt/xsC/gCPO6NCzK1VrwAAAABJRU5ErkJggg=='); 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/96f495dced384f5f4505738fc78d0919/82e29/editlistingpricepanel.webp 159w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/ef33f/editlistingpricepanel.webp 318w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/f1837/editlistingpricepanel.webp 635w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/29549/editlistingpricepanel.webp 953w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/f53a8/editlistingpricepanel.webp 1125w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/96f495dced384f5f4505738fc78d0919/8b9b5/editlistingpricepanel.png 159w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/fa108/editlistingpricepanel.png 318w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/53fb6/editlistingpricepanel.png 635w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/5a426/editlistingpricepanel.png 953w","/docs/legacy/static/96f495dced384f5f4505738fc78d0919/26963/editlistingpricepanel.png 1125w"],"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/96f495dced384f5f4505738fc78d0919/53fb6/editlistingpricepanel.png","alt":"EditListingPricePanel","title":"EditListingPricePanel","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":"element","tagName":"h2","properties":{"id":"update-bookingdatesform","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#update-bookingdatesform","ariaLabel":"update bookingdatesform 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 BookingDatesForm"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In our example the cleaning fee is optional and users can select that as\nan add-on to their booking. In this section, we will add the UI\ncomponent for selecting the cleaning fee and pass the information about\nthe user's choice to the the backend of our client app."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":": In case you would like to add the cleaning fee automatically\nto every booking, you don't need to add the UI component for selecting\nthe cleaning fee and you can move forward to the next section: Add a\ntransaction line item for the cleaning fee."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note 2"}]},{"type":"text","value":": This tutorial handles changes on top of "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FTW-daily"}]},{"type":"text","value":".\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FTW-hourly"}]},{"type":"text","value":" is pretty close to it, but "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FTW-product"}]}]},{"type":"text","value":" has major\ndifferences since that template is not about bookings but product\norders. With FTW-product, you should make changes to"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"OrderPanel"}]},{"type":"text","value":" (instead of BookingPanel)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ProductOrderForm"}]},{"type":"text","value":" (instead of BookingDatesForm), which is moved\nunder OrderPanel"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"OrderBreakdown"}]},{"type":"text","value":" (instead of BookingBreakdown)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"EstimatedCustomerBreakdownMaybe"}]},{"type":"text","value":" (instead of\nEstimatedBreakdownMaybe)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"bookingData is refactored as "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"orderData"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"prepare-props","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#prepare-props","ariaLabel":"prepare props 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":"Prepare props"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to be able to use the information about cleaning fee inside the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingDatesForm"}]},{"type":"text","value":" we need to pass some new information from\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingPanel"}]},{"type":"text","value":" to the form. BookingPanel is component that is used on\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ListingPage"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"TransactionPage"}]},{"type":"text","value":" to show the booking breakdown."}]},{"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        └── BookingPanel\n            └── BookingPanel.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This part of the tutorial is also otherwise changed.\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"BookingDatesForm"}]},{"type":"text","value":" is not in use, but instead there's\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ProductOrderForm"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingPanel"}]},{"type":"text","value":" gets "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"listing"}]},{"type":"text","value":" as a prop. The cleaning fee is now saved\nto listing's public data so we can find it under the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"publicData"}]},{"type":"text","value":" key\nfrom listing's attributes. Because we decided that adding a cleaning fee\nto listing's information is optional, we need to check if the\ncleaningFee exists in public data or not."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"\n  listing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"publicData "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":"\n  listing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"publicData"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" listing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"publicData"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once we have saved the information about the cleaning fee to variable\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":" we need to pass that forward to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingDatesForm"}]},{"type":"text","value":". This\nform is used for collecting the booking data (e.g. booking dates) and\nvalues from this form will be used when creating the transaction\nlineItems. We will pass the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":" to this form as a new prop."}]},{"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":" <BookingDatesForm\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   className={css.bookingForm}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   formId=\"BookingPanel\"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   unitType={unitType}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   onSubmit={onSubmit}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   price={price}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   listingId={listing.id}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   isOwnListing={isOwnListing}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   timeSlots={timeSlots}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   fetchTimeSlotsError={fetchTimeSlotsError}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   onFetchTransactionLineItems={onFetchTransactionLineItems}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   lineItems={lineItems}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   fetchLineItemsInProgress={fetchLineItemsInProgress}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   fetchLineItemsError={fetchLineItemsError}\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":"  cleaningFee={cleaningFee}\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":"h3","properties":{"id":"add-cleaning-fee-checkbox","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-cleaning-fee-checkbox","ariaLabel":"add cleaning fee checkbox 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 cleaning fee checkbox"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, we need to add a new field to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingDatesForm"}]},{"type":"text","value":" for selecting the\npossible cleaning fee. For this, we will use the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"FieldCheckbox"}]},{"type":"text","value":"\ncomponent because want the cleaning fee to be optional."}]},{"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        └── BookingDatesForm\n            └── BookingDatesForm.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingDatesForm"}]},{"type":"text","value":" we need to import a couple of new resources we\nwill need for adding the cleaning fee. These will be some helper\nfunctions needed to handle the cleaningFee price information and the\ncheckbox component "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"FieldCheckbox"}]},{"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":" import { propTypes } from '../../util/types';\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 { formatMoney } from '../../util/currency';\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import { types as sdkTypes } from '../../util/sdkLoader';\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 config from '../../config';\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" import {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   Form,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   IconSpinner,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   PrimaryButton,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   FieldDateRangeInput,\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":"   FieldCheckbox,\n"}]},{"type":"text","value":"} from '../../components';\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 EstimatedBreakdownMaybe from './EstimatedBreakdownMaybe';\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":"import css from './BookingDatesForm.module.css';\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 { Money } = sdkTypes;"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When we have imported these files, we will add the component for showing\nthe checkbox for selecting the cleaning fee. For this, we need to\nextract the cleaningFee from "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"fieldRenderProps"}]},{"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":"   ...\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   lineItems,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   fetchLineItemsInProgress,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   fetchLineItemsError,\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":"   cleaningFee,\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":" } = fieldRenderProps;"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We want to show the amount of cleaning fee to the user in the checkbox\nlabel so we need to format the cleaningFee to printable form. For this\nwe want to use "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"formatMoney"}]},{"type":"text","value":" function which will use localized\nformatting. This function expects Money object as parameter so we need\nto do the conversion."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" formattedCleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" cleaningFee\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"formatMoney"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n      intl"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Money"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"amount"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"currency"},{"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":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" cleaningFeeLabel "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" intl"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"formatMessage"}]},{"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":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'BookingDatesForm.cleaningFeeLabel'"}]},{"type":"text","value":" "},{"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":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"fee"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" formattedCleaningFee "},{"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":"p","properties":{},"children":[{"type":"text","value":"We will also add new microcopy key "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"BookingDatesForm.cleaningFeeLabel"}]},{"type":"text","value":"\nto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"en.json"}]}]},{"type":"text","value":" file where we can use "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"fee"}]}]},{"type":"text","value":" variable to show the\nprice."}]},{"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":"text","value":"  "},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"\"BookingDatesForm.cleaningFeeLabel\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Cleaning fee: {fee}\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Because there might be listing's without cleaning fee, we want to show\nthe checkbox only when needed. This is why we will create the\n"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"cleaningFeeMaybe"}]},{"type":"text","value":" component which is rendered only if the listing has\nthe cleaning fee saved to the public data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" cleaningFeeMaybe "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" cleaningFee "},{"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","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"FieldCheckbox"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"label"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"cleaningFeeLabel"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"value"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"cleaningFee"},{"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":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then we can add the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"cleaningFeeMaybe"}]},{"type":"text","value":" to the returned "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"<Form>"}]},{"type":"text","value":"\ncomponent"}]},{"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":"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":"   timeSlots={timeSlots}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   useMobileMargins\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   validate={composeValidators(\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     required(requiredMessage),\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     bookingDatesRequired(startDateErrorMessage, endDateErrorMessage)\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":"   disabled={fetchLineItemsInProgress}\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","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" {cleaningFeeMaybe}\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":" {bookingInfoMaybe}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" {loadingSpinnerMaybe}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" {bookingInfoErrorMaybe}\n"}]},{"type":"text","value":"..."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After this step, the BookingDatesForm should look like this. You should\nnotice that the cleaning fee will not be visible in the booking\nbreakdown yet even though we added the new checkbox."}]},{"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: 450px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 155.34591194968556%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAfCAYAAADnTu3OAAAACXBIWXMAAAsTAAALEwEAmpwYAAADyUlEQVRIx51V24ojVRTNV/igD+qDOKCIL4IPKqgP4l+IF2ac6XEQEUTFQfwBQRFnnHfBV/ULZnCa7qS7c+tOd8g93bnfqlL3U7Vk7eSkU7n0iIHFPjln16q1L2dXIggCKKVA+1+gfWk3IaEdoijCpp/epyWuIhNCOoRhiNFohH6/j8FgIHY4HKLX68EwDHQ6HTnn+okKechfrVZDJpPByckJTk9PxebzednP5XJIJpMoFAri+0RCKjRNUxRNJhNRQ6W04/FY1jxfJdtEnNCbjuPIQ9PpVCzDIzn/c23bdoxkm8rE8iGVLoNF0OvVTrhSIR/sdruoN+oolctonjcRIYLv++JEddVaFZVqBc1mE8EV5LMcRiFGgyEuGucY9Qfod3qYTkwghIDpGHT76LW7As9yAHaTihCqMKZ0pjCM0B73kK4XcHxRwnGrhNNOFRfOEF13DMu1Ueo3kGsWcdIqozZpo+0OcW73Yfo2wphCFUAFCl4YYBq6MJUDM3RgKhtjfwrDt6BChalyYCgbRjDbH7kmRp4Jx3fXQ1YqxNQx4dgWfMeD57jw3UvLHLq2A+UHiFQ4RzQPOV6chB/4ko98K4V8JY187hi5fA4HBwfI5rKoVCrIZrNIpVLSl/r6XVkUqaRlwzRM6T32IRua/UfLXnRdd+sQ2UhoWVaMRJPqPVZ623Vbq/LizSreqMtNvqqOPUpsVciQmHwq0Wo2heZ53uIq0o//1wiZaA6GcrmMarUqljeHyrblq16vix9To/3WCDm2Wq2WzD9OmE33VU8nvpDjjH7Lg/eyyrYt1Vyd1puqqhVR3caQNSH7jJOajlwTOvHLITN39OP56lhbDFg96hk6lbbbbcGmHLKA9GPY9F3LITfYb8wfHflNWf4oLbcKLV9cKpXkFvG5NUIdMsPQjbytF3U0VEfwQsQJF02tEIQKjucKLMfC1J6B6xlsge068AIfKgplEsVuik6oHqbwIsCnna89XMKfww1nZ/MhGyP05tPmr94+Piz8jM+KD7BT/A03i/dx/exXwc2ze/j07J6sbxXv43bxgeCTwi94NDoWIZxaQugGnvTcj40/8dQ/H+DFvR08t3sDrx98hfczP+Dd9F28ffQd3knfxXuZ7/FK8nM8v3sDL+zdwtOPP8Lv7YciyFsl/KnxN555/DFe3r+Da3s7eDX5Bd46+hZvHn6D11JfygveOPxaCK/t3cZL+3fw7O51/NF+FCeUq6dCtJ0h0kYFOaMmyBgVHE5KAu4fTco4nJSRMaoxn747kecXVY4VJfofWCnKv2e/MJN6Yw6SAAAAAElFTkSuQmCC'); 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/2740e772e28684159f6788e6c6125e8a/82e29/cleaningFeeCheckbox.webp 159w","/docs/legacy/static/2740e772e28684159f6788e6c6125e8a/ef33f/cleaningFeeCheckbox.webp 318w","/docs/legacy/static/2740e772e28684159f6788e6c6125e8a/31004/cleaningFeeCheckbox.webp 450w"],"sizes":"(max-width: 450px) 100vw, 450px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/2740e772e28684159f6788e6c6125e8a/8b9b5/cleaningFeeCheckbox.png 159w","/docs/legacy/static/2740e772e28684159f6788e6c6125e8a/fa108/cleaningFeeCheckbox.png 318w","/docs/legacy/static/2740e772e28684159f6788e6c6125e8a/f509b/cleaningFeeCheckbox.png 450w"],"sizes":"(max-width: 450px) 100vw, 450px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/2740e772e28684159f6788e6c6125e8a/f509b/cleaningFeeCheckbox.png","alt":"Cleaning fee checkbox","title":"Cleaning fee checkbox","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":"element","tagName":"h3","properties":{"id":"update-the-bookingdata","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#update-the-bookingdata","ariaLabel":"update the bookingdata 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 the bookingData"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, we want to pass the value of the cleaning fee checkbox forward as\npart of the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bookingData"}]},{"type":"text","value":". This is needed so that we can show the\nselected cleaning fee as a new row on the booking breakdown. To achieve\nthis, we need to edit the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"handleOnChange"}]},{"type":"text","value":" function which takes the\nvalues from the form and calls the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"onFetchTransactionLineItems"}]},{"type":"text","value":"\nfunction for constructing the transaction line items. These line items\nare shown inside the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"bookingInfoMaybe"}]},{"type":"text","value":" component under the form fields."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"What are line items?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Flex, the total price of a transaction is defined by its line items.\nLine items describe what is included in a transaction. It can be a\nvarying set of things from the number of booked units to customer and\nprovider commissions, add-ons, discounts, or payment refunds."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Every line item has a unit price and one of the following attributes:\nquantity or percentage. The quantity attribute can be used to denote the\nnumber of booked units, like the number of booked nights. Quantity can\nalso be defined as a multiplication of units and seats. The percentage\nparam is used when modeling commissions for example. Based on these\nattributes a line total is calculated for each line item. Line totals\nthen define the total payin and payout sums of the transaction."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can read more about line items and pricing from\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/concepts/pricing/"},"children":[{"type":"text","value":"pricing background article"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bookingData"}]},{"type":"text","value":" object, we will have all the information about\nthe user's choices. In this case, it means booking dates and if they\nselected the cleaning fee or not. We only need the information if the\ncleaning fee was selected. We will fetch the cleaning fee details from\nMarketplace API later in the the backend of our client app to make sure\nthis information can't be manipulated."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In our case, because there is just one checkbox, it's enough to check\nthe length of that array to determine if any items are selected. If the\nlength of the cleaningFee array inside values is bigger than 0, the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"hasCleaningFee"}]},{"type":"text","value":" param is true and otherwise false. If we hade more than\none item in the checkbox group then we should check which items were\nselected."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"text","value":"  "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"handleOnChange"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"formValues"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" startDate"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" endDate "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"\n      formValues"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"values "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" formValues"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"values"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"bookingDates "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" formValues"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"values"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"bookingDates "},{"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":"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":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" hasCleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"\n      formValues"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"values"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" formValues"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"values"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" listingId "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"props"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"listingId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" isOwnListing "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"props"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"isOwnListing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"startDate "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" endDate "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"props"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"fetchLineItemsInProgress"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"props"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"onFetchTransactionLineItems"}]},{"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":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"bookingData"}]},{"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":" startDate"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" endDate"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" hasCleaningFee "},{"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        listingId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        isOwnListing"},{"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":"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":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"add-a-new-line-item-for-the-cleaning-fee","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-a-new-line-item-for-the-cleaning-fee","ariaLabel":"add a new line item for the cleaning fee 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 a new line-item for the cleaning fee"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We are almost there! Next, we need to edit the the backend of our client\napp and add a new line item for cleaning fee so that it will be included\nin pricing. Flex uses privileged transitions to ensure that the pricing\nlogic is handled in a secure environment. This means that constructing\nline items and transitioning requests of privileged transitions are made\nfrom the server-side."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"What are privileged transitions and why we use them?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Privileged transitions are transaction process transitions that can be\ninvoked only from a secure context. For example, when using Flex\nTemplates for Web this secure context is the backend of our client app.\nYou can also build your own server-side validation that sits between\nyour marketplace UI and the Flex Marketplace API to invoke privileged\ntransitions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We are using privileged transitions and the backend of our client app\nfor constructing line items because we want to make sure this is done in\na secure context. If the client-side code (FTW-frontend) could freely\nconstruct the line items, we couldn't fully trust that the price\ncalculation follows the model intended in the marketplace. In theory, a\nmarketplace user could make a direct API call to the Flex Marketplace\nAPI and start a transaction with modified line items (e.g. change the\namount of cleaning fee). When we use the privileged transitions and\nfetch the pricing information like the cleaning fee amount directly from\nMarketplace API in the backend of our client app, we can avoid this\nsecurity risk."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can read more about privileged transitions from\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/concepts/privileged-transitions/"},"children":[{"type":"text","value":"privileged transitions background article"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When we want to add a new line item for cleaning fee, we'll need to\nupdate the pricing logic in the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"lineItems.js"}]},{"type":"text","value":" 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":"└── server\n    └── api-util\n        ├── lineItems.js\n        └── lineItemHelpers.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"resolve-the-cleaning-fee","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#resolve-the-cleaning-fee","ariaLabel":"resolve the cleaning fee 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":"Resolve the cleaning fee"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, we will add a new helper function for resolving the cleaning fee\nline item. This function will take the listing as a parameter and then\nget the cleaning fee from its public data. We don't want to pass this\ndata from FTW-frontend directly so it' can be not manipulated. Instead,\nwe check it from the listing that was fetched from Marketplace API."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you have many helper functions you might want to add this function to\nthe "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lineItemHelpers.js"}]},{"type":"text","value":" file instead."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"resolveCleaningFeePrice"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"listing"}]},{"type":"text","value":" "},{"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","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" publicData "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" listing"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"attributes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"publicData"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" cleaningFee "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" publicData "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" publicData"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" amount"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" currency "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" cleaningFee"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"amount "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" currency"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Money"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"amount"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" currency"},{"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":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"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":"h3","properties":{"id":"add-line-item","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-line-item","ariaLabel":"add line item 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 line-item"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now the transactionLineItems function can be updated to also provide the\ncleaning fee line item in case the listing has a cleaning fee\nconfigured."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this example, we decided that the provider commission is calculated\nfrom the total of booking and cleaning fees. That's why we need to add\nthe "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"cleaningFee"}]},{"type":"text","value":" item also to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"calculateTotalFromLineItems(...)"}]},{"type":"text","value":"\nfunction on providerCommission line item. If we don't add the cleaning\nfee there the provider commission is calculated only based on the\nbooking fee."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Remember also to add cleaning fee to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"lineItems"}]},{"type":"text","value":" array which is returned\nin the end of the function."}]},{"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":"text","value":"exports.transactionLineItems = (listing, bookingData) => {\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 unitPrice = listing.attributes.price;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const { startDate, endDate, hasCleaningFee } = bookingData;\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 booking = {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   code: 'line-item/night',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   unitPrice,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   quantity: calculateQuantityFromDates(startDate, endDate, unitType),\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   includeFor: ['customer', 'provider'],\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","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const cleaningFeePrice = hasCleaningFee ? resolveCleaningFeePrice(listing) : null;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const cleaningFee = cleaningFeePrice\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":"         code: 'line-item/cleaning-fee',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"         unitPrice: cleaningFeePrice,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"         quantity: 1,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"         includeFor: ['customer', 'provider'],\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":"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 providerCommission = {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   code: 'line-item/provider-commission',\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":"   unitPrice: calculateTotalFromLineItems([booking, ...cleaningFee]),\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":"   percentage: PROVIDER_COMMISSION_PERCENTAGE,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   includeFor: ['provider'],\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","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const lineItems = [booking, ...cleaningFee, providerCommission];\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":" return lineItems;\n"}]},{"type":"text","value":"};"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once we have done the changes to the backend of our client app we can\ncheck the booking breakdown again. Now if you choose the cleaning fee,\nyou should see the cleaning fee also in the booking breakdown:"}]},{"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: 439px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 164.1509433962264%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD7UlEQVRIx51WS4sjVRTO33Ans1IXbgZBBBVBcDPM0oWj4mMhLkYQH8PgCCKIG2EcnIW4EcUfoVs3ozOTTtI9TR6dyrvyTiqVV1XdenzyneSW1ZXEVhs+7qO+8+Wcc889tzNBEMD3ffzbP3JpcwgZEsIwRK1Ww9nZGRqNBqrVqoxc93o9lMtl1Ot1mKYJ7cAh4ViQZBq22200m00RbbVa6HQ6In5ycoJKpSLcCwU5mc1mGI/HmE6nAs4J7g8GAywWizhkbbNPNBb0PA+u6wo4dxwH6/Va1pxzLylwoYc00FBKyR7D08Tk96SHaeE4h+1OG81WCzUmv2siiiIoX8HfijWaDVQNA/VGHd72B1UqfCIWnIzG6LZNTEcTDLp9zC0biACEkQj2zC6s8RQDs4fJcASEAIIIURCe83IjGIQwpwM8aldQ7tVRGTTRnPXQdyyM3Blc5eGs30C5X0el34Ax7mDgWOg5U8y8RcrDwEfgB1iHCna4xixYCSy1xMSbw6JBGGAROrD85QZqibFrY+TamHur3ZC5sXIWUK4L5XpQjofAU/AJV2G9WsNdOwiUL2EiCLfjgZCjIMKD9u+otio4yuZQOC5IIRcKBRiGgdPTUzzMZjEcDhFhe1hbj/YeCjeWyyXm8zls25Yi5qjBNWsxaXihIMUsy5KbwZvCkWsNFvlFghKyXrB0WHscNbjWSBrtE9rxUF81jofCk2JWSngavJp7C5uNoNvtYjQaSedh7g6JsqWxYfT7fUlVsgPFgmxVPFn2PbYpkjUx2RC4x5ZGHvlsbUzJTsj6QJJ/SaFkrvQ32qQjySRzk84j88P9dNg6j+TozrQjOJlMpFszP8wL50xD2kD/OMNmZ6fd3hzSfYrxUHg4q9UqLpckNJ/FTlHa/eNNIZhLhqPDS4dLPtNBbrrgYw/pGU+OobIkDt0Kek2visUiSqWSeLkTsm7xUqzb90NC5BMQBn9j+yzQSx3Rjofp6+O4TnwLmEcB5+vVuRvClOgreq59xYnmhh9A8ZFyPemFyt1gM9/s6bnnuMIPUy9ghr2N78P3nV/x6uk3eLt0F2+VvsMbxTt4rXgb14rf4vUtrhVv483iHfn+Tumu8H8wfxN7/WBlPApGwEfVH/HYvXfxxP3ruPTn+3g+9xmuPvoarxx/iZcLXwiunHyFZ7Kfyvcn718X/ifVn8ReN91Y8IbxMx7/4z08/fBDPPXgA1zOfoyX8p/jxfwtPHt0A8/lbuKF/C3Z53fyyL9p/HJecPMEhGiuhsjZNRzPGzie15G3a8jaVRzZBnJbcJ4XTl145NMuDMLdU5Z3NvofCLH7SOn/Ahj+f4VKdey/AHW2xfzXn9BLAAAAAElFTkSuQmCC'); 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/11a4436c03075b866546df71298be78b/82e29/cleaningFeeBookingBreakdown.webp 159w","/docs/legacy/static/11a4436c03075b866546df71298be78b/ef33f/cleaningFeeBookingBreakdown.webp 318w","/docs/legacy/static/11a4436c03075b866546df71298be78b/5dfb5/cleaningFeeBookingBreakdown.webp 439w"],"sizes":"(max-width: 439px) 100vw, 439px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/11a4436c03075b866546df71298be78b/8b9b5/cleaningFeeBookingBreakdown.png 159w","/docs/legacy/static/11a4436c03075b866546df71298be78b/fa108/cleaningFeeBookingBreakdown.png 318w","/docs/legacy/static/11a4436c03075b866546df71298be78b/6c88f/cleaningFeeBookingBreakdown.png 439w"],"sizes":"(max-width: 439px) 100vw, 439px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/11a4436c03075b866546df71298be78b/6c88f/cleaningFeeBookingBreakdown.png","alt":"Cleaning fee in booking breakdown","title":"Cleaning fee in booking breakdown","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":"element","tagName":"h2","properties":{"id":"update-checkoutpage-to-handle-cleaning-fee","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#update-checkoutpage-to-handle-cleaning-fee","ariaLabel":"update checkoutpage to handle cleaning fee 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 CheckoutPage to handle cleaning fee"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, we want to update the Checkout Page so that it takes the\ncleaning fee selection into account when the customer actually pays for\nthe booking."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"fetch-speculated-transaction-complete-with-cleaning-fee","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fetch-speculated-transaction-complete-with-cleaning-fee","ariaLabel":"fetch speculated transaction complete with cleaning fee 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":"Fetch speculated transaction complete with cleaning fee"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a user clicks \"Request to book\", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ListingPage.js"}]},{"type":"text","value":" sends the booking\ndetails as initial values to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CheckoutPage.js"}]},{"type":"text","value":", which then fetches the\npossible transaction information, including pricing, to be shown on the\ncheckout page. In FTW language, this is known as \"speculating\" the\ntransaction - the booking has not been made, but the line items are\ncalculated as if it were."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This means that we need to pass the cleaning fee information to the\nfunction that speculatively fetches the transaction in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CheckoutPage.js"}]},{"type":"text","value":", and conversely receive it in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CheckoutPage.duck.js"}]},{"type":"text","value":".\nFirst, on CheckoutPage.js "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"loadInitialData()"}]},{"type":"text","value":" does some data processing\nand, if necessary, calls "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fetchSpeculatedTransaction()"}]},{"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":"     fetchSpeculatedTransaction(\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":"         listingId,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"         bookingStart: bookingStartForAPI,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"         bookingEnd: bookingEndForAPI,\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":"         hasCleaningFee: bookingData.cleaningFee?.length > 0,\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":"       transactionId\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":"p","properties":{},"children":[{"type":"text","value":"This function call dispatches a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"speculateTransaction"}]},{"type":"text","value":" action in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CheckoutPage.duck.js"}]},{"type":"text","value":", which in turn calls the FTW server using the\ncorrect endpoint. To pass the cleaning fee selection to the API call, we\nadd it to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bookingData"}]},{"type":"text","value":" within the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"speculateTransaction"}]},{"type":"text","value":" action."}]},{"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 bookingData = {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   startDate: orderParams.bookingStart,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   endDate: orderParams.bookingEnd,\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":"   hasCleaningFee: orderParams.hasCleaningFee,\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":"Now when the customer selects cleaning fee on the listing page and\nclicks \"Request to book\", we see the correct price and breakdown on the\ncheckout 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: 397px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 164.77987421383648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAABYlAAAWJQFJUiTwAAAFoklEQVRIx62U6U9UZxTG74em/RP62bZfWuuXtqE2LTuDjAozA8MMsw84w4wDDI4IOMAAoshWUVEUAUFt1bpb3NM0adJEGbBJ0bqgscZo3HdAQdFf8169iOKSpn2TJ3c5533e5znn3CsVN22jqGkrwZU7KF21i5LmnZSt3k1oTReh1j0ULvmBkqbNVLTvo6J9D+VtXVS07aWytYtQyy7KVu2gvGU35Wt+prrjINKClbtYuHoXdWsPUNdxkLrOg9R27Ke+c98zrDvA4rbd1HbspX79fhrW7aNx4y80bDhE3boDVDVvpKp5EzVrf6ahcy9STkkDRbXrKG/aTmnjZoJLNhFavoUFq3Y+Q/N2qlt3U926k5r2Luo691G7dg+L27uobuticfseqlu2U7tmG/VtO5B88/wUVS9nVl4x/rLvCTZsYH79eoJ1HYSWbaa8aQsVAiu2yc+hZRtZsHIrVat2UrZ0E0V1nZQs3URZ44+UNW5AyrDFordGYbJFY7LE4fQ5CJTXU7RoJXMrGylatIJg3RpCjespW7qBwppWAlXNFNV2MKeqhVkFNXgLayis6cBf2YKkSZuCOuUzEmI/5duYT0hJTyJ7XgWByiYCFcvILV6I3u4ly19CTrAWz7xFzC5ciDuwgMy8clJtfmzuALklDQRr25FUmskYbV8SFz2Z6K8/IzH+O2zuORizckg2ZOAJBDFn56DLMOP0B9FYPRgz/aQ7/Lhyg2TPrcSVX0puQQX5+cVIbnckDudUcmenoFF/hVX3LfrpUWi0iRiMalweJ+5cH3anGYfHi90XwBUI4fYH8c0tx1dQSd78xRideSSo9UjZThWRkZOYPi0Sc4aKNF0EBl0CsTERxER9jiY5CoPVTLrZisFsxmixYc2chds3B6+/GG9+kOy8+XjzS/EFQkhpM+JprS9laU0IvX4m5gwddocdi82OVpdGWnoGZosZk8WG0ZqFye7CYnWQbjBhMpmx2TPJcnnx+Obgnj0X6ZuICAryfBTkuHCZHeS4svC67DgsJsxGA8Z0A6k6PdoUDTqtluQULSaTBYstE7Mtiyy3D4fThdPhZJbLizQ14gs+eP89YqZ+hSE7DqN9Gg6DAYNOg82oR6/Vok1OJj1VS6pWgzY5BbU6CZ0ulfS0NIwZJuyZHjKzsnG73EhWbRwpkVGoc6aQtOVjVC0fMSPtO/TT1SQlxJIYH880lYrEhASSVAnMVCcRGxNHdGQU0xJUJKri0c5IwmKyYDI7kP7oOcLJo3/h+Wkm0a2T+KblQ9b/2sTx3j66u3+nN3yYnvAResJhwt3d9PaE6e3pofvwEbqPhOntPcrRnjB//nGUY33HkXi+Lt77G8+2ZJb8VsJ/WdKT0VFGR0cZHhpmZOgxDwdGGBwY5M6dO9y8eZN79+4xNDTEkydP5Lw3QcQFpKdPn8rM/Wf6Of7XccI9Yfr7T3Ps2DH6+vo4dOgQJ06ckHNE7rswRiiUXL16VVZ148YNbt++Lat89OjRmJ1/RXj//n2ZSIFiWdhQyJ7fvJ3wpeQ3LCUuLm/LfUnh48ePGRkZkS0qeEH0QoFYognj88ReJTZGKDqp4MGDBzLG2x1P+PDhw5fyh4eHJxJev36d8+fPyzh58qRM+LpGKO9Onz4t5/b393Pp0qWJlkUDlKBokDj1TfUV7wYHB+WpOHPmjEw8QaFQJIhEHV/d/DootRwYGJBLMIFQKBJBAVEXQS6uYpPIUb4EAfGskAkIMRMIxSBfvnxZtiFOvHLlChcuXJA7+PLovJgKUR4BUf8JhGKQRVAQCeJbt269cy6FuosXL3Lt2rXXWxafn4AgF8njbb4KRaUoy2trKIiEQnHaeAuvNkMhEyU6deoUZ8+e5dy5cxPHRnT37t27cjMUdW+zq+Qre8YIx1t4deO7LI9fY/9DpfX/F/4B9H9a7/OUPRoAAAAASUVORK5CYII='); 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/69e27c2e38104c3d024496df202f8293/82e29/checkoutPageBreakdown.webp 159w","/docs/legacy/static/69e27c2e38104c3d024496df202f8293/ef33f/checkoutPageBreakdown.webp 318w","/docs/legacy/static/69e27c2e38104c3d024496df202f8293/4e179/checkoutPageBreakdown.webp 397w"],"sizes":"(max-width: 397px) 100vw, 397px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/69e27c2e38104c3d024496df202f8293/8b9b5/checkoutPageBreakdown.png 159w","/docs/legacy/static/69e27c2e38104c3d024496df202f8293/fa108/checkoutPageBreakdown.png 318w","/docs/legacy/static/69e27c2e38104c3d024496df202f8293/d4ee3/checkoutPageBreakdown.png 397w"],"sizes":"(max-width: 397px) 100vw, 397px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/69e27c2e38104c3d024496df202f8293/d4ee3/checkoutPageBreakdown.png","alt":"Cleaning fee in booking breakdown on checkout page","title":"Cleaning fee in booking breakdown on checkout 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":"element","tagName":"h3","properties":{"id":"include-cleaning-fee-in-the-final-transaction-price","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#include-cleaning-fee-in-the-final-transaction-price","ariaLabel":"include cleaning fee in the final transaction price 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":"Include cleaning fee in the final transaction price"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The final step is to add the same logic to the flow that eventually sets\nthe price for the transaction. In "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CheckoutPage.js"}]},{"type":"text","value":", the function that\ndoes the heavy lifting in handling the payment processing is\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handlePaymentIntent()"}]},{"type":"text","value":". In short, it first creates five functions to\nhandle the transaction payment process, then composes them into a single\nfunction "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handlePaymentIntentCreation()"}]},{"type":"text","value":", and then calls that function\nwith parameter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"orderParams"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To add the cleaning fee information into this process, we want to\ninclude it in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"orderParams"}]},{"type":"text","value":", which is defined towards the very end of\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handlePaymentIntent()"}]},{"type":"text","value":" function."}]},{"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 orderParams = {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     listingId: pageData.listing.id,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     bookingStart: tx.booking.attributes.start,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     bookingEnd: tx.booking.attributes.end,\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":"     hasCleaningFee: pageData.bookingData?.cleaningFee?.length > 0,\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":"     ...optionalPaymentParams,\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":"Then, we still need to add the cleaning fee information to the correct\naction in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CheckoutPage.duck.js"}]},{"type":"text","value":". The first function in the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handlePaymentIntentCreation()"}]},{"type":"text","value":" composition is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fnRequestPayment"}]},{"type":"text","value":". It\ninitiates the order if there is no existing paymentIntent, and in\npractice it dispatches the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initiateOrder"}]},{"type":"text","value":" action that calls the FTW\nserver. So similarly to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"speculateTransaction"}]},{"type":"text","value":" action, we just need\nto add the cleaning fee selection to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bookingData"}]},{"type":"text","value":" in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initiateOrder"}]},{"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 bookingData = {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   startDate: orderParams.bookingStart,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   endDate: orderParams.bookingEnd,\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":"   hasCleaningFee: orderParams.hasCleaningFee,\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":"Now you can try it out! You may have to refresh your application first,\nso that the Redux changes take effect. When you complete a booking on a\nlisting that has a cleaning fee specified, you can see the cleaning fee\nincluded in the price on the booking page. In addition, the Flex Console\ntransaction price breakdown also shows the cleaning fee."}]},{"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: 454px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 77.9874213836478%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAABP0lEQVQ4y41UCY6FIBT79z+micu4jaLiwtJJMRj8ChmSRgK8WtuHHwCw1mLfd0gpsa0Sq1xgrUY4eCYGBPMPD2utUVUVmqZFNyz46QT6acewaMyrPovehsW1dyPkRAiBdV0xbxZCGvzOCq04IKSKK7upx52QMFrDGA2jFazRpwRYGGNeoZRy4NyTXoTc6PvefXZd12jbDodSl4JvPznGcUTTNM6yByEXuTkMgzvs34pEGN4qinklLMsSeZ47qIi6cI1BZln2VEg1XAzhC2P++Zrw+VC4LAumaXLezPOc7j0Ax3FgEuI9FBKeYbTOFxLH+s+vsybpIUPpus71Y9iwMUIq5PloymwbqmQ4YSixT962zdVEQ/lWkQrEw4t5DaUoCqfwv4N+s+YRir9G/OMQJPfXKgV6SLyGcoNJ344U/gDTYOzrNFQsRwAAAABJRU5ErkJggg=='); 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/ab1378ce2c113c643110f8c89f136ca8/82e29/consoleBookingBreakdown.webp 159w","/docs/legacy/static/ab1378ce2c113c643110f8c89f136ca8/ef33f/consoleBookingBreakdown.webp 318w","/docs/legacy/static/ab1378ce2c113c643110f8c89f136ca8/93289/consoleBookingBreakdown.webp 454w"],"sizes":"(max-width: 454px) 100vw, 454px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/ab1378ce2c113c643110f8c89f136ca8/8b9b5/consoleBookingBreakdown.png 159w","/docs/legacy/static/ab1378ce2c113c643110f8c89f136ca8/fa108/consoleBookingBreakdown.png 318w","/docs/legacy/static/ab1378ce2c113c643110f8c89f136ca8/9d757/consoleBookingBreakdown.png 454w"],"sizes":"(max-width: 454px) 100vw, 454px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/ab1378ce2c113c643110f8c89f136ca8/9d757/consoleBookingBreakdown.png","alt":"Cleaning fee in booking breakdown in Flex Console","title":"Cleaning fee in booking breakdown in Flex Console","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":"element","tagName":"extrainfo","properties":{"title":"Add cleaning fee to email notifications"},"children":[{"type":"text","value":"\nTo add the cleaning fee into your email notifications, you will need to add it to the email templates.\nThe "},{"type":"element","tagName":"a","properties":{"href":"/docs/tutorial/use-protected-data-in-emails/"},"children":[{"type":"text","value":"third step of this tutorial"}]},{"type":"text","value":" deals with updating email notifications.\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":"     {{#each tx-line-items}}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"       {{#contains include-for \"provider\"}}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"         {{#eq \"line-item/day\" code}} ...\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":"          {{#eq \"line-item/cleaning-fee\" code}}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"            <tr class=\"bottom-row\">\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"              <td>Cleaning fee</td>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"              <td class=\"right\">{{> format-money money=line-total}}</td>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"            </tr>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"          {{/eq}}\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":"         {{#eq \"line-item/provider-commission\" code}} ...\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"       {{/contains}}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     {{/each}}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The email templates that list the full line items in the default\ntransaction process are"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"new-booking-request"}]},{"type":"text","value":" (to provider)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"booking-request-accepted"}]},{"type":"text","value":" (to customer)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"money-paid"}]},{"type":"text","value":" (to provider)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"headings":[{"value":"Store cleaning fee into listing","depth":2},{"value":"Save to public data","depth":3},{"value":"Initialize the form","depth":3},{"value":"Add input component","depth":3},{"value":"Update BookingDatesForm","depth":2},{"value":"Prepare props","depth":3},{"value":"Add cleaning fee checkbox","depth":3},{"value":"Update the bookingData","depth":3},{"value":"Add a new line-item for the cleaning fee","depth":2},{"value":"Resolve the cleaning fee","depth":3},{"value":"Add line-item","depth":3},{"value":"Update CheckoutPage to handle cleaning fee","depth":2},{"value":"Fetch speculated transaction complete with cleaning fee","depth":3},{"value":"Include cleaning fee in the final transaction price","depth":3}]}},"pageContext":{"slug":"customize-pricing-tutorial","category":"tutorial-transaction-process"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}