Micro Frontend - Angular 7 with React components

Add React components to Angular 7 application. Implement AirBnb DatePicker and Calender reservation funtionality. Implement using the following React Components: [login to view URL] See Airbnb’s Campervan Booking page with ‘availability’ calendar updating to reflect dates selected. Use AirBnb components and layout as shown below: Example page: [login to view URL] ‘Book Now’ button was selected, ignore update of calendar date as start date has not been provided.417_VTklTPDAdxmMWF63&guests=1&adults=1 *Important - Functionality and validation between calendar, date picker controls and buttons should match Airbnb link above. Technical Requirements Integrate React components Integrate React Dates [login to view URL] React components [login to view URL] Implement react in angular using ‘angular-react’ from Microsoft repo: [login to view URL] 1) Create new module Navigate to: /camper-details/ohio (provided by us) Selection of ‘Available’ start date from calendar or click of ‘book now’ button will lazyload new booking module: (loadChildren) path: '/book' Needs to be tested using --prod build 2) Create new component Add ng reserve component to booking module Component needs to contain buttons to match AirBnb reserve flow. See:Example page. Add dates, reserve etc. Hidden/Enabled State needs match example link provided. See: Example page 3) Integrate React components Responsive, Mobile first, Side by side layout. 4) Update Angular model from react components via service bus and angular service. A) Create angular model and Angular ‘booking’ service (ng service) Angular Model startDate endDate itemId B) Create simple service bus in javascript to communicate from react to angular and angular to react. Create a simple (two way) service bus communication between angular and react components / angular service. Angular model needs to be updated from react date picker selection. C) Add Angular ‘reserve’ button. Enabled state should be based on valid, selected dates. Styling should be bootstrap. Same as AirBnb component. D) Call api from ng service, created previously, passing model. API endpoint (provided by us) /api/book 5) State / View State Changes Update ng model, reserve component, via ng service, based on react date picker selection. Validation rules: Do not allow selection of non-available dates on date picker. ‘Available’ only status can be selected. Use availability api call to determine available dates. Unavailable dates should be styled as per example page: [login to view URL] ( date picker days should be strike through/styled/readonly to indicate not available. ) Can only select from available, contiguous dates. Validation and Behaviour should match AirBnb functionality between availability calendar and date picker Initialised state: To Date is populated with selected start date from step 1, if provided. See Below: Additional Requirements 1) Styling to match Airbnb date selector box 2) Angular ‘Add dates’ button displayed if no dates selected, as shown below: . 3) Navigation to initiating route with dialog On success of api/book endpoint, Navigation will route back to parent module/route and new dialog component will appear showing booking ‘Summary’ component, displaying basic summary dates booked. In our example, route where dialog will be displayed is /camper-details/ohio. Book module / reserve component will need to store route navigated from to route back.