Manager

Back Back Up Advanced Editor

/* globals yithWcwlAddToWishlist */

import React, { useContext, useState, useRef, useEffect } from 'react';
import { ThemeProvider } from '@lapilli-ui/styles';
import { createContext, useContextSelector } from 'use-context-selector';
import useProductData from '../components/add-to-wishlist/hooks/use-product-data';
import { useDispatch } from 'react-redux';
import { addProductToWishlist, removeProductFromWishlist } from '../features/products-data/products-data-actions';
import classNames from 'classnames';
import { ComponentsExtensionProvider } from './index'
import useFeedback from '../components/add-to-wishlist/hooks/use-feedback';

const ButtonDataContext = createContext( {} );

export const useButtonAttributes = ( mergeWithGlobalOptions = true ) => mergeWithGlobalOptions ? { ...yithWcwlAddToWishlist.globalOptions, ...(useContext( ButtonDataContext ).attributes) } : useContext( ButtonDataContext ).attributes;
export const useButtonData = () => useContextSelector( ButtonDataContext, v => v );
export const useButtonStyle = () => {
	return useContextSelector( ButtonDataContext, ( v ) => v?.style );
}
export const useAddToWishlistButtonData = () => useContextSelector(
	ButtonDataContext, ( { href, icon, buttonRef: ref, className, onButtonClick: onClick, label } ) => {
		return {
			label,
			href,
			icon,
			ref,
			className,
			onClick
		}
	}
);
export const useButtonTooltipData = () => useContextSelector(
	ButtonDataContext,
	( state ) => {
		return {
			hasDataLoaded: state?.hasDataLoaded,
			add_label: state?.add_label,
			remove_label: state?.remove_label,
			browse_label: state?.browse_label,
			move_label: state?.move_label,

isAdded: state?.isAdded,
			behaviour: state?.behaviour,
			buttonRef: state?.buttonRef,
			isDropdownOpen: state?.isDropdownOpen,
			tooltipEnabled: state?.tooltipEnabled,
		}
	}
)
export const useButtonDropdownData = () => useContextSelector(
	ButtonDataContext,
	( state ) => {
		return {
			buttonRef: state?.buttonRef,
			availableLists: state?.availableLists,
			isDropdownOpen: state?.isDropdownOpen,
			handleCloseDropdown: state?.handleCloseDropdown,
			wishlists: state?.wishlists,
		}
	}
)

export const ButtonDataProvider = ( { children, attributes, dataExtensions, componentsExtensions } ) => {
	const [ isPerformingAction, setIsPerformingAction ] = useState( false );
	const richAttributes = { ...yithWcwlAddToWishlist.globalOptions, ...attributes };

const {
		buttonId,
		productId: productIdAttribute,
		style,
		isOverProductImage,

add_label,
		added_label,
		remove_label,
		browse_label,

icon,
		icon_type,
		custom_icon,

added_icon: added_icon_attribute,
		added_icon_type,
		custom_added_icon,

is_single,
		loop_position,
		button_over_image_style,
		position_over_image_in_loop,
		behaviour: attribute_behaviour,
	} = richAttributes;

const [ productId, setProductId ] = useState( productIdAttribute )

const {
		isAdded,
		isLoading,
		alreadyIn,
		productData,
		hasDataLoaded,
	} = useProductData( productId, attributes );

const {
		feedbackType,
		showFeedback,
		feedbackMessage,
		feedbackDuration,
		setFeedbackType,
		setShowFeedback,
		setFeedbackMessage,
		setFeedbackDuration,
		addFeedback,
		clearFeedback,
		feedbackAnimation,
		setFeedbackAnimation,
	} = useFeedback( productId, richAttributes, isPerformingAction );

const buttonRef = useRef();
	const dispatch = useDispatch();
	const add_icon = (() => {
		if ( 'custom' === icon_type ) {
			return custom_icon;
		}

return icon;
	})();
	const added_icon = (() => {
		if ( added_icon_type === 'same' ) {
			return add_icon;
		}

if ( 'custom' === added_icon_type ) {
			return custom_added_icon;
		}

return added_icon_attribute;
	})();
	const iconToDisplay = isAdded ? added_icon : add_icon;

if ( isAdded && behaviour !== 'add' ) {
			if ( behaviour === 'remove' ) {
				handleRemoveFromWishlist();
			} else {
				window.location = yithWcwlAddToWishlist.wishlist_url
			}
		} else {
			handleAddToWishlist();
		}
	}

const getClasses = () => classNames( {
		'yith-wcwl-add-to-wishlist-button': true,
		[ `yith-wcwl-add-to-wishlist-button--${ getStyle() }` ]: true,
		'yith-wcwl-add-to-wishlist-button--loading': isLoading,
		'yith-wcwl-add-to-wishlist-button--first-loading': isLoading && productData?.isAdded === undefined,
		'yith-wcwl-add-to-wishlist-button--added': isAdded,
		'yith-wcwl-add-to-wishlist-button--single': is_single,
		'yith-wcwl-add-to-wishlist-button-over-image': isOverProductImage,
		[ `yith-wcwl-add-to-wishlist-button-over-image--${ position_over_image_in_loop || 'top-left' }` ]: isOverProductImage && loop_position === 'before_image',
		'yith-wcwl-add-to-wishlist-button-over-image--hover': isOverProductImage && loop_position === 'before_image' && button_over_image_style === 'hover' && ! isAdded,
		[ yithWcwlAddToWishlist?.buttonClasses + ' yith-wcwl-theme-button-style' ]: getStyle() === 'themed-button',
	} );

useEffect( () => {
		if ( is_single ) {
			const handleFoundVariation = ( e, variation ) => {
				const form = e.target;
				const parentId = form?.getAttribute( 'data-product_id' )
				if ( parentId === attributes?.productId ) {
					setProductId( variation.variation_id )
				}
			};
			const handleResetVariation = () => setProductId( productIdAttribute );

jQuery( document ).on( 'found_variation', handleFoundVariation );
			jQuery( document ).on( 'reset_data', handleResetVariation );

return () => {
				jQuery( document ).off( 'found_variation', handleFoundVariation );
				jQuery( document ).off( 'reset_data', handleResetVariation );
			}
		}
	}, [] );

let value = {
		buttonId,
		productId,
		attributes,
		productData,
		hasDataLoaded,
		richAttributes,
		isOverProductImage,

isPerformingAction,
		setIsPerformingAction,

icon: iconToDisplay,
		added_icon,
		add_icon,

add_label,
		added_label,
		remove_label,
		browse_label,

href,
		isAdded,
		is_single,
		isLoading,
		buttonRef,
		behaviour,
		style: getStyle(),
		label: getLabel(),
		className: getClasses(),

feedbackType,
		showFeedback,
		feedbackMessage,
		feedbackDuration,
		feedbackAnimation,

setFeedbackType,
		setShowFeedback,
		setFeedbackMessage,
		setFeedbackDuration,
		setFeedbackAnimation,

addFeedback,
		clearFeedback,

onButtonClick,
		handleButtonAction,
		handleAddToWishlist,
		handleRemoveFromWishlist,
	}

if ( 'function' === typeof dataExtensions ) {
		value = {
			...value,
			...dataExtensions( value )
		}
	}

return <ButtonDataContext.Provider value={ value }>
		<ComponentsExtensionProvider extensions={ componentsExtensions }>
			<ThemeProvider>
				{ children }
			</ThemeProvider>
		</ComponentsExtensionProvider>
	</ButtonDataContext.Provider>
};