Create "Link Accounts" pop up

[Cheanataly]

We have moved the "login with Facebook/Gmail" from the log in page to this new page "Link Accounts" page.

Here is the design:

It is a pop up after the successful booking and blur the background which is "Thank you" page.

The pop up has

• Header: the header is in H1 and text color is white
• list of toggle buttons: right now we have only 2 which are Facebook and Gmail. If customers want to link their account to any of those, they just switch on the toggle button.

More detail: https://www.figma.com/file/ZCcD4RV58FowzVvWdVmY4a/Airbnb-Dark-mode-by-PaulChrisLuke?node-id=8237%3A0

[paulchrisluke]

@mort3za @ctyar this is related to https://github.com/whynotearth/meredith-core/issues/87 and https://github.com/whynotearth/hotel-website-vkirirom.com/issues/385

The bug with login is costing us conversions. We need to move the login auth to after the checkout flow.

As far as user profile is concerned, we can assign an ID once a user starts the booking flow, collecting room type, date, number of guests, etc. all under that user ID. Once the email and other contact info is input, that data can be assigned to the same profile ID. I'd like meredith core to generate profile ID's as the master user ID, and then start adding other contact info in as we get it... a user adds payment info, email, syncs their facebook/gmail, adds a user profile photo etc, all that is tied to the single user ID.

To get an idea of the flow, www.paulchrisluke.com shows how jumper.ai collects data and then starts recognizing you as you input data it remembers.

[paulchrisluke]

it may also help to see our (still in design phase) ux of the chatbot we are going to build for browtricks. You can see how we ask for booking details first, then email, then name, then other info to build the user profile as we collect data. If this works, I will probably build a similar thing for vkirirom.com booking

https://www.figma.com/file/m8JgvnHpgPmGq8Bm2iAf1a/Brow-Tricks?node-id=943%3A20488

also @atharva3010 and @StrangeWill for awareness.

[mort3za]

@paulchrisluke I created a basic dialog for connecting accounts, but as you said the design is not finished, please update the design of that dialog. Also, There should be a way to open the dialog manually I think.

[paulchrisluke]

design above is finished, how can I test/see this?

[mort3za]

It's on the thanks page. automatically opens after 2s. https://github.com/whynotearth/hotel-website-vkirirom.com/pull/468

[mort3za]

login, then go to /booking/thanks, no need to pay.

[freshusername]

excuse me guys. Have you ever tried to send data and files from vue.js to asp core web api via axios? I have some troubles few days in a row. And i came here to search for a help..

[mort3za]

@freshusername [frontend:] sending files by axios has nothing to do with vue except getting file input by ref. this is the way of sending file by formData in axios: https://stackoverflow.com/a/43014086

Personally I prefer not to send files and data together, instead send file to an uploader API and get a file url, then send it together with other data.

[paulchrisluke]

@mort3za just getting back around to testing this sorry. Right now, it seems I can only link one account at a time. If I link my google, the toggle turns "off" on facebook. If I re-link facebook, google turns off:

if they toggle it to the off position, we should probably show a dialog which says "please unlink within your [facebook/google] account"

[freshusername]

@mort3za when I have one to many relations(I want to store multiple photos for one entity; each photo in Photos table has id of entity from another table) and I have my photos uploaded immediately when I choose them - how can I handle uploading files for entity that is not inserted in database yet? (because files are uploading when user choose them)..

[mort3za]

@freshusername that's a backend subject, I'm not sure but I guess there should be a temporary state for uploading files, and when entity created you can keep file permanently.

[freshusername]

@mort3za Yes, i just figured it out. I implemented vuex store for an array of photos data, that is returned from the server. Then I send POST to create entity and by using property from the response, I insert photos into another table. Thanks)