@s20.ai/safecam-360-rn/src/components/widgets/BottomToolbar.js

A React Native component to view the interior panorama and exterior 360 degree views of a product featuring suppport for hotspots. Compatible with Android and iOS

/*
 * Copyright © 2022 S20.AI India Pvt. Ltd.
 * Contact - origin@s20.ai
 * License - Licensed as per https://docs.s20.ai/license.html
 */
import {
  ToolBar,
  Base,
  ImageButton,
  IconButton,
} from '@s20.ai/safecam-components-rn';
import React, {useEffect, useState} from 'react';
import {connect, useDispatch} from 'react-redux';
import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions,
  SafeAreaView,
  Platform,
} from 'react-native';
import {setCurrentView} from '../../redux/actions/currentViewAction';
import constants from '../../config/constants';
import {SvgUri} from 'react-native-svg';
import {
  clearCurrentHotspot,
  setCurrentHotspot,
  setHotspotMode,
} from '../../redux/actions/currentHotspotAction';
import ToggleSwitch from 'toggle-switch-react-native';
import config from '../styleConfig';
import {triggerHapticFeedback, useScreenDimensions} from '../../utils/device';
import appStyleConfig from '../appStyleConfig';
import {responsiveAppStyleConfig} from '../responsiveAppStyleConfig';

const BottomToolbar = ({
  currentViewState,
  hotspotMode,
  combinedHotspotMetadata,
  bottomToolbarButtonPressed,
  bottomToolbarSwitchToggled,
  enableHotpsots,
  orientation,
  customFontFamily,
  exteriorDataProcessed,
  interiorDataProcessed,
}) => {
  const dispatch = useDispatch();

  const ToolbarContent = () => {
    return combinedHotspotMetadata.filter(
      d => d.hotspotType === constants.DAMAGE,
    ).length ? (
      <View
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'row',
        }}>
        {combinedHotspotMetadata.filter(
          d =>
            d.hotspotType === constants.DAMAGE &&
            d.type === currentViewState.type,
        ).length === 0 ? (
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              style={{
                width: 20,
                height: 20,
              }}
              source={{
                uri: 'https://cars24-images.s3.ap-south-1.amazonaws.com/star.png',
              }}
            />
            <Text
              style={{
                ...config.toolbar.text,
                ...{
                  fontFamily:
                    customFontFamily && customFontFamily === 'Poppins'
                      ? 'Poppins-SemiBold'
                      : 'Helvetica',
                },
              }}>{`No ${currentViewState.type} defects!`}</Text>
          </View>
        ) : (
          <>
            {enableHotpsots ? (
              <>
                <ToggleSwitch
                  isOn={hotspotMode === constants.SHOW_ALL_HOTSPOTS}
                  onColor="#0059A3"
                  offColor="#fff"
                  size="medium"
                  onToggle={isOn => {
                    triggerHapticFeedback();
                    dispatch(clearCurrentHotspot());
                    if (hotspotMode === constants.HIDE_HOTSPOTS)
                      dispatch(setHotspotMode(constants.SHOW_ALL_HOTSPOTS));
                    else dispatch(setHotspotMode(constants.HIDE_HOTSPOTS));
                    if (bottomToolbarSwitchToggled) {
                      bottomToolbarSwitchToggled(isOn);
                    }
                  }}
                  trackOffStyle={{
                    backgroundColor: '#BEBEBE',
                  }}
                />
                <View
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    ...config.toolbar.text,
                    ...{
                      fontFamily:
                        customFontFamily && customFontFamily === 'Poppins'
                          ? 'Poppins-SemiBold'
                          : 'Helvetica',
                    },
                  }}>
                  <Text
                    style={{
                      ...config.toolbar.text,
                      ...{
                        fontFamily:
                          customFontFamily && customFontFamily === 'Poppins'
                            ? 'Poppins-SemiBold'
                            : 'Helvetica',
                      },
                    }}>
                    {combinedHotspotMetadata.filter(
                      d =>
                        d.hotspotType === constants.DAMAGE ||
                        d.hotspotType === constants.FEATURE,
                    ).length > 0
                      ? 'Defects & Features'
                      : `Defects (${
                          combinedHotspotMetadata.filter(
                            d => d.hotspotType === constants.DAMAGE,
                          ).length
                        })`}
                  </Text>
                </View>
              </>
            ) : (
              <View
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Image
                  style={{
                    width: 20,
                    height: 20,
                  }}
                  source={{
                    uri: 'https://cars24-images.s3.ap-south-1.amazonaws.com/star.png',
                  }}
                />
                <Text
                  style={{
                    ...config.toolbar.text,

                    ...{
                      fontFamily:
                        customFontFamily && customFontFamily === 'Poppins'
                          ? 'Poppins-SemiBold'
                          : 'Helvetica',
                    },
                  }}>{`No ${currentViewState.type} defects!`}</Text>
              </View>
            )}
          </>
        )}
      </View>
    ) : (
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Image
          style={{
            width: 20,
            height: 20,
          }}
          source={{
            uri: 'https://cars24-images.s3.ap-south-1.amazonaws.com/star.png',
          }}
        />
        <Text
          style={{
            ...config.toolbar.text,
            ...{
              fontFamily:
                customFontFamily && customFontFamily === 'Poppins'
                  ? 'Poppins-SemiBold'
                  : 'Helvetica',
            },
          }}>{`No defects in this car!`}</Text>
      </View>
    );
  };
  const ToolbarActions = () => {
    return (
      <View>
        <ImageButton
          sx={{
            ...config.toolbar.imageButton,
            ...{
              fontStyles: {
                fontFamily:
                  customFontFamily && customFontFamily === 'Poppins'
                    ? 'Poppins-Bold'
                    : 'Helvetica',
              },
            },
          }}
          src={
            currentViewState.type === constants.EXTERIOR_VIEW
              ? 'https://cars24-images.s3.ap-south-1.amazonaws.com/safecam360/assets/interior360_toolbar_bg.png'
              : 'https://cars24-images.s3.ap-south-1.amazonaws.com/safecam360/assets/exterior360_toolbar_bg.png'
          }
          text={`View ${
            currentViewState.type === constants.EXTERIOR_VIEW
              ? constants.INTERIOR_VIEW
              : constants.EXTERIOR_VIEW
          }`}
          onPress={() => {
            triggerHapticFeedback();
            if (bottomToolbarButtonPressed) {
              bottomToolbarButtonPressed(
                currentViewState.type === constants.EXTERIOR_VIEW
                  ? constants.INTERIOR_VIEW
                  : constants.EXTERIOR_VIEW,
              );
            }

            dispatch(setCurrentHotspot(null));
            if (currentViewState.type === constants.INTERIOR_VIEW) {
              dispatch(
                setCurrentView({
                  type: constants.EXTERIOR_VIEW,
                }),
              );
            } else {
              dispatch(
                setCurrentView({
                  type: constants.INTERIOR_VIEW,
                }),
              );
            }
          }}
        />
      </View>
    );
  };

  let screenDimensions = useScreenDimensions();
  let safeAreaBottomToolbarContainerStyles =
    responsiveAppStyleConfig.stylePicker(
      'safeAreaBottomToolbarContainer',
      screenDimensions.width,
    );

  return (
    <SafeAreaView
      pointerEvents="box-none"
      style={safeAreaBottomToolbarContainerStyles}>
      <View
        pointerEvents="box-none"
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent:
            enableHotpsots && orientation.includes(constants.LANDSCAPE)
              ? 'flex-start'
              : orientation.includes(constants.LANDSCAPE)
              ? 'flex-start'
              : 'flex-end',
        }}>
        {enableHotpsots ? (
          <Base sx={config.toolbar.base}>
            <View style={{display: 'flex', flexDirection: 'row'}}>
              {ToolbarContent()}
            </View>
            {ToolbarActions()}
          </Base>
        ) : (
          Object.keys(interiorDataProcessed).length > 0 &&
          Object.keys(interiorDataProcessed).length > 0 &&
          ToolbarActions()
        )}
      </View>
    </SafeAreaView>
  );
};

const mapStateToProps = ({currentView, hotspotMode}) => {
  return {
    currentViewState: currentView.present,
    hotspotMode: hotspotMode,
    orientation: currentView.orientation,
  };
};

export default connect(mapStateToProps)(BottomToolbar);