Current Situation¶

---
  config:
    flowchart:
      curve: monotoneY
      nodeSpacing: 30
      rankSpacing: 40
      padding: 10
      wrappingWidth: 120
---
flowchart TD

%% Example comment label
%% CheckoutStep1@{ shape: braces, label: EXAMPLE UF-1} -.-> RedirectCheckout 


%% Pre-checkout

Start@{ shape: circle} --> ToMyAccount[Go to my account]
ToMyAccount --> MyAccountReorder[Add to Cart: My account reorder]
MyAccountReorder ---> ToCheckoutMyAccount[Go to checkout]
ToCheckoutMyAccount ---> MyAccountPassthrough(User is logged in, thus you can continue to payment method selection)
MyAccountPassthrough ----> SelectMethod

Start@{ shape: circle} --> GoToPDPPLP[Go to PDP or PLP]
GoToPDPPLP --> AddToCart[Add to Cart: PDP or PLP]
AddToCart --> ToCart[Go to Cart]
ToCart --> RedirectCheckout[Go to checkout]

%% Checkout Step 1: UserData

RedirectCheckout --> IsLoggedIn{Is Logged in?}

IsLoggedIn -->|Yes| SelectMethod{Choose payment method}

IsLoggedIn -->|No| AuthChoice{Choose authentication method}

AuthChoice -->|Log in| Login@{shape: manual-input, label: Enter credentials} ---> SelectMethod


AuthChoice -->|Register| Registration@{ shape: manual-input, label: Fill registration form **with** password} ---> SelectMethod

AuthChoice -->|Guest| GuestForm@{ shape: manual-input, label: Fill registration form **without** password -> as guest} ---> SelectMethod

AuthChoice -->|Forgot password| ForgotPassword(Redirect to forgot password) 
ForgotPassword --> ResetPassword@{shape: procs, label: Set a new password with password reset email} --> RedirectCheckout



%% Checkout Step 2: Payment Selection

%% BANKTRANSFER
CreatePaymentBankTransfer@{shape: procs, label: Create Bank transfer payment at CM}
OpenBankTransferModal@{shape: event, label: Open Bank Transfer Modal}

SelectMethod -- Bank Transfer --> CreatePaymentBankTransfer
CreatePaymentBankTransfer --> OpenBankTransferModal
OpenBankTransferModal -------> RedirectToValidationPage

%% IDEAL
PaymentIDEAL@{shape: procs, label: Start payment at CM for iDEAL}
RedirectToIdeal@{shape: event, label: Redirect to iDEAL}
PayIdeal@{shape: process, label: Pay the amount in iDEAL}

SelectMethod -- IDEAL --> PaymentIDEAL
PaymentIDEAL --> RedirectToIdeal
RedirectToIdeal --> PayIdeal
PayIdeal ------> RedirectToValidationPage

%% PAYPAL
PaymentPaypal@{shape: procs, label: Start payment at CM for PayPal}
RedirectToPayPal@{shape: event, label: Redirect to PayPal}
PayPayPal@{shape: process, label: Pay the amount in PayPal}

SelectMethod -- PayPal --> PaymentPaypal
PaymentPaypal --> RedirectToPayPal
RedirectToPayPal --> PayPayPal
PayPayPal ------> RedirectToValidationPage

%% MAESTRO - TODO: Flow unclear, cannot verify in test environment (test card numbers not accepted)
%% Expected to work similar to creditcard flow but needs verification
PaymentMaestro@{shape: procs, label: "TODO: Start payment at CM for Meastro"}
RedirectToMaestro@{shape: event, label: "TODO: Redirect to Meastro"}
PayMeastro@{shape: process, label: "TODO: Pay the amount in Meastro"}

SelectMethod -- "Maestro (TODO)" --> PaymentMaestro
PaymentMaestro --> RedirectToMaestro
RedirectToMaestro --> PayMeastro
PayMeastro ------> RedirectToValidationPage

%% KLARNA
HasPhoneNumber@{shape: diamond, label: Has Customer a phone number?}
FillPhoneNumberModal@{shape: manual-input, label: Fill phone number for payment}
PaymentKlarna@{shape: procs, label: Start payment at CM for Klarna}
RedirectToKlarna@{shape: event, label: Redirect to Klarna}
PayKlarna@{shape: process, label: Pay the amount in Klarna}

SelectMethod -- Klarna --> HasPhoneNumber
HasPhoneNumber -- Yes --> PaymentKlarna
HasPhoneNumber -- No --> FillPhoneNumberModal
FillPhoneNumberModal --> PaymentKlarna
PaymentKlarna --> RedirectToKlarna
RedirectToKlarna --> PayKlarna
PayKlarna ----> RedirectToValidationPage

%% VISA & MASTERCARD
SelectMethod -- Creditcard (Mastercard & Visa) --> GoToCreditcardPage

%% MISTERCASH (Bancontact)
SelectMethod -- Mistercash (Bancontact) --> GoToBancontactPage


%% Generic validation and completion
RedirectToValidationPage@{shape: event, label: Redirect to Validation Page}
ValidateOrderPayment@{shape: procs, label: Validate Order payment}
IsOrderPaymentValid@{shape: diamond, label: Is Order payment valid?}

RedirectToValidationPage --> ValidateOrderPayment
ValidateOrderPayment --> IsOrderPaymentValid

IsOrderPaymentValid -- No --> SelectMethod

IsOrderPaymentValid -- Yes --> RedirectOrderConfirmation@{shape: rect, label: Redirect to Order Confirmation}


%% Sub-flows

%% Creditcard Sub-flow
subgraph Creditcard Flow
GoToCreditcardPage@{ shape: rect, label: Go to payment with Creditcard} --> UseSavedCard@{shape: diamond, label: Use existing card?}

%% Use existing card

UseSavedCard -- Use existing card --> UseCardCM@{ shape: procs, label: Gets existing card from CM and uses that card}
UseCardCM ---> PaymentCreditcard

%% Use new card

UseSavedCard -- No --> EnterCardDetails[Enter card details]
EnterCardDetails --> SaveCard{Save new card?}

%% Save new card
SaveCard -- Yes --> SaveCardCM@{ shape: procs, label: Saves new card to CM and uses that card}
SaveCardCM --> PaymentCreditcard@{shape: procs, label: Process payment}

%% Don't save new card
SaveCard -- No --> PaymentCreditcard

PaymentCreditcard --> Handle3dSecure@{shape: event, label: Handle 3D Secure and authenticate payment}
click Handle3dSecure href "#threedsecure" "Information on 3D secure"

end
Handle3dSecure ---> RedirectToValidationPage

%% Bancontact Sub-flow
subgraph Bancontact flow
GoToBancontactPage@{shape: rect, label: Go to payment with Bancontact} --> CreateBancontactOrder@{shape: procs, label: Create order and get QR/App URLs from CM}
CreateBancontactOrder --> UseBancontactQr@{shape: diamond, label: Use Bancontact App/QR?}

%% Use QR/App - Desktop: scan QR, Mobile: open app
UseBancontactQr -- Yes (Desktop) --> ShowQrCode@{shape: event, label: Display QR code on screen}
ShowQrCode --> ScanQrCode@{shape: manual-input, label: User scans QR with phone}
ScanQrCode --> AuthorizeInApp@{shape: process, label: Authorize payment in Bancontact App}
AuthorizeInApp --> PollPaymentStatus@{shape: procs, label: Original browser polls payment status}
PollPaymentStatus --> PayBancontactApp@{shape: event, label: Payment confirmed - redirect original browser}

UseBancontactQr -- Yes (Mobile) --> OpenBancontactApp@{shape: event, label: Open Bancontact App via Intent URL}
OpenBancontactApp --> PayBancontactApp

%% Don't use QR/App - Use card

UseBancontactQr -- No --> UseSavedCardBancontact@{shape: diamond, label: Use existing card?}

%% Use existing card

UseSavedCardBancontact -- Use existing card --> UseCardCMBancontact@{ shape: procs, label: Gets existing card from CM and uses that card}
UseCardCMBancontact ---> PaymentBancontact

%% Use new card

UseSavedCardBancontact -- No --> EnterCardDetailsBancontact[Enter card details]
EnterCardDetailsBancontact --> SaveCardBancontact{Save new card?}

%% Save new card
SaveCardBancontact -- Yes --> SaveCardCMBancontact@{ shape: procs, label: Saves new card to CM and uses that card}
SaveCardCMBancontact --> PaymentBancontact@{shape: procs, label: Process payment}

%% Don't save new card
SaveCardBancontact -- No --> PaymentBancontact

PaymentBancontact --> Handle3dSecureBancontact@{shape: event, label: Handle 3D Secure and authenticate payment}
click Handle3dSecureBancontact href "#threedsecure" "Information on 3D secure"

end
PayBancontactApp ----> RedirectToValidationPage
Handle3dSecureBancontact --> RedirectToValidationPage

%% APPLE_PAY & GOOGLE_PAY - NOT IMPLEMENTED TO THE SIDE
SelectMethod -. Apple Pay & Google Pay ..-x NotImplemented@{ shape: stadium, label: Not Implemented}
subgraph gone [" "]
NotImplemented
end

style gone fill:none,stroke:none