example.js

import { useState } from 'react';
import { openURL } from 'expo-linking';

import ErrorIcon from '@icons/error';
import useCreateOrder from './useCreateOrder';
import ItemsList from './components/ItemsList';
import { isIOS } from '../../utils/deviceInfo';
import QuestionsCard from './components/QuestionsCard';
import useStatusBarColor from '../../hooks/useStatusBarColor';
import {
  Menu,
  Loader,
  Layout,
  StyledModal,
  ScreenHeader,
} from '~/src/components';

const CreateOrder = () => {
  const [error, setError] = useState(false);
  const {
    orderedItems,
    loading,
    handlePressModal,
    selectedItems,
    setSelectedItems,
    questionsFields,
    setQuestionFields,
    finish,
    step,
    setStep,
    questionIndex,
    setQuestionIndex,
    addSkipped,
    questions,
    submitData,
    updated,
    setUpdated,
    createOrderError,
    createOrderLoading,
    createOrderResult,
    submitAttempts,
    multiOrderedRejection,
    removeMultiOrderRejectionPrompt,
  } = useCreateOrder();
  useStatusBarColor('dark');

  if (createOrderLoading) {
    return <Loader text="Submitting your order..." />;
  }

  const onCreateOrder = () => {
    try {
      submitData();
    } catch (error) {
      setError(true);
    }
  };

  return (
    <Layout>
      {isIOS && <Menu />}
      <ScreenHeader text="Eligible for Reorder" icon="order" />
      {loading && <Loader text="We are loading your eligible items..." />}
      {!loading && step === 0 && (
        <ItemsList
          selectedItems={selectedItems}
          onSelectItems={setSelectedItems}
          setStep={setStep}
          items={orderedItems}
        />
      )}
      {step === 1 && (
        <QuestionsCard
          updated={updated}
          setUpdated={setUpdated}
          addSkipped={addSkipped}
          total={questions.length}
          index={questionIndex + 1}
          type={questions[questionIndex].type}
          rules={questions[questionIndex].rules}
          options={questions[questionIndex].options}
          question={questions[questionIndex].question}
          answer={questionsFields[questionIndex].value}
          dependant={questions[questionIndex].dependant}
          form={
            questions[questionIndex].form ? questions[questionIndex].form : null
          }
          nextQuestion={() => {
            if (questionIndex === questions.length - 1) {
              onCreateOrder();
            } else {
              setQuestionIndex(questionIndex + 1);
            }
          }}
          setAnswer={(value) => {
            let newFields = [...questionsFields];
            newFields[questionIndex].value = value;
            setQuestionFields(newFields);
          }}
          setUpdatedValues={(value) => {
            let newFields = [...questionsFields];
            newFields[questionIndex].updatedValues = value;
            setQuestionFields(newFields);
          }}
        />
      )}
      <StyledModal
        buttonText="Ok"
        title="Success!"
        onPress={handlePressModal}
        active={finish && !!createOrderResult}
        description="Your order request has been sent. Thank you for placing a new order."
      />
      <StyledModal
        onPress={submitData}
        ModalIcon={ErrorIcon}
        buttonText="Try Again"
        title="Error Submitting Order"
        description="There was an error submitting your order."
        active={
          finish &&
          createOrderError &&
          submitAttempts < 3 &&
          !multiOrderedRejection
        }
        onClose={handlePressModal}
        closeCross
      />
      <StyledModal
        closeCross
        buttonText="Ok"
        title="We got your request"
        onClose={removeMultiOrderRejectionPrompt}
        active={finish && multiOrderedRejection}
        onPress={removeMultiOrderRejectionPrompt}
        description="You've already submitted an order today. It's currently processing."
      />
      <StyledModal
        title="Error Submitting Order"
        description="There was an error submitting your order. Please call Solara customer service 800-423-0896"
        onPress={() => openURL(`tel:${18004230896}`)}
        buttonText="Call +1 (800) 423-0896"
        active={
          finish &&
          createOrderError &&
          submitAttempts > 2 &&
          !multiOrderedRejection
        }
        onClose={handlePressModal}
        closeCross
      />
      <StyledModal
        title="Error"
        active={error}
        buttonText="Ok"
        onPress={() => setError(false)}
        description="An error has occurred, please try again later or contact support."
      />
    </Layout>
  );
};

export default CreateOrder;