paymentUserFlow.js

let rubel_apps = {
  initial: 'payment_page',
  states: {
    payment_page: {
      on: {
        VISIT: 'payment_information_page',
      },
    },
    payment_information_page: {
      on: {
        BACK: 'payment_page',
        CLICK_NOTIF: 'payment_web',
      },
    },
  },
  on: {
    CLICK_NOTIF: 'payment_web',
  },
};

let product_page = {
  initial: 'choosen_class',
  states: {
    choosen_class: {
      on: {
        SEE_PRODUCT_DETAIL: 'product_detail_modal',
        SELECT_PRODUCT: 'choosen_product',
      },
    },
    product_detail_modal: {
      on: {
        CLOSE: 'choosen_class',
      },
    },
    choosen_product: {
      type: 'final',
    },
  },
  on: {
    RECHOOSE_CLASS: 'product_page',
    CONFIRM: 'auth_check',
  },
};

let payment_review_page = {
  initial: 'choosen_product',
  states: {
    choosen_product: {
      on: {
        CHECK_DISCOUNT: 'modal_discount',
        DIRECT_PURCHASE: 'purchase_without_discount',
      },
    },
    modal_discount: {
      on: {
        DISCOUNT_AVAILABLE: 'purchase_with_discount',
        DISCOUNT_NOT_AVAILEBLE: 'choosen_product',
      },
    },
    purchase_with_discount: {
      type: 'final',
    },
    purchase_without_discount: {
      type: 'final',
    },
  },
  on: {
    CONFIRM: 'payment_method_page',
    BACK: 'product_page',
    SEE_ORDER: 'order_list',
    LOG_OUT: 'product_page',
  },
};

let doku_payment_method_page = {
  on: {
    SUCCESS: 'success_page',
    PENDING: 'order_list',
    FAILED: 'failed_page',
  },
};

let midtrans_payment_webview = {
  on: {
    SUCCESS: 'success_page',
    FAILED: 'failed_page',
    PENDING: 'order_list',
  },
};

let failed_page = {
  on: {
    CONFIRM: 'order_list',
  },
};

let payment_method_page = {
  initial: 'purchase_with_or_without_discount',
  states: {
    purchase_with_or_without_discount: {
      on: {
        SELECT_payment_method_page: 'confirmation_modal',
      },
    },
    confirmation_modal: {
      on: {
        CONFIRM: 'payment_merchant_checking',
        CANCEL: 'purchase_with_or_without_discount',
      },
    },
    payment_merchant_checking: {
      on: {
        MANUAL: 'manual_page',
        MIDTRANS: 'midtrans_webview',
        DOKU: 'doku_page',
      },
    },
    doku_page: {
      type: 'final',
    },
    midtrans_webview: {
      type: 'final',
    },
    manual_page: {
      type: 'final',
    },
  },
  on: {
    MANUAL_PAYMENT_CONFIRMATION: 'manual_payment',
    MIDTRANS_PAYMENT_CONFIRMATION: 'midtrans_payment_webview',
    DOKU_PAYMENT_CONFIRMATION: 'doku_payment_method_page',
    BACK: 'payment_review_page',
    SEE_ORDER: 'order_list',
    LOG_OUT: 'product_page',
  },
};

let manual_payment = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        COPY_TO_CLIPBOARD: 'copy_succeed_toast',
        UPLOAD_TRANSFER_RECIPT: 'upload_dialog',
      },
    },
    copy_succeed_toast: {
      on: {
        TIMEOUT: 'idle',
      },
    },
    upload_dialog: {
      on: {
        SUCCESS: 'idle',
        ERROR: 'error_dialog',
      },
    },
    error_dialog: {
      on: {
        TIMEOUT: 'idle',
      },
    },
  },
  on: {
    CONFIRM: 'check_order',
    SEE_ORDER: 'order_list',
    LOG_OUT: 'product_page',
  },
};

let check_order = {
  on: {
    PENDING: 'confirmation_page',
    SUCCESS: 'success_page',
  },
};

let confirmation_page = {
  on: {
    CONFIRM: 'order_list',
  },
};

let success_page = {
  on: {
    CONFIRM: 'order_list',
  },
};

let error_page = {
  on: {
    CONFIRM: 'order_list',
  },
};

let order_list = {
  on: {
    CHECK_DETAIL: 'manual_payment',
    LOG_OUT: 'product_page',
    HELP: 'help_page',
  },
};

let purchase = {
  on: {
    SELECT_CLASS: 'product_page',
  },
};

let auth_page = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        LOGIN_SUCCEED: 'redirect',
        REGISTER_SUCCEED: 'redirect',
        LOGIN_FAILED: 'error_modal',
      },
    },
    error_modal: {
      on: {
        CANCEL: 'idle',
      },
    },
    redirect: {
      type: 'final',
    },
  },
  on: {
    SUCCESS: 'payment_review_page',
    FAIL: 'auth_page',
  },
};

let auth_check = {
  on: {
    HAS_TOKEN: 'payment_review_page',
    NO_TOKEN: 'auth_page',
  },
};

let help_page = {
  on: {
    BACK: 'order_list',
  },
};

let payment_page = {
  initial: 'purchase',
  states: {
    purchase: purchase,
    product_page: product_page,
    auth_check: auth_check,
    auth_page: auth_page,
    payment_review_page: payment_review_page,
    payment_method_page: payment_method_page,
    doku_payment_method_page: doku_payment_method_page,
    failed_page: failed_page,
    midtrans_payment_webview: midtrans_payment_webview,
    manual_payment: manual_payment,
    check_order: check_order,
    confirmation_page: confirmation_page,
    order_list: order_list,
    success_page: success_page,
    help_page: help_page,
  },
};

let payment = Machine({
  id: 'payment',
  initial: 'rubel_apps',
  states: {
    rubel_apps: rubel_apps,
    payment_web: payment_page,
  },
});