be-components 0.7.6 → 0.7.8

package/lib/module/Poll/flashmarket/index.js

@@ -1,13 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, View, Image, TouchableOpacity } from "react-native";
 import Colors from '../../constants/colors';
-import { Spring, Text, TextInput } from '../../Components';
-import { PollApi, PollCampaignApi, PollResponseApi, PollResponseHelpers } from '../api';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import { PollApi, PollCampaignApi, PollCampaignHelpers, PollResponseApi, PollResponseHelpers } from '../api';
 import { view_styles } from '../../constants/styles';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import CampaignProgressBar from '../components/CampaignProgressBar';
+import ResponseTimer from '../components/ResponseTimer';
+import ResultCard from './ResultCard';
 const MAX_IMAGE_SIZE = 125;
 const MAX_OPTION_WIDTH = 200;
 const FlashMarket = ({
+  hide_progress_bar,
+  poll_campaign_id,
   poll_id,
   player_id,
   onRequestAuthenticate
@@ -16,11 +21,11 @@ const FlashMarket = ({
     height: 0,
     width: 0
   });
-  const [data, setData] = useState({
+  const [poll_data, setPollData] = useState({
     loading: false,
     poll_options: [],
-    poll_summaries: [],
-    show_complete: false
+    show_complete: false,
+    poll_summaries: []
   });
   const {
     loading,
@@ -28,34 +33,79 @@ const FlashMarket = ({
     poll_options,
     poll_summaries,
     poll_response
+  } = poll_data;
+  const [data, setData] = useState({
+    loaded: false,
+    polls: [],
+    show_leaders: false,
+    poll_responses: []
+  });
+  const {
+    loaded,
+    poll_campaign,
+    polls,
+    active_poll_index,
+    poll_responses,
+    show_leaders
   } = data;
   let visible_options = poll_options;
   if (poll_response && poll_response.status == 'pending') {
     visible_options = poll_options.filter(po => po.poll_option_id == poll_response.poll_option_id);
   }
-  let image_size = flash_size.width * 0.2;
+  const selected_option = poll_options.find(po => po.poll_option_id == poll_response?.poll_option_id);
+  let image_size = flash_size.width * 0.15;
   if (image_size > MAX_IMAGE_SIZE) {
     image_size = MAX_IMAGE_SIZE;
   }
-  let option_width = flash_size.width * 0.8 / 2 - 25;
+  let option_width = flash_size.width / 3 - 5;
   if (option_width > MAX_OPTION_WIDTH) {
     option_width = MAX_OPTION_WIDTH;
   }
   useEffect(() => {
-    getDataFromServer(poll_id);
-  }, [poll_id, player_id]);
-  const getDataFromServer = async poll_id => {
+    getDataFromServer(poll_campaign_id);
+  }, [poll_campaign_id, player_id]);
+  useEffect(() => {
+    if (!active_poll_index && active_poll_index != 0) {
+      return;
+    }
+    let active_poll = polls[active_poll_index];
+    if (!active_poll) {
+      return;
+    }
+    getPollFromServer(active_poll.poll_id);
+  }, [active_poll_index]);
+  const getDataFromServer = async poll_campaign_id => {
+    const pc = await PollCampaignApi.getPollCampaignById(poll_campaign_id);
+    const ps_response = await PollApi.getPollsByCampaignId(poll_campaign_id);
+    let prs = [];
+    if (player_id) {
+      prs = await PollResponseApi.getMyCampaignResponses(poll_campaign_id);
+    }
+    //if(poll_id){ await getPollFromServer(poll_id) }
+    let index = polls.findIndex(p => p.poll_id == poll_id);
+    if (pc.campaign_type == 'trivia') {
+      index = -1;
+    }
+
+    //const campaign_complete = PollCampaignHelpers.isCampaignComplete(ps_response.polls, prs, pc)
+
     setData({
       ...data,
+      loaded: true,
+      polls: ps_response.polls.sort((a, b) => a.priority - b.priority),
+      poll_campaign: pc,
+      //show_leaders: campaign_complete,
+      active_poll_index: index >= 0 ? index : undefined,
+      poll_responses: prs
+    });
+  };
+  const getPollFromServer = async poll_id => {
+    setPollData({
+      ...poll_data,
       loading: true
     });
-    const resp = await PollApi.getPollById(poll_id);
-    const pc = await PollCampaignApi.getPollCampaignById(resp.poll.poll_campaign_id);
-    let my_response = undefined;
-    //First if there is a player_id - lets grab from the server first
-    if (player_id) {
-      my_response = await PollResponseApi.getResponseByPollId(poll_id);
-    }
+    const p = await PollApi.getPollById(poll_id);
+    let my_response = poll_responses.find(pr => pr.poll_id == poll_id);
     if (!my_response) {
       //If no-response - check cache
       let cached_response = await AsyncStorage.getItem(`response:${poll_id}`);
@@ -63,23 +113,22 @@ const FlashMarket = ({
         my_response = JSON.parse(cached_response);
       }
     }
-    setData({
+    setPollData({
+      ...poll_data,
       loading: false,
-      poll_campaign: pc,
-      poll: resp.poll,
-      poll_options: resp.poll_options,
-      poll_summaries: resp.poll_summaries,
-      poll_response: my_response,
-      show_complete: my_response && my_response?.status != 'pending' ? true : false
+      poll: p.poll,
+      poll_options: p.poll_options,
+      poll_summaries: p.poll_summaries,
+      poll_response: my_response
     });
   };
   const handleSelectOption = async po => {
-    if (!poll) {
+    if (!poll || poll.status != 'active') {
       return;
     }
     if (poll_response && poll_response.status != 'pending') {
-      return setData({
-        ...data,
+      return setPollData({
+        ...poll_data,
         show_complete: true
       });
     }
@@ -87,8 +136,8 @@ const FlashMarket = ({
     if (cached_response) {
       if (JSON.parse(cached_response).poll_option_id == po.poll_option_id) {
         await AsyncStorage.removeItem(`response:${poll_id}`);
-        return setData({
-          ...data,
+        return setPollData({
+          ...poll_data,
           poll_response: undefined
         });
       }
@@ -108,10 +157,50 @@ const FlashMarket = ({
       last_update_datetime: ''
     };
     await AsyncStorage.setItem(`response:${poll_id}`, JSON.stringify(draft_response));
+    setPollData({
+      ...poll_data,
+      poll_response: draft_response
+    });
+  };
+  const handleTimesUp = async () => {
+    if (!poll || poll.status != 'active') {
+      return;
+    }
+    if (!player_id) {
+      return;
+    }
+    if (poll_response && poll_response.status == 'pending') {
+      return handleSubmit();
+    }
+    const draft_response = {
+      poll_id: poll.poll_id,
+      poll_option_id: '0',
+      stake: poll.minimum_stake,
+      market_type: 'FREE',
+      poll_response_id: '',
+      player_id: '',
+      winnings: 0,
+      timed_out: true,
+      response_body: {},
+      status: 'pending',
+      create_datetime: '',
+      last_update_datetime: ''
+    };
+    const new_resp = await PollResponseApi.createPollResponse({
+      ...draft_response
+    });
+    const updated_ps = PollResponseHelpers.updateSummariesWithResponse(new_resp, poll_summaries);
+    setPollData({
+      ...poll_data,
+      poll_response: new_resp,
+      poll_summaries: updated_ps,
+      show_complete: true
+    });
     setData({
       ...data,
-      poll_response: draft_response
+      poll_responses: poll_responses.concat(new_resp)
     });
+    await AsyncStorage.removeItem(`response:${poll_id}`);
   };
   const handleSubmit = async () => {
     if (!poll_response) {
@@ -121,7 +210,7 @@ const FlashMarket = ({
       return;
     }
     if (!player_id) {
-      return onRequestAuthenticate();
+      return onRequestAuthenticate(poll_campaign?.auth_strategy_id, poll_campaign?.company_id);
     }
     let stake_number = parseFloat(poll_response.stake);
     if (isNaN(stake_number)) {
@@ -132,12 +221,16 @@ const FlashMarket = ({
       stake: stake_number
     });
     const updated_ps = PollResponseHelpers.updateSummariesWithResponse(new_resp, poll_summaries);
-    setData({
-      ...data,
+    setPollData({
+      ...poll_data,
       poll_response: new_resp,
       poll_summaries: updated_ps,
       show_complete: true
     });
+    setData({
+      ...data,
+      poll_responses: poll_responses.concat(new_resp)
+    });
     await AsyncStorage.removeItem(`response:${poll_id}`);
   };
 
@@ -147,15 +240,22 @@ const FlashMarket = ({
   //const correct_summary = poll_summaries.find(ps => ps.poll_option_id == correct_option?.poll_option_id);
 
   const renderPollOptions = data => {
+    const poll = polls.find(p => p.poll_id == data.item.poll_id);
+    if (!poll) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
     const selected = data.item.poll_option_id == poll_response?.poll_option_id ? true : false;
     const poll_summary = poll_summaries.find(ps => ps.poll_option_id == data.item.poll_option_id);
-    const color = PollResponseHelpers.getOptionColor(data.item, poll_response);
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableOpacity
+    const color = PollResponseHelpers.getOptionColor(poll, data.item, poll_response);
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        width: option_width
+      }
+    }, /*#__PURE__*/React.createElement(TouchableOpacity
     //disabled={poll_response && poll_response.status != 'pending' ? true : false}
     , {
       style: {
         flexDirection: 'row',
-        width: option_width,
         alignItems: 'center',
         margin: 5,
         borderRadius: 22,
@@ -190,28 +290,29 @@ const FlashMarket = ({
         marginLeft: 10,
         padding: 5,
         borderRadius: selected ? 100 : 0,
-        backgroundColor: selected ? Colors.shades.white : undefined,
-        ...view_styles.float
+        backgroundColor: selected ? Colors.shades.white : undefined
       },
       size: 12,
       color: Colors.brand.midnight,
       weight: "bold"
     }, (poll_summary.pct * 100).toFixed(), "%") : /*#__PURE__*/React.createElement(React.Fragment, null)));
   };
-  if (loading || !poll) {
+  if (!loaded || !poll_campaign) {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ActivityIndicator, {
       size: 'large',
       color: Colors.brand.midnight
     }));
   }
+  const next_allowed = PollResponseHelpers.nextAllowed(polls, poll_responses, poll?.poll_id);
+  const campaign_complete = PollCampaignHelpers.isCampaignComplete(polls, poll_responses, poll_campaign);
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      flex: 1
+      flex: 1,
+      backgroundColor: Colors.shades.white
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      backgroundColor: Colors.shades.white,
-      flexDirection: 'row'
+      flex: 1
     },
     onLayout: ev => {
       const {
@@ -223,56 +324,200 @@ const FlashMarket = ({
         width
       });
     }
-  }, !poll_response || poll_response.status != 'pending' ? /*#__PURE__*/React.createElement(View, {
+  }, show_leaders ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(ResultCard, {
+    poll_campaign_id: poll_campaign_id,
+    width: flash_size.width,
+    polls: polls,
+    poll_responses: poll_responses,
+    onClose: () => setData({
+      ...data,
+      show_leaders: false,
+      active_poll_index: 0
+    })
+  })) : !poll ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       padding: 10
     }
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
-      uri: poll.poll_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1718979933/question_mark_ro0ac5.webp'
+      uri: poll_campaign.campaign_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1718979933/question_mark_ro0ac5.webp'
     },
     style: {
       height: image_size,
       width: image_size
     },
     resizeMode: "cover"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+  })), /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 18,
+    color: Colors.brand.midnight,
+    weight: "bold"
+  }, poll_campaign.name), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 5
+    },
+    size: 16,
+    color: Colors.brand.midnight,
+    weight: "semibold"
+  }, poll_campaign.total_polls, " Questions")), campaign_complete ? /*#__PURE__*/React.createElement(Button, {
+    style: {
+      margin: 5
+    },
+    title: "RESULTS",
+    padding: 15,
+    backgroundColor: Colors.incentive.gold,
+    title_color: Colors.shades.white,
+    onPress: () => {
+      setData({
+        ...data,
+        show_leaders: true
+      });
+    }
+  }) : /*#__PURE__*/React.createElement(Button, {
+    style: {
+      margin: 5
+    },
+    title: "PLAY",
+    padding: 15,
+    backgroundColor: Colors.brand.electric,
+    title_color: Colors.shades.white,
+    onPress: () => {
+      if (poll_campaign.campaign_type == 'trivia' && !player_id) {
+        return onRequestAuthenticate(poll_campaign.auth_strategy_id, poll_campaign.company_id);
+      }
+      setData({
+        ...data,
+        active_poll_index: 0
+      });
+    }
+  })) : /*#__PURE__*/React.createElement(View, null, !hide_progress_bar && poll ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      backgroundColor: Colors.shades.shade600
+    }
+  }, /*#__PURE__*/React.createElement(CampaignProgressBar, {
+    poll_campaign: poll_campaign,
+    poll_responses: poll_responses,
+    polls: polls,
+    onPollSelect: p => {
+      if (poll.status == 'active' && (!poll_response || poll_response.status == 'pending' && poll.seconds_allowed)) {
+        return;
+      }
+      let index = polls.findIndex(ps => ps.poll_id == p.poll_id);
+      setData({
+        ...data,
+        active_poll_index: index
+      });
     },
-    nativeID: "question"
+    active_poll: poll.poll_id
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: flash_size.width,
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
+      flex: 1,
+      flexGrow: 2,
+      minWidth: 350
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
       padding: 10,
       borderBottomWidth: 1,
       borderBottomColor: Colors.shades.shade600
     }
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 10,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: poll.poll_image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1718979933/question_mark_ro0ac5.webp'
+    },
+    style: {
+      height: image_size,
+      width: image_size
+    },
+    resizeMode: "center"
+  }), poll.status == 'active' && poll.seconds_allowed && (!poll_response || poll_response.status == 'pending') ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(ResponseTimer, {
+    poll_id: poll.poll_id,
+    seconds: poll.seconds_allowed,
+    onTimesUp: () => handleTimesUp()
+  })) : /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      borderRadius: 22,
+      backgroundColor: poll.status == 'active' ? Colors.utility.success : Colors.utility.error,
+      padding: 5
+    }
+  }, poll.status == 'active' ? /*#__PURE__*/React.createElement(Icons.InProgressIcon, {
+    size: 18,
+    color: Colors.shades.white
+  }) : /*#__PURE__*/React.createElement(Icons.LockClosedIcon, {
+    size: 16,
+    color: Colors.shades.white
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginLeft: 4
+    },
+    size: 14,
+    color: Colors.shades.white
+  }, poll.status.toUpperCase()))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "large",
+    color: Colors.brand.midnight,
+    style: {
+      alignSelf: 'center'
+    }
+  }) : /*#__PURE__*/React.createElement(Text, {
     size: 16,
     color: Colors.brand.midnight,
     weight: "bold"
-  }, poll.poll_question)), /*#__PURE__*/React.createElement(View, {
+  }, poll.poll_question)))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexGrow: 1,
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     nativeID: "poll_options",
     style: {
       flex: 1,
+      maxWidth: flash_size.width,
       padding: 5,
       flexDirection: 'row',
       flexWrap: 'wrap',
-      justifyContent: 'center',
       alignItems: 'center'
     }
   }, visible_options.sort((a, b) => a.priority - b.priority).map((po, i) => {
     return renderPollOptions({
       item: po,
       index: i,
-      show_summary: poll_response && poll_response.status != 'pending' ? true : false
+      show_summary: poll_response && poll_response.status != 'pending' || poll.status == 'closed' ? true : false
     });
-  }))), poll_response?.status == 'pending' ? /*#__PURE__*/React.createElement(Spring, {
-    slide: "horizontal",
-    to: 0,
-    from: 100
-  }, /*#__PURE__*/React.createElement(View, {
+  })), poll_response?.status == 'pending' ? /*#__PURE__*/React.createElement(View, {
     style: {
+      flex: 1,
       justifyContent: 'space-between',
       backgroundColor: Colors.shades.shade600
     }
@@ -313,8 +558,8 @@ const FlashMarket = ({
     },
     autoFocus: true,
     value: poll_response.stake,
-    onChangeText: text => setData({
-      ...data,
+    onChangeText: text => setPollData({
+      ...poll_data,
       poll_response: {
         ...poll_response,
         stake: text
@@ -322,24 +567,66 @@ const FlashMarket = ({
     })
   }))) : /*#__PURE__*/React.createElement(View, {
     style: {
-      flex: 1
+      flex: 1,
+      padding: 5
     }
-  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }), /*#__PURE__*/React.createElement(View, {
     style: {
-      marginTop: 10,
-      backgroundColor: Colors.utility.success,
-      padding: 10,
-      paddingLeft: 20,
-      paddingRight: 20,
+      flexDirection: 'row'
+    }
+  }, selected_option ? /*#__PURE__*/React.createElement(Button, {
+    title: "X",
+    style: {
+      borderRadius: 0
+    },
+    padding: 15,
+    title_color: Colors.shades.white,
+    backgroundColor: Colors.utility.error,
+    onPress: () => handleSelectOption(selected_option)
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Button, {
+    title: "SUBMIT",
+    style: {
+      flex: 1,
+      borderRadius: 0
+    },
+    padding: 15,
+    title_color: Colors.shades.white,
+    backgroundColor: Colors.utility.success,
+    onPress: () => handleSubmit()
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null))))), next_allowed && !show_leaders ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      position: 'absolute',
+      bottom: 10,
+      right: 10,
+      backgroundColor: Colors.brand.electric,
+      ...view_styles.float,
+      borderRadius: 100,
+      height: 50,
+      width: 50,
       justifyContent: 'center',
       alignItems: 'center'
     },
-    onPress: () => handleSubmit()
-  }, /*#__PURE__*/React.createElement(Text, {
-    weight: "bold",
-    size: 14,
-    color: Colors.shades.white
-  }, "SUBMIT")))) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+    onPress: () => {
+      if (!active_poll_index && active_poll_index != 0) {
+        return;
+      }
+      let last_poll = active_poll_index == polls.length - 1 ? true : false;
+      if (last_poll && campaign_complete) {
+        return setData({
+          ...data,
+          show_leaders: true
+        });
+      }
+      setData({
+        ...data,
+        active_poll_index: active_poll_index + 1
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: "right",
+    color: Colors.shades.white,
+    size: 18
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default FlashMarket;
 //# sourceMappingURL=index.js.map