| 1 |
import { useEffect, useState, useRef } from 'react'; |
| 2 |
|
| 3 |
import { useSelect } from '@wordpress/data'; |
| 4 |
import { getSetting } from '@woocommerce/settings'; |
| 5 |
|
| 6 |
import { usePacketaShippingRate } from "./usePacketaShippingRate"; |
| 7 |
import { useDynamicSettings } from "./useDynamicSettings"; |
| 8 |
import { useOnWidgetButtonClicked } from "./useOnWidgetButtonClicked"; |
| 9 |
import { useOnHDWidgetButtonClicked } from "./useOnHDWidgetButtonClicked"; |
| 10 |
import { getShippingMethodOptionId } from "./getShippingMethodOptionId"; |
| 11 |
|
| 12 |
const { PAYMENT_STORE_KEY } = window.wc.wcBlocksData; |
| 13 |
|
| 14 |
export const useView = ( cart ) => { |
| 15 |
const [ viewState, setViewState ] = useState( null ); |
| 16 |
const { shippingRates, shippingAddress, cartItemsWeight } = cart; |
| 17 |
const paymentStore = useSelect( ( select ) => { |
| 18 |
return select( PAYMENT_STORE_KEY ); |
| 19 |
}, [] ); |
| 20 |
|
| 21 |
const settings = getSetting( 'packeta-widget_data' ); |
| 22 |
const { |
| 23 |
carrierConfig, |
| 24 |
translations, |
| 25 |
showLogo, |
| 26 |
logo, |
| 27 |
widgetAutoOpen, |
| 28 |
adminAjaxUrl, |
| 29 |
} = settings; |
| 30 |
|
| 31 |
const filteredShippingRates = usePacketaShippingRate( |
| 32 |
shippingRates, |
| 33 |
carrierConfig |
| 34 |
); |
| 35 |
const { |
| 36 |
packetaPickupPointShippingRate = null, |
| 37 |
packetaHomeDeliveryShippingRate = null, |
| 38 |
chosenShippingRate = null, |
| 39 |
} = filteredShippingRates || {}; |
| 40 |
|
| 41 |
const previousRateIdRef = useRef(); |
| 42 |
useEffect( () => { |
| 43 |
const previousRateId = previousRateIdRef.current; |
| 44 |
|
| 45 |
if ( |
| 46 |
previousRateId !== undefined && |
| 47 |
previousRateId !== chosenShippingRate?.rate_id |
| 48 |
) { |
| 49 |
setViewState( null ); |
| 50 |
} |
| 51 |
|
| 52 |
previousRateIdRef.current = chosenShippingRate?.rate_id; |
| 53 |
}, [ chosenShippingRate, setViewState ] ); |
| 54 |
|
| 55 |
const [ dynamicSettings, setDynamicSettings, loading ] = useDynamicSettings( adminAjaxUrl ); |
| 56 |
|
| 57 |
useEffect( () => { |
| 58 |
if ( ! dynamicSettings ) { |
| 59 |
return; |
| 60 |
} |
| 61 |
|
| 62 |
const activePaymentMethod = paymentStore.getActivePaymentMethod(); |
| 63 |
const rateId = chosenShippingRate?.rate_id || null; |
| 64 |
|
| 65 |
let shippingSaved = false; |
| 66 |
let paymentSaved = false; |
| 67 |
if ( |
| 68 |
( ! dynamicSettings.shippingSaved && rateId ) || |
| 69 |
( ! dynamicSettings.paymentSaved && activePaymentMethod !== '' ) |
| 70 |
) { |
| 71 |
if ( rateId ) { |
| 72 |
shippingSaved = true; |
| 73 |
} |
| 74 |
if ( activePaymentMethod !== '' ) { |
| 75 |
paymentSaved = true; |
| 76 |
} |
| 77 |
|
| 78 |
wp.hooks.doAction( 'packetery_save_shipping_and_payment_methods', rateId, activePaymentMethod ); |
| 79 |
|
| 80 |
setDynamicSettings( { |
| 81 |
...dynamicSettings, |
| 82 |
shippingSaved, |
| 83 |
paymentSaved, |
| 84 |
} ); |
| 85 |
} |
| 86 |
}, [ paymentStore, chosenShippingRate, dynamicSettings, setDynamicSettings, wp ] ); |
| 87 |
|
| 88 |
useEffect( () => { |
| 89 |
if ( ! dynamicSettings ) { |
| 90 |
return; |
| 91 |
} |
| 92 |
|
| 93 |
const shippingCountry = shippingAddress.country.toLowerCase(); |
| 94 |
|
| 95 |
if ( ! dynamicSettings.lastCountry ) { |
| 96 |
setDynamicSettings( { |
| 97 |
...dynamicSettings, |
| 98 |
lastCountry: shippingCountry, |
| 99 |
} ); |
| 100 |
} else if ( dynamicSettings.lastCountry !== shippingCountry ) { |
| 101 |
if ( viewState ) { |
| 102 |
setViewState( null ); |
| 103 |
} |
| 104 |
setDynamicSettings( { |
| 105 |
...dynamicSettings, |
| 106 |
lastCountry: shippingCountry, |
| 107 |
} ); |
| 108 |
} |
| 109 |
}, [ dynamicSettings, setDynamicSettings, viewState, setViewState, shippingAddress ] ); |
| 110 |
|
| 111 |
const onWidgetButtonClicked = useOnWidgetButtonClicked( |
| 112 |
packetaPickupPointShippingRate, |
| 113 |
settings, |
| 114 |
dynamicSettings, |
| 115 |
setViewState, |
| 116 |
shippingAddress, |
| 117 |
cartItemsWeight, |
| 118 |
); |
| 119 |
|
| 120 |
const onHDWidgetButtonClicked = useOnHDWidgetButtonClicked( |
| 121 |
packetaHomeDeliveryShippingRate, |
| 122 |
settings, |
| 123 |
dynamicSettings, |
| 124 |
setViewState, |
| 125 |
shippingAddress, |
| 126 |
); |
| 127 |
|
| 128 |
useEffect( () => { |
| 129 |
if ( |
| 130 |
packetaPickupPointShippingRate && |
| 131 |
dynamicSettings && |
| 132 |
! viewState && |
| 133 |
widgetAutoOpen |
| 134 |
) { |
| 135 |
onWidgetButtonClicked(); |
| 136 |
} |
| 137 |
}, [ packetaPickupPointShippingRate, widgetAutoOpen, onWidgetButtonClicked ] ); |
| 138 |
|
| 139 |
const getPickupPointErrorMessage = function ( viewState ) { |
| 140 |
if ( viewState && viewState.pickupPoint ) { |
| 141 |
return null; |
| 142 |
} else { |
| 143 |
return translations.pickupPointNotChosen; |
| 144 |
} |
| 145 |
}; |
| 146 |
|
| 147 |
const getHomeDeliveryErrorMessage = function ( viewState, addressValidationSetting ) { |
| 148 |
if ( addressValidationSetting === 'optional' || ( viewState && viewState.deliveryAddressInfo ) ) { |
| 149 |
return null; |
| 150 |
} else if ( viewState && viewState.deliveryAddressError ) { |
| 151 |
return viewState.deliveryAddressError; |
| 152 |
} else { |
| 153 |
return translations.addressIsNotValidatedAndRequiredByCarrier; |
| 154 |
} |
| 155 |
}; |
| 156 |
|
| 157 |
let skipView = false; |
| 158 |
let inputRequired = true; |
| 159 |
|
| 160 |
if ( packetaPickupPointShippingRate ) { |
| 161 |
const buttonPlace = |
| 162 |
viewState && viewState.pickupPoint.pickupPointType === 'internal' ? viewState.pickupPoint.place : ''; |
| 163 |
|
| 164 |
const buttonInfo = viewState && viewState.pickupPoint |
| 165 |
? [viewState.pickupPoint.street, `${viewState.pickupPoint.city} ${viewState.pickupPoint.zip}`].filter(Boolean).join(', ') |
| 166 |
: ''; |
| 167 |
|
| 168 |
return { |
| 169 |
buttonCallback: onWidgetButtonClicked, |
| 170 |
buttonLabel: translations.choosePickupPoint, |
| 171 |
buttonPlace: buttonPlace, |
| 172 |
buttonInfo: buttonInfo, |
| 173 |
inputValue: viewState && viewState.pickupPoint ? viewState.pickupPoint.name : '', |
| 174 |
inputRequired, |
| 175 |
errorMessage: getPickupPointErrorMessage( viewState ), |
| 176 |
showLogo, |
| 177 |
logo, |
| 178 |
translations, |
| 179 |
loading, |
| 180 |
}; |
| 181 |
} |
| 182 |
|
| 183 |
if ( packetaHomeDeliveryShippingRate ) { |
| 184 |
const rateId = getShippingMethodOptionId( packetaHomeDeliveryShippingRate.rate_id ); |
| 185 |
const rateCarrierConfig = carrierConfig[ rateId ]; |
| 186 |
const addressValidationSetting = rateCarrierConfig.address_validation || 'none'; |
| 187 |
if ( addressValidationSetting === 'none' ) { |
| 188 |
return null; |
| 189 |
} else if ( addressValidationSetting === 'optional' ) { |
| 190 |
inputRequired = false; |
| 191 |
} |
| 192 |
|
| 193 |
return { |
| 194 |
buttonCallback: onHDWidgetButtonClicked, |
| 195 |
buttonLabel: translations.chooseAddress, |
| 196 |
buttonInfo: viewState && viewState.deliveryAddressInfo, |
| 197 |
inputValue: viewState && viewState.deliveryAddressInfo ? viewState.deliveryAddressInfo : '', |
| 198 |
inputRequired, |
| 199 |
errorMessage: getHomeDeliveryErrorMessage( viewState, addressValidationSetting ), |
| 200 |
showLogo, |
| 201 |
logo, |
| 202 |
translations, |
| 203 |
loading, |
| 204 |
}; |
| 205 |
} |
| 206 |
|
| 207 |
return null; |
| 208 |
}; |
| 209 |
|
