rn-try-n-buy-abfrl/src/screens/Scene.js

Virtual try-on plugin for ABFRL

import React, { PureComponent } from "react";
import {
  View,
  StyleSheet,
  SafeAreaView,
  Image,
  Animated,
  Text,
  TouchableOpacity,
  Platform,
  FlatList,
  ActivityIndicator,
  ImageBackground
} from "react-native";
import ImageButton from "../component/ImageButton";
import axios from "axios";
import Storage from "../utils/Storage";
import StorageKeys from "../utils/StorageKeys";
import BottomPopup from "../component/BottomPopup";
import BottomPopupSize from "../component/BottomPopupSize";
import BottomPopupPersonalise from "../component/BottomPopupPersonalise";
import { FloatingAction } from "../component/floating";
import SceneUtils from "../utils/SceneUtils";
import BodyUtils from "../utils/BodyUtils";
import BodyDetails from "./BodyDetails";
import BottomPopupColorPalette from "../component/BottomPopupColorPalette";
import GuideMe from "./GuideMe";
import SnackBar from "../component/SnackBar";
import Modal from "react-native-modal"
const actions = [
  {
    text: "ADD TO BAG ",
    icon: require("../assets/images/shopping-bag.png"),
    name: "add_to_bag",
    position: 1,
  },
  {
    text: "ADD TO WISHLIST",
    icon: require("../assets/images/wishlist.png"),
    name: "add_to_wishlist",
    position: 2,
  },
];

let goToBagArr = []
let prefixSKU = ''

let male = false;

const age_group = ["2-3 YEARS", "4-6 YEARS", "7-9 YEARS", "10-12 YEARS", "13-16 YEARS"]

let guideMe_Props = {}

let previousStyle= ''
let previousStyleLingerie= ''
let previousStyleMale= ''
let previousStyleBoy= ''
let previousStyleGirl= ''

export default class Scene extends PureComponent {
  constructor(props) {
    super(props);

    this.ownProps = props;

    this.state = {
      showpopup: false,
      posY: "41%",
      popupdata: [],
      itm: "",
      SkinTone: "3",
      SkinToneMale: "3",
      Hair: "6",
      HairMale: "1",
      // HairCeleb: "6",
      lipstick: "4",
      // lipstickCeleb: "4",
      fb: 0,
      ilst: [],
      sz: "",
      sz_male: "",
      rz: 1,
      selectedType: "",
      displayFront: true,
      animationBack: new Animated.Value(20),
      animationFront: new Animated.Value(0),
      themeImg: "",
      wallBottomImg: "",
      middleImg: "",
      modelFront: "",
      modelBack: "",
      shadowImg: "",
      rowItems: 5,
      popupWidth: "",
      imgWidth: "",
      itemThumb1: "",
      itemThumb2: "",
      is_male: false,
      sizeDetails: [],
      sizeDifferences: [], //Data from getVdata()
      firstLaunch: false,
      firstLaunchMale: false,
      itemTypeList: [], //If 0 top else bottom,
      itemTypes: [],
      itemAllSizes: [], //SKUIDs for all dresses
      itemCat: [], //Name of item like 'shirts, pant, etc'
      bodyDetailsSaved: false,
      bodyDetailsSavedMale: false,
      modelSize: '',
      actions: actions,
      selectedSizeArr: [],
      showButtons: true,
      addToBagWarningBool: false,
      alertDefault: false,
      addToBagSizeErrorBool: false,
      thumbnails: [],
      lipstickArr: [],
      modelDimMale: '',
      modelDim: '',
      modelHeight: '',
      modelMargin: '',
      //Popup State
      selectedPopupData: {
        headerIndex: 0,
        skinIndex: 3,
        skinIndexMale: 3,
        hairIndex: 6,
        hairIndexMale: 1,
        lipsIndex: 4,
        backDropIndex: 14,
        backDropIndexLingerie: 14,
      },
      showBodyDetails: false,
      //Popup Color Palette
      showBottomPopup: false,
      showBottomPopupSize: false,
      showBottomPopupColorPalette: false,
      available_color: [],
      available_color_thumb: [],
      age_range_boy: 1,
      age_range_girl: 1,
      //Guide me state
      showGuideMe: false,
      guideMeProps: {},
      thumbData: [],
      showToastForNASize: false,
      showAnimation: false,
      loading: false,
    };
  }

  componentDidMount = async () => {
    prefixSKU = ''
    //Get device id
    let gender = 'Male'
    if(this.ownProps.gender == 0){
      gender = "Female"
    } else if(this.ownProps.gender == 1){
      gender = "Male"
    } else if(this.ownProps.gender == 2){
      gender = "Boy"
    } else if(this.ownProps.gender == 3){
      gender = "Girl"
    } 
    SceneUtils.callLogEventTNB(this.ownProps.uuid, 'ProductViewEvent', `{styleID: ${this.ownProps.styleid}-${this.ownProps.colorcode}, StyleCollection: CataloguePage, Gender: ${gender} }`) //TNB log
    male = true
    if (this.ownProps && this.ownProps.styleid) {
      goToBagArr = []

      if (this.ownProps.gender != "1") {
        male = false
      }
      // this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.VTR_LANDING_PAGE, `{styleID: ${this.state.itm}}`) //M&S log

      //Wishlist check
      let _actions = this.state.actions
      if (this.ownProps.isWishlisted) {
        _actions[1].text = 'GO TO WISHLIST'
        _actions[1].name = 'go_to_wishlist'
      } else {
        _actions[1].text = 'ADD TO WISHLIST'
        _actions[1].name = 'add_to_wishlist'
      }
      // this.setState({ itm: this.ownProps.styleid, available_sizes: this.ownProps.available_sizes, is_male: male, action: _actions });
      this.setState({ itm: (this.ownProps.colorcode && this.ownProps.colorcode !== '') ? `${this.ownProps.styleid}-${this.ownProps.colorcode}` : this.ownProps.styleid, available_sizes: this.ownProps.available_sizes, is_male: male, action: _actions });
      this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.VTR_LANDING_PAGE, `{styleID: ${this.state.itm}-${this.ownProps.colorcode}}`) //M&S log
    }

    this.getThumbs()
    //First get the previous theme and set it in view and then call callTheme
    if (this.ownProps.category != "1") {
      Storage.retrieveData("themeResp", async (value) => {
        if (value != null) {
          const themeResp = JSON.parse(value);
          await this.setState({
            themeImg: `data:image/png;base64,${themeResp.tImage}`,
            wallBottomImg: `data:image/png;base64,${themeResp.bImage}`,
            middleImg: `data:image/png;base64,${themeResp.mImage}`,
          });
        } else {
          this.callTheme()
        }
      });
    } else {
      Storage.retrieveData("themeRespLingerie", async (value) => {
        if (value != null) {
          const themeResp = JSON.parse(value);
          await this.setState({
            themeImg: `data:image/png;base64,${themeResp.tImage}`,
            wallBottomImg: `data:image/png;base64,${themeResp.bImage}`,
            middleImg: `data:image/png;base64,${themeResp.mImage}`,
          });
        } else {
          this.callTheme()
        }
      });
    }

    if (this.ownProps.category == "1") {
      Storage.retrieveData(StorageKeys.THEME_KEY_LINGERIE, async (value) => {
        let _selectedPopupData = this.state.selectedPopupData
        if (value != null) {
          _selectedPopupData.backDropIndexLingerie = value
          await this.setState({ selectedPopupData: _selectedPopupData })
        }
      });
    } else {
      Storage.retrieveData(StorageKeys.THEME_KEY, async (value) => {
        let _selectedPopupData = this.state.selectedPopupData
        if (value != null) {
          _selectedPopupData.backDropIndex = value
        } else {
          _selectedPopupData.backDropIndex = "14"
        }
        await this.setState({ selectedPopupData: _selectedPopupData })
      })
    }

    if(this.state.showAnimation){
      this.startAnimationBack(30);
      this.startAnimationFront(-30);
    }

    if (this.ownProps.gender == "1") {
      Storage.retrieveData("modelDimMale", (value) => {
        if (value != null) {
          const dim = JSON.parse(value)
          Storage.retrieveData("modelPrevMale", (value1) => {
            if (value1 != null) {
              const model = JSON.parse(value1)
              this.setState({
                modelFront: `data:image/png;base64,${model.front}`, modelBack: `data:image/png;base64,${model.back}`,
                modelHeight: dim.height, modelMargin: dim.margin
              });
            }
          });
        }
      });
    } else if (this.ownProps.gender == "0") {
        if(this.ownProps.category == "1"){
          Storage.retrieveData("modelPrevLingerie", (value) => {
            if (value != null) {
              const model = JSON.parse(value)
              this.setState({
                modelFront: `data:image/png;base64,${model.front}`, modelBack: `data:image/png;base64,${model.back}`
              });
            }
          });
        }else{
          Storage.retrieveData("modelDim", (value) => {
            if (value != null) {
              const dim = JSON.parse(value)
              Storage.retrieveData("modelPrev", (value1) => {
                if (value1 != null) {
                  const model = JSON.parse(value1)
                  this.setState({
                    modelFront: `data:image/png;base64,${model.front}`, modelBack: `data:image/png;base64,${model.back}`,
                    modelHeight: dim.height, modelMargin: dim.margin
                  });
                }
              });
            }
          });
        }
    } else if (this.ownProps.gender == "2") {
      Storage.retrieveData("modelPrevBoy", (value) => {
        if (value != null) {
          const model = JSON.parse(value)
          this.setState({
            modelFront: `data:image/png;base64,${model.front}`, modelBack: `data:image/png;base64,${model.back}`
          });
        }
      });
    } else if (this.ownProps.gender == "3") {
      Storage.retrieveData("modelPrevGirl", (value) => {
        if (value != null) {
          const model = JSON.parse(value)
          this.setState({
            modelFront: `data:image/png;base64,${model.front}`, modelBack: `data:image/png;base64,${model.back}`
          });
        }
      });
    }

    this.callMethods(true, true)

    this.animatedValue = new Animated.Value(0);
    this.frontInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ["180deg", "360deg"],
    });
  };

  callMethods = (call_available_colors_api, checkSize) => {
    let bodyDetails = {}
    if (this.ownProps.gender == "1") {
      Storage.retrieveData("bodyDetailsMale", async (value) => {
        if (value != null) {
          bodyDetails = JSON.parse(value)
          await this.setState({ bodyDetailsSavedMale: bodyDetails?.bodyDetailsSavedMale, sz_male: bodyDetails?.sz_male })
        }
        this.getVData(call_available_colors_api, checkSize)
      });

      Storage.retrieveData("firstLaunchMale", (value) => {
        if (value != null) {
          this.setState({ firstLaunchMale: false, showButtons: true });
        } else {
          this.setState({ firstLaunchMale: true, showButtons: true });
        }
      });
      // SceneUtils.callLogEventTNB(this.ownProps.uuid, SceneUtils.VTR_SCREEN_LOAD, `{styleID: ${this.state.itm}, sessionID: ${this.ownProps.sessionid}, deviceID: ${this.ownProps.deviceid}, recommendation: ${!bodyDetails?.bodyDetailsSavedMale ? 'Non Personalised' : 'Personalised'}, recommended_sizes: ${''}}`) //TNB log
    } else if (this.ownProps.gender == "0") {
      Storage.retrieveData("bodyDetails", async (value) => {
        if (value != null) {
          bodyDetails = JSON.parse(value)
          console.log("🚀 ~ file: Scene.js:348 ~ Scene ~ Storage.retrieveData ~ bodyDetails", bodyDetails)
          await this.setState({ bodyDetailsSaved: bodyDetails?.bodyDetailsSaved, sz: bodyDetails?.sz })
        }
        this.getVData(call_available_colors_api, checkSize)
        this.callTheme() //In case we have trasitioned from celeb
      });

      Storage.retrieveData("firstLaunch", (value) => {
        if (value != null) {
          this.setState({ firstLaunch: false, showButtons: true });
        } else {
          this.setState({ firstLaunch: true, showButtons: true });
        }
      });
      // SceneUtils.callLogEventTNB(this.ownProps.uuid, SceneUtils.VTR_SCREEN_LOAD, `{styleID: ${this.state.itm}, sessionID: ${this.ownProps.sessionid}, deviceID: ${this.ownProps.deviceid}, recommendation: ${!bodyDetails?.bodyDetailsSaved ? 'Non Personalised' : 'Personalised'}, recommended_sizes: ${''}}`) //TNB log
    } else {
      this.getVData(call_available_colors_api, checkSize)
    }


    setTimeout(function() { //Start the timer
      this.setState({sakshiDisabled: false}) //After 1 second, set render to true
    }.bind(this), 2000)
  }

  getThumbs = () => {
    axios.get(
      `${SceneUtils.BASE_URL}/api/getthumbs`
    )
      .then((response) => {
        console.log("🚀 ~ Scene ~ .then ~ getThumbs response:", response.data)
        this.setState({ thumbnails: response.data })
      }).catch((error) => {
        console.log(error);
      });
  }

  getLipstick = (skinTone, call_available_colors_api) => {
    // console.log('getLipstick ', skinTone)
    axios.get(
      `${SceneUtils.BASE_URL}/api/getlipstick/${skinTone}`
    ).then((response) => {
      // console.log('getLipstick response ', response.data)
      this.setState({ lipstickArr: response.data }, () =>
        this.callVData(prefixSKU, call_available_colors_api, false, ''))
    }).catch((error) => {
      console.log(error);
    });
  }

  getVData = (call_available_colors_api, checkSize) => {

    if (this.ownProps.gender == "0") {
      if(this.ownProps.category == "1"){
        Storage.retrieveData("previousStyleLingerie", value => {
          if(value != null) previousStyleLingerie = value
          else previousStyleLingerie = ''
        })
        //Lingerie
        Storage.retrieveData(StorageKeys.GETVDATA_BODY_LINGERIE, async (value) => {
          if (value != null) {
            const body = JSON.parse(value);
            let _selectedPopupData = this.state.selectedPopupData
            _selectedPopupData.hairIndex = body.P3
            await this.setState({
              // previousStyleLingerie : body.P1,
              Hair: body.P3
            });
          }
          this.callVData(prefixSKU, call_available_colors_api, false, '')
        });
      }else{
        Storage.retrieveData("previousStyle", value => {
          if(value != null) previousStyle = value
          else previousStyle = ''
        })
        if (this.state.bodyDetailsSaved) {
          Storage.retrieveData(StorageKeys.GETVDATA_BODY, async (value) => {
            let _skinTone = this.state.skinTone
            if (value != null) {
              const body = JSON.parse(value);
              let _selectedPopupData = this.state.selectedPopupData
              _selectedPopupData.skinIndex = body.P2 === '' ? '3' : body.P2,
                _selectedPopupData.hairIndex = body.P3,
                _selectedPopupData.lipsIndex = body.P4,
                await this.setState({
                  selectedPopupData: _selectedPopupData,
                  SkinTone: body.P2 === '' ? '3' : body.P2,
                  Hair: body.P3,
                  lipstick: body.P4,
                  // previousStyle: body.P1
                }, () => _skinTone = body.P2 === '' ? '3' : body.P2);
            }
            if (_skinTone)
              this.getLipstick(_skinTone, call_available_colors_api)
            else
              this.callVData(prefixSKU, call_available_colors_api, false, '')
          });

          // this.callVData(prefixSKU, call_available_colors_api, false, '')
        } 
        // else {
        //   Storage.retrieveData(StorageKeys.GETVDATA_BODY_CELEB, async (value) => {
        //     if (value != null) {
        //       const body = JSON.parse(value);
        //       let _selectedPopupData = this.state.selectedPopupData
        //       _selectedPopupData.hairIndex = body.P6,
        //         _selectedPopupData.lipsIndex = body.P3,
        //         await this.setState({
        //           selectedPopupData: _selectedPopupData,
        //           HairCeleb: body.P6,
        //           lipstickCeleb: body.P3,
        //           // previousStyle: body.P1
        //         });
        //     }
        //     this.callVData(prefixSKU, call_available_colors_api, false, '')
        //   });
        // }
      }
    } else if (this.state.is_male) {
      Storage.retrieveData("previousStyleMale", value => {
        if(value != null) previousStyleMale = value
        else previousStyleMale = ''
      })
      Storage.retrieveData(StorageKeys.GETVDATA_BODY_MALE, async (value) => {
        if (value != null) {
          const body = JSON.parse(value);
          let _selectedPopupData = this.state.selectedPopupData
          _selectedPopupData.hairIndexMale = body.P3,
            _selectedPopupData.skinIndexMale = body.P2 === '' ? '3' : body.P2,
            await this.setState({
              selectedPopupData: _selectedPopupData,
              HairMale: body.P3,
              SkinToneMale: body.P2 === '' ? '3' : body.P2,
              // previousStyleMale: body.P1
            });
        }
        this.callVData(prefixSKU, call_available_colors_api, false, '')
      });
        // this.callVData(prefixSKU, call_available_colors_api, false, '')
    } else if (this.ownProps.gender == "2") {
      Storage.retrieveData("previousStyleBoy", value => {
        if(value != null) previousStyleBoy = value
        else previousStyleBoy = ''
      })
      Storage.retrieveData(StorageKeys.GETVDATA_BODY_BOY, async (value) => {
        if (value != null) {
          const body = JSON.parse(value);
          await this.setState({
            age_range_boy: body.P7,
            // previousStyleBoy: body.P1
          });
        }
        this.callVData(prefixSKU, call_available_colors_api, false, '')
      });
    } else if (this.ownProps.gender == "3") {
      Storage.retrieveData("previousStyleGirl", value => {
        if(value != null) previousStyleGirl = value
        else previousStyleGirl = ''
      })
      Storage.retrieveData(StorageKeys.GETVDATA_BODY_GIRL, async (value) => {
        if (value != null) {
          const body = JSON.parse(value);
          await this.setState({
            age_range_girl: body.P7,
            // previousStyleGirl: body.P1
          });
        }
        this.callVData(prefixSKU, call_available_colors_api, false, '')
      });
    }
  };

  callVData = (prefixSKU, call_available_colors_api, itemRemoved, _P6) => {
    const {
      lipstick,
      is_male,
      lipstickArr
    } = this.state;

    const { gender, category, uuid } = this.ownProps

    let _lipstick = lipstick
    if (lipstickArr.lipstick && Array.isArray(lipstickArr.lipstick)) {
      const _lipstickObj = lipstickArr.lipstick.find(c => c.id == lipstick)
      if (!_lipstickObj) {
        _lipstick = lipstickArr.lipstick[0].id
        let _selectedPopupData = this.state.selectedPopupData
        _selectedPopupData.lipsIndex = _lipstick,
          this.setState({
            selectedPopupData: _selectedPopupData
          });
      }
    }
    const body = this.getVdataBody(prefixSKU, _lipstick, itemRemoved, _P6)

    console.log("🚀 ~ file: Scene.js ~ line 417 ~ Scene ~ body", body)

    this.ownProps.logEvent(uuid, SceneUtils.GETVDATA_CALLED, `{request: ${JSON.stringify(body)}}`) //M&S log

    // const url = `${SceneUtils.BASE_URL}/${!this.state.bodyDetailsSaved && gender == "0" ? "api/getcelebvirtual/getvirtualdata" : "api/virtual/getVirtualData"}`
    let url = ''

    // if (category == '1' && gender == "0") {
    //   url = `${SceneUtils.BASE_URL}/api/virtualLingerie/getVirtualData`
    // } else if (!this.state.bodyDetailsSaved && gender == "0") {
    //   url = `${SceneUtils.BASE_URL}/api/getcelebvirtual/getvirtualdata`
    // } else {
    url = `${SceneUtils.BASE_URL}/api/virtual/getVirtualData`
    // }
    console.log("🚀 ~ file: Scene.js ~ line 433 ~ Scene ~ url", url)
    
    // ->> Add : For all categories
    // if (this.state.bodyDetailsSaved && gender == "0" && category != "1") {
    //   Storage.saveItem(StorageKeys.GETVDATA_BODY, JSON.stringify(body));
    // } else if (this.state.is_male) {
    //   Storage.saveItem(StorageKeys.GETVDATA_BODY_MALE, JSON.stringify(body));
    // } else if (gender == "2") {
    //   Storage.saveItem(StorageKeys.GETVDATA_BODY_BOY, JSON.stringify(body));
    // } else if (gender == "3") {
    //   Storage.saveItem(StorageKeys.GETVDATA_BODY_GIRL, JSON.stringify(body));
    // } else if(gender == "0" && category == "1"){
    //   Storage.saveItem(StorageKeys.GETVDATA_BODY_LINGERIE, JSON.stringify(body));
    // }else {
    //   Storage.saveItem(StorageKeys.GETVDATA_BODY_CELEB, JSON.stringify(body));
    // }
    // ->> Add : For all categories
    
    // ->> Remove : For all categories
    if (this.state.is_male) {
      Storage.saveItem(StorageKeys.GETVDATA_BODY_MALE, JSON.stringify(body));
    } else {
      Storage.saveItem(StorageKeys.GETVDATA_BODY, JSON.stringify(body));
    }
    // ->> Remove : For all categories

    this.setState({loading: true})

    axios
      .post(
        url,
        body,
        {
          headers: {
            AuthID: "123",
            UID: this.ownProps.uuid
          },
        }
      )
      .then((response) => {
        console.log("🚀 ~ file: Scene.js:581 ~ Scene ~ .then ~ response", response.data)
        this.setState({loading: false})
        if (call_available_colors_api && response.data.availableSets && Array.isArray(response.data.availableSets)) {
          if(response.data.availableSets.length < 2){
            this.getAvailableColors()
          }else{
            var thumbs = []
            for (var i = 0; i < response.data.availableSets.length; i++) {
              thumbs.push(`${SceneUtils.PLUGIN_URL}/lingerie/images/${response.data.availableSets[i]}.jpg`)
            }
            this.setState({ available_color: response.data.availableSets, available_color_thumb: thumbs })
          }
        }

        let itemsThumb = response.data.thumb;
        let item1Thumb, item2Thumb = "";
        if(itemsThumb){
          if (itemsThumb.length > 0) item1Thumb = itemsThumb[0];
          if (itemsThumb.length == 2) item2Thumb = itemsThumb[1];
        }

        var model = {};
        model.front = response.data?.fImage;
        model.back = response.data?.bImage;
        
        let _previousStyle = null
        if(response.data.itemList && Array.isArray(response.data.itemList)) _previousStyle = response.data.itemList?.join()
        else _previousStyle = response.data.itemList

        if (gender == "1") {
          Storage.saveItem("modelPrevMale", JSON.stringify(model));
          Storage.saveItem("previousStyleMale", _previousStyle);
        } else if (gender == "0") {
          if(category == "1"){
            Storage.saveItem("modelPrevLingerie", JSON.stringify(model));
            Storage.saveItem("previousStyleLingerie", _previousStyle);
          }else{
            Storage.saveItem("modelPrev", JSON.stringify(model));
            Storage.saveItem("previousStyle", _previousStyle);
          }  
        } else if (gender == "2") {
          Storage.saveItem("modelPrevBoy", JSON.stringify(model));
          Storage.saveItem("previousStyleBoy", _previousStyle);
        } else if (gender == "3") {
          Storage.saveItem("modelPrevGirl", JSON.stringify(model));
          Storage.saveItem("previousStyleGirl", _previousStyle);
        }

        var dim = {};
        dim.height = response.data?.modelHeight;
        dim.margin = response.data?.modelMargin;
        if (is_male) {
          Storage.saveItem("modelDimMale", JSON.stringify(dim));
        } else {
          Storage.saveItem("modelDim", JSON.stringify(dim));
        }

        //Save celebrity size data in bodyDetails
        if (!this.state.is_male && !this.state.bodyDetailsSaved && response.data.modelSize && response.data.modelSize !== '' && gender == "0" && category != "1") {
          const dimArr = response.data.modelSize.split(',')
          Storage.saveItem("bodyDetails", JSON.stringify({
            heightFeet: dimArr[0].split('.')[0],
            heightInch: dimArr[0].split('.')[1],
            waist: dimArr[4],
            hip: dimArr[5],
            weight: dimArr[1],
            bandSize: dimArr[2],
            cupSize: dimArr[3],
            selectedHeaderIndex: dimArr[6],
            bodyShapeIndex: 0,
            bodyDetailsSaved: this.state.bodyDetailsSaved
          }))
        } 
        else if (this.state.is_male && !this.state.bodyDetailsSavedMale && response.data.modelSize && response.data.modelSize !== '') {
          const dimArr = response.data.modelSize.split(',')
          Storage.saveItem("bodyDetailsMale", JSON.stringify({
            heightFeetMale: dimArr[0].split('.')[0],
            heightInchMale: dimArr[0].split('.')[1],
            waistMale: dimArr[4],
            hipMale: dimArr[5],
            weightMale: dimArr[1],
            chestSize: dimArr[2],
            bodyDetailsSavedMale: true
          }))
        }

        //Get the index of sizeDetails selected
        let sizeDetailsDefaultIndex = 1

        let _selectedSizeArr = []
        response.data.sizeDetails.map((item, index) => {
            if (response.data.itemList.split(',')[index]?.includes('minus')) {
              sizeDetailsDefaultIndex = 0
            } else if (response.data.itemList.split(',')[index]?.includes('plus')) {
              sizeDetailsDefaultIndex = 2
            }else sizeDetailsDefaultIndex = 1
            let _selectedSize = item.includes(';') ? item.split(';')[sizeDetailsDefaultIndex] : item.split(';')[0]
          _selectedSizeArr.push(_selectedSize)
        })

        let _sizeDetailsIndex = 0, _sizePositionIndex = 0
          if (response.data.itemList) { //Get the index of selected item from M&S whether top or bottom
            if (response.data.itemList) {
              _sizeDetailsIndex = response.data.itemList?.split(',').findIndex(x => x == `${this.state.itm}${prefixSKU}`)
              if(_sizeDetailsIndex == -1) _sizeDetailsIndex = 0
              let index = response.data.itemList?.split(',').findIndex(x => x == `${this.state.itm}${prefixSKU}`)
              _sizePositionIndex = response.data.itemTypeList[index]
            }else{
              _sizePositionIndex = response.data.itemTypeList[0]
            }
          }

          //Get the index of sizeDetails selected
          if (body.P1 && body.P1.includes('minus')) {
            sizeDetailsDefaultIndex = 0
          } else if (body.P1 && body.P1.includes('plus')) {
            sizeDetailsDefaultIndex = 2
          }
          const sizeD = response.data.sizeDetails

          //By default from response
          let _selectedSize = (sizeD[_sizeDetailsIndex] && sizeD[_sizeDetailsIndex].includes(';')) ? sizeD[_sizeDetailsIndex] && sizeD[_sizeDetailsIndex].split(';')[sizeDetailsDefaultIndex] : sizeD[_sizeDetailsIndex] //Middle one is recommended one
          if (_selectedSize == 'NA') _selectedSize = sizeD[_sizeDetailsIndex].split(';')[sizeDetailsDefaultIndex + 1]
          if (_selectedSize == 'NA') _selectedSize = sizeD[_sizeDetailsIndex].split(';')[sizeDetailsDefaultIndex - 1]

        if(response.data.sizeDetails){
          if(response.data.sizeDetails[0].split(';').length> 1){
            let centerSize = response.data.sizeDetails[0].split(';')[parseInt((response.data.sizeDetails.length/2).toFixed(), 10)]
            if(centerSize == 'NA'){
              this.setState({showToastForNASize: true})
              this.displaySnackBar()
              setTimeout(() =>{
                this.setState({showToastForNASize: false})
              }, 5000)
            }
          }
        }

        this.setState({
          modelFront: `data:image/png;base64,${response.data.fImage}`,
          shadowImg: `data:image/png;base64,${response.data.sImage}`,
          modelBack: `data:image/png;base64,${response.data.bImage}`,
          itemThumb1: `data:image/png;base64,${item1Thumb}`,
          itemThumb2: `data:image/png;base64,${item2Thumb}`,
          ilst: response.data.itemList,
          sizeDetails: sizeD,
          sizeDetailsIndex: _sizeDetailsIndex,
          sizePositionIndex: _sizePositionIndex,
          selectedSize: _selectedSize,
          sizeDifferences: response.data.sizeDifference,
          itemTypeList: response.data.itemTypeList,
          itemList: response.data.itemList,
          itemCat: response.data.itemCat,
          itemTypes: response.data.itemTypes,
          itemAllSizes: response.data.itemAllSizes,
          modelSize: response.data.modelSize,
          selectedSizeArr: _selectedSizeArr,
          modelHeight: response.data.modelHeight,
          modelMargin: response.data.modelMargin,
          thumbData: response.data.thumb
        });
      })
      .catch((error) => {
        console.log(error);
        this.setState({loading: false})
      });
  }

  displaySnackBar = () => {
    this.refs.ReactNativeSnackBar.ShowSnackBarFunction("No recommendation available for selected body size. Model is wearing nearest available size.");
  };

  getAvailableColors = () => {
    let url = ''
    if(this.ownProps.category == "1"){
      url = `${SceneUtils.BASE_URL}/api/GetAllColorsLingeries?sku=${this.state.itm}`
    }else {
      url = `${SceneUtils.BASE_URL}/api/GetAllColors?sku=${this.state.itm}`
    }
    axios.get(
      url
    )
      .then((response) => {
        if (response.data && response.data.result && Array.isArray(response.data.result)) {
          var thumbs = []
          for (var i = 0; i < response.data.result.length; i++) {
            thumbs.push(`${SceneUtils.PLUGIN_URL}/images/color/${response.data.result[i]}.jpg`)
          }

          this.setState({ available_color: response.data.result, available_color_thumb: thumbs })
        }
      }).catch((error) => {
        console.log(error);
      });
  }

  getVdataBody = (prefixSKU, _lipstick, itemRemoved, _P6) => {
    const { bodyDetailsSaved, is_male,  itm, SkinToneMale, SkinTone, HairMale, Hair,
      sz_male, sz, lipstickCeleb, HairCeleb, rz, age_range_boy, age_range_girl } = this.state
    const { gender, category } = this.ownProps
    let body = {}
    if (gender == "1" || gender == "0") {
      //For male and female
      if (bodyDetailsSaved || is_male || category == '1') {
        body = {
          P1: itemRemoved ? '' : `${itm}${prefixSKU}`,
          P2: category == '1' ? '1' : (is_male ? SkinToneMale : SkinTone), //Skin 
          P3: is_male ? HairMale : Hair, //Hair
          P4: is_male ? '' : _lipstick, //lipstick
          P5: 0, //front/back - pass 0 always
          P6: itemRemoved ? _P6 : (category == '1' ? previousStyleLingerie : (is_male ? previousStyleMale : previousStyle)), //itemlist
          P7: is_male ? sz_male : sz, //size for model
          P8: rz, // rz is always 1 for model
          P10: gender, //gender
          P14: this.ownProps.category ? this.ownProps.category : 0, //category - default 0 
          P16: 0 // default 1
        };
      } 
      // else {
      //   //Celeb
      //   body = {
      //     P1: `${itm}${prefixSKU}`,
      //     P2: '',
      //     P3: lipstickCeleb,
      //     P4: 0,
      //     P5: itemRemoved ? _P6 : previousStyle,
      //     P6: HairCeleb,
      //     P7: '', //hair accessories for celeb
      //     P8: '', // scarves for celeb
      //     P9: '', //sunglasses for celeb
      //   };
      // }
    } else {
      body = {
        P1: `${itm}`,
        P2: '',
        P3: '',
        P4: '',
        P5: 0,
        P6: gender == "2" ? previousStyleBoy : previousStyleGirl, //itemlist
        P7: gender == "2" ? age_range_boy : age_range_girl,
        P8: rz, // rz is always 1 for model
        P10: gender, //gender
        P14: this.ownProps.category ? this.ownProps.category : 0, //category - default 0 
        P16: 0 // default 1
      };
    }

    return body
  }

  callTheme = () => {
    const themeID = this.ownProps.category == "1" ? this.state.selectedPopupData.backDropIndexLingerie : this.state.selectedPopupData.backDropIndex

    axios
      .get(
        `${SceneUtils.BASE_URL}/api/GetTI/get?id=${themeID}`
      )
      .then((response) => {

        Storage.saveItem(this.ownProps.category == '1' ? "themeRespLingerie" : "themeResp", JSON.stringify(response.data));
        this.setState({
          themeImg: `data:image/png;base64,${response.data.tImage}`,
          wallBottomImg: `data:image/png;base64,${response.data.bImage}`,
          middleImg: `data:image/png;base64,${response.data.mImage}`,
        });
      })
      .catch((error) => {
        console.log(`Theme error: ${error}`);
      });

    this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.CHANGE_THEME, `{themeId: ${themeID}}`) //M&S log
  }

  editBody = () => {
    if (this.ownProps.gender == "2" || this.ownProps.gender == "3") {
      this.setState({ showBottomPopupPersonalize: true })
    } else {
      this.setState({ showBodyDetails: true })
      this.state.is_male ? Storage.saveItem('firstLaunchMale', "0") : Storage.saveItem('firstLaunch', "0")
      this.setState({ addToBagWarningBool: false })
    }

    this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.EDIT_BODY_WIDGET_CLICK, '')
  };

  onImageButtonClicked = (itemClicked) => {
    if (itemClicked === 'customize') {
      this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.CUSTOMIZE_WIDGET_CLICK, '')
    }
    else if (itemClicked === 'size') {
      this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.SIZE_WIDGET_CLICK, '')
    } else if (itemClicked === 'palette') {
      this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.OPTION_WIDGET_CLICK, '')
    }
    if(itemClicked === 'size' && (this.ownProps.gender == '2' || this.ownProps.gender == '3')) return
    this.state.is_male ? Storage.saveItem('firstLaunchMale', "0") : Storage.saveItem('firstLaunch', "0")
    if (this.state.sizeDetails && this.state.sizeDetails[0] && this.state.sizeDetails[0].split(';').length > 0) {
      this.state.is_male ? this.setState({
        showBottomPopup: itemClicked === "customize" ? true : false,
        showBottomPopupSize: itemClicked === "size" ? true : false,
        showBottomPopupColorPalette: itemClicked === "palette" ? true : false,
        showButtons: false,
        firstLaunchMale: false,
        addToBagWarningBool: false
      }) :
        this.setState({
          showBottomPopup: itemClicked === "customize" ? true : false,
          showBottomPopupSize: itemClicked === "size" ? true : false,
          showBottomPopupColorPalette: itemClicked === "palette" ? true : false,
          showButtons: false,
          firstLaunch: false,
          addToBagWarningBool: false
        })
    } else {
      //Show alert for not fit
      this.setState({ alertDefault: true, message: `These sizes will not fit you.` })
      setTimeout(() => {
        this.setState({ alertDefault: false })
      }, 2000);
    }
  };

  startAnimationBack = (value) => {
    Animated.timing(this.state.animationBack, {
      toValue: value,
      duration: 8000,
      useNativeDriver: true,
    }).start((o) => {
      if (o.finished) {
        this.setState({ animationBack: new Animated.Value(value) });
        if (value == 30) this.startAnimationBack(0);
        else this.startAnimationBack(30);
      }
    });
  };

  startAnimationFront = (value) => {
    Animated.timing(this.state.animationFront, {
      toValue: value,
      duration: 8000,
      useNativeDriver: true,
    }).start((o) => {
      this.setState({ animationFront: new Animated.Value(value) });
      if (o.finished) {
        if (this.state.animationFront == -30) this.startAnimationFront(0);
        else this.startAnimationFront(-30);
      }
    });
  };

  selectedOption = (type, itemid) => {
    console.log("🚀 ~ file: Scene.js ~ line 890 ~ Scene ~ type", type, itemid)
    // SceneUtils.callLogEventTNB(this.ownProps.uuid, SceneUtils.CUSTOMISE_TAB_ITEMS_CLICK, `{styleID: ${this.state.itm}, sessionID: ${this.ownProps.sessionid}, deviceID: ${this.ownProps.deviceid}, customize_tab_name: ${type} customize_tab_item: ${itemid}}`) //TNB log
    let gender = 'Male'
    if(this.ownProps.gender == 0){
      gender = "Female"
    } else if(this.ownProps.gender == 1){
      gender = "Male"
    } else if(this.ownProps.gender == 2){
      gender = "Boy"
    } else if(this.ownProps.gender == 3){
      gender = "Girl"
    }
    const {
      itm,
      SkinTone,
      SkinToneMale,
      Hair,
      HairMale,
      // HairCeleb,
      lipstick,
      // lipstickCeleb,
      sz,
      sz_male,
      rz,
      is_male,
    } = this.state;
    //Save in async for theme
    if (type === "backDropIndex") {
      Storage.saveItem(StorageKeys.THEME_KEY, `${itemid}`, () => {
        this.callTheme();
      })
    } else if (type === "backDropIndexLingerie") {
      Storage.saveItem(StorageKeys.THEME_KEY_LINGERIE, `${itemid}`, () => {
        this.callTheme();
      });
    } else {
      //For others save in a JSON object for body of getVData
      let body = this.getVdataBody(prefixSKU, lipstick, false, '')
      if(this.ownProps.category == "1"){
        Storage.retrieveData(StorageKeys.GETVDATA_BODY_LINGERIE, (value) => {
          if (value != null) body = JSON.parse(value);
        });
      } else if (this.state.bodyDetailsSaved) {
        Storage.retrieveData(StorageKeys.GETVDATA_BODY, (value) => {
          if (value != null) body = JSON.parse(value);
        });
      } else if (this.state.is_male) {
        Storage.retrieveData(StorageKeys.GETVDATA_BODY_MALE, (value) => {
          if (value != null) body = JSON.parse(value);
        });
      } 
      // else {
      //   Storage.retrieveData(StorageKeys.GETVDATA_BODY_CELEB, (value) => {
      //     if (value != null) body = JSON.parse(value);
      //   });
      // }

      switch (type) {
        case "hairIndex":
          if (this.state.bodyDetailsSaved || this.ownProps.category == "1") body.P3 = itemid + "";
          else body.P6 = itemid + "";
          // this.state.bodyDetailsSaved ? this.setState({ Hair: itemid, [type]: itemid }) : this.setState({ HairCeleb: itemid, [type]: itemid });
          this.setState({ Hair: itemid, [type]: itemid })
          SceneUtils.callLogEventTNB(this.ownProps.uuid, 'ProfileUpdateEvent', `{Gender: ${gender}, SkinTonePatchID: ${gender == 'Male' ? this.state.SkinToneMale : this.state.SkinTone}, HairStyleID: ${itemid}}`) //TNB log
          break;
        case "hairIndexMale":
          body.P3 = itemid + "";
          this.setState({ HairMale: itemid, [type]: itemid });
          SceneUtils.callLogEventTNB(this.ownProps.uuid, 'ProfileUpdateEvent', `{Gender: ${gender}, SkinTonePatchID: ${gender == 'Male' ? this.state.SkinToneMale : this.state.SkinTone}, HairStyleID: ${itemid}}`) //TNB log
          break;
        case "skinIndex":
          if (this.state.bodyDetailsSaved) body.P2 = itemid + "";
          this.setState({ SkinTone: itemid, [type]: itemid }, this.getLipstick(itemid, false));
          SceneUtils.callLogEventTNB(this.ownProps.uuid, 'ProfileUpdateEvent', `{Gender: ${gender}, SkinTonePatchID: ${itemid}, HairStyleID: ${gender == 'Male' ? this.state.HairMale : this.state.Hair}}`) //TNB log
          break;
        case "skinIndexMale":
          body.P2 = itemid + "";
          this.setState({ SkinToneMale: itemid, [type]: itemid });
          SceneUtils.callLogEventTNB(this.ownProps.uuid, 'ProfileUpdateEvent', `{Gender: ${gender}, SkinTonePatchID: ${itemid}, HairStyleID: ${gender == 'Male' ? this.state.HairMale : this.state.Hair}}`) //TNB log
          break;
        case "lipsIndex":
          if (this.state.bodyDetailsSaved || is_male) body.P4 = itemid + "";
          else body.P3 = itemid + "";
          // this.state.bodyDetailsSaved ? this.setState({ lipstick: itemid, [type]: itemid }) : this.setState({ lipstickCeleb: itemid, [type]: itemid });
          this.setState({ lipstick: itemid, [type]: itemid })
          break;
      }

      if(this.ownProps.category == "1"){
        Storage.saveItem(StorageKeys.GETVDATA_BODY_LINGERIE, JSON.stringify(body), () => {
          if (type !== "headerIndex") this.getVData(false, true)
        });
      }else if (this.state.bodyDetailsSaved) {
        Storage.saveItem(StorageKeys.GETVDATA_BODY, JSON.stringify(body), () => {
          if (type !== "headerIndex") this.getVData(false, true)
        });
      } else if (this.state.is_male) {
        Storage.saveItem(StorageKeys.GETVDATA_BODY_MALE, JSON.stringify(body), () => {
          if (type !== "headerIndex") this.getVData(false, true)
        });
      } 
      // else {
      //   Storage.saveItem(StorageKeys.GETVDATA_BODY_CELEB, JSON.stringify(body), () => {
      //     if (type !== "headerIndex") this.getVData(false, true)
      //   });
      // }

      this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.CUSTOMIZATION_CHANGE, `{type: ${type}, itemID: ${itemid}}`) //M&S log
    }
  };

  onHeaderItemClick = (type, id) => {
    // SceneUtils.callLogEventTNB(this.ownProps.uuid, SceneUtils.CUSTOMISE_TABS_CLICK, `{styleID: ${this.state.itm}, sessionID: ${this.ownProps.sessionid}, deviceID: ${this.ownProps.deviceid}, customize_tab_name: ${type}}`) //TNB log
    let _selectedPopupData = { ...this.state.selectedPopupData };
    _selectedPopupData[type] = id;
    this.setState({ selectedPopupData: _selectedPopupData });
    this.selectedOption(type, id);
  };

  onSizeClicked = (size, selectedSizeArrIndex) => {
    prefixSKU = ''
    let _selectedSizeArr = this.state.selectedSizeArr
    _selectedSizeArr[selectedSizeArrIndex] = size

    const {itemList, sizeDetails} = this.state
    const _itemListArr = itemList?.split(',')

    const prefixIndex = sizeDetails[selectedSizeArrIndex].split(';')?.findIndex(c => c == size)
    if(prefixIndex == 2) prefixSKU = '-plus'
    else if(prefixIndex == 0) prefixSKU = '-minus'

    this.ownProps.logEvent(this.ownProps.uuid, SceneUtils.SIZE_TRIED, `{size: ${size}}`) //M&S log
    // SceneUtils.callLogEventTNB(this.ownProps.uuid, SceneUtils.SIZE_ITEM_CLICK, `{styleID: ${this.state.itm}, sessionID: ${this.ownProps.sessionid}, deviceID: ${this.ownProps.deviceid}, size: ${size}}`) //TNB log
    

    this.setState({ selectedSizeArr: _selectedSizeArr, itm: _itemListArr[selectedSizeArrIndex].replace('-plus','').replace('-minus','') }, () => {
      this.getVData(false, true)
    })
  };

  showSizeDetails = () => {
    // this.props.navigation.navigate('SizeDetails')
  }

  dismissPopup = () => {
    this.state.is_male ? Storage.saveItem('firstLaunchMale', "0") : Storage.saveItem('firstLaunch', "0")
    this.state.is_male ? this.setState({ firstLaunchMale: false }) : this.setState({ firstLaunch: false })
  }

  renderPopup = () => {
    let celebModelHeightFeet = 5, celebModelHeightInch = 11, celebModelWeight = 64, bodyShape = ''
    const { modelSize, selectedSize } = this.state;
    if (modelSize && modelSize !== '') {
      const dimArr = modelSize.split(',')
      celebModelHeightFeet = dimArr[0].split('.')[0]
      celebModelHeightInch = dimArr[0].split('.')[1]
      celebModelWeight = dimArr[1]
      if (!this.state.is_male) bodyShape = BodyUtils.body_shape.find(c => c.id == dimArr[6]).name
    }
    return (
      <>
        {
          <View style={styles.suggestionContainer}>
            <Text style={styles.suggestionText}>
              Personalise this model to your own preferences.
            </Text>
            <View style={styles.modelSizeContainer}>
              {this.renderModelSize('Model wearing', ` Size ${this.state.selectedSizeArr[0] ? this.state.selectedSizeArr[0] : ''}`, 0.6)}
              {this.renderModelSize('Height', ` ${celebModelHeightFeet}' ${celebModelHeightInch}"`, 0.4)}
            </View>
            <View style={styles.modelSizeContainer}>
              {this.renderModelSize('Weight', ` ${celebModelWeight} kg`, 0.5)}
              {this.renderModelSize('Body shape', ` ${bodyShape}`, 0.5)}
            </View>
            <View style={{ flexDirection: 'row', marginTop: 12 }}>
              <TouchableOpacity
                onPress={() => this.editBody()}>
                <Text
                  style={styles.suggestionAction}>
                  Personalise here
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => this.dismissPopup()}>
                <Text
                  style={[styles.suggestionAction, { marginLeft: 16 }]}>
                  Dismiss
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        }
      </>)
  }

  renderPopupMale = () => {
    let celebModelHeightFeet = 5, celebModelHeightInch = 11, celebModelWeight = 64, bodyShape = ''
    const { modelSize, selectedSize } = this.state;
    if (modelSize && modelSize !== '') {
      const dimArr = modelSize.split(',')
      celebModelHeightFeet = dimArr[0].split('.')[0]
      celebModelHeightInch = dimArr[0].split('.')[1]
      celebModelWeight = dimArr[1]
      // bodyShape = BodyUtils.body_shape.find(c => c.id == dimArr[6]).name
    }
    return (
      <>
        {
          <View style={styles.suggestionContainer}>
            <Text style={styles.suggestionText}>
              Personalise this model to your own preferences.
            </Text>
            <View style={styles.modelSizeContainer}>
              {this.renderModelSize('Model wearing', ` Size ${this.state.selectedSizeArr[0] ? this.state.selectedSizeArr[0] : ''} `)}
              {this.renderModelSize('Height', ` ${celebModelHeightFeet}' ${celebModelHeightInch}"`)}
            </View>
            <View style={styles.modelSizeContainer}>
              {this.renderModelSize('Weight', ` ${celebModelWeight} kg`)}
            </View>
            <View style={{ flexDirection: 'row', marginTop: 12 }}>
              <TouchableOpacity
                onPress={() => this.editBody()}>
                <Text
                  style={styles.suggestionAction}>
                  Personalise here
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => this.dismissPopup()}>
                <Text
                  style={[styles.suggestionAction, { marginLeft: 16 }]}>
                  Dismiss
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        }
      </>)
  }

  renderAddToBagWarning = () => {
    const { selectedSize } = this.state;
    return (
      <>
        {
          <View style={[styles.suggestionContainer, { paddingTop: 10, paddingBottom: 16 }]}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <Text style={[styles.suggestionText, { marginBottom: 0 }]}>
                {`Size ${selectedSize} added to Bag`}
              </Text>
              <ImageButton
                imagepath={require("../assets/images/cancel.png")}
                width={12}
                height={12}
                marginTop={8}
                onPress={() => this.setState({ addToBagWarningBool: false })}
              />
            </View>
            <View style={[styles.modelSizeContainer, { marginTop: 5 }]}>
              <Text style={{ color: '#fff', fontSize: 14, paddingRight: 20 }}>
                {`Size ${selectedSize} is recommended based on default model. Personalise it for better recommendations`}
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: 5 }}>
              <TouchableOpacity
                onPress={() => this.editBody()}>
                <Text
                  style={styles.suggestionAction}>
                  Personalise here
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => this.ownProps.goToBag()}>
                <Text
                  style={[styles.suggestionAction, { marginLeft: 16 }]}>
                  Go to bag
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        }
      </>)
  }

  renderAddToBagSizeError = () => {
    const { selectedSize } = this.state;
    return (
      <>
        {
          <View style={[styles.suggestionContainer, { paddingTop: 10, paddingBottom: 16 }]}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <Text style={[styles.suggestionText, { marginBottom: 0 }]}>
                {`Uh-oh! Couldn’t add Size ${selectedSize} to bag`}
              </Text>
              <ImageButton
                imagepath={require("../assets/images/cancel.png")}
                width={12}
                height={12}
                marginTop={8}
                onPress={() => this.setState({ addToBagSizeErrorBool: false })}
              />
            </View>
            <View style={[styles.modelSizeContainer, { marginTop: 5 }]}>
              <Text style={{ color: '#fff', fontSize: 14, paddingRight: 20 }}>
                {`Size ${selectedSize} is out of stock`}
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: 5 }}>
              <TouchableOpacity
                onPress={() => this.setState({ addToBagSizeErrorBool: false, showBottomPopupSize: true, showButtons: false, addToBagWarningBool: false })}>
                <Text
                  style={styles.suggestionAction}>
                  Try another size
                </Text>
              </TouchableOpacity>
              {!this.ownProps.isWishlisted && <TouchableOpacity
                onPress={() => this.ownProps.addToWishList()}>
                <Text
                  style={[styles.suggestionAction, { marginLeft: 16 }]}>
                  Add to wishlist
                </Text>
              </TouchableOpacity>}
            </View>
          </View>
        }
      </>)
  }

  renderAlert = () => {
    return (
      <>
        {
          <View style={[styles.suggestionContainer, { paddingTop: 10, paddingBottom: 16 }]}>
            <Text style={[styles.suggestionText,