import { Radio, RadioGroup } from '@headlessui/react'; import { __ } from '@wordpress/i18n'; import React, { useEffect, useState } from 'react'; import { checkFileSystemPermissions, checkRequiredPlugins, getDemo, } from '../../steps/import-site/import-utils'; import { useStateValue } from '../../store/store'; import { classNames } from '../../utils/functions'; import './style.scss'; const { imageDir } = starterTemplates; const ChooseEcommerce = () => { const storedState = useStateValue(); const [ { selectedTemplateID, allSitesData, currentCustomizeIndex }, dispatch, ] = useStateValue(); const [ checkedTemplateID, setCheckedTemplateID ] = useState( selectedTemplateID ); const selectedTemplate = allSitesData[ `id-${ selectedTemplateID }` ]; const relatedTemplateID = selectedTemplate?.related_ecommerce_template || ''; const changeEcommerceTemplate = async ( event ) => { const templateValue = parseInt( event?.value ); // Update selected template ID in the state and UI dispatch( { type: 'set', templateId: event?.id, } ); setCheckedTemplateID( templateValue ); // Update stored state for selected plugin and trigger further checks storedState[ 0 ].selectedEcommercePlugin = event?.id; await getDemo( templateValue, storedState ); await checkRequiredPlugins( storedState ); checkFileSystemPermissions( storedState ); }; useEffect( () => { setCheckedTemplateID( selectedTemplateID ); }, [ selectedTemplateID, relatedTemplateID ] ); useEffect( () => { if ( ! relatedTemplateID ) { dispatch( { type: 'set', currentCustomizeIndex: currentCustomizeIndex + 1, // Skip 1 step. } ); } }, [ relatedTemplateID, currentCustomizeIndex, dispatch ] ); const platforms = [ { name: __( 'SureCart', 'astra-sites' ), value: selectedTemplateID, id: 'surecart', icon: `${ imageDir }surecart-icon.svg`, description: __( 'Seamless all-in-one ecommerce platform for selling physical, digital, or subscription, products.', 'astra-sites' ), recommended: true, }, { name: __( 'WooCommerce', 'astra-sites' ), value: relatedTemplateID, id: 'woocommerce', icon: `${ imageDir }woocommerce-icon.svg`, description: __( 'Open source e-commerce plugin for WordPress.', 'astra-sites' ), recommended: false, }, ]; return ( <>
p.value === checkedTemplateID ) } onChange={ changeEcommerceTemplate } aria-label={ __( 'Choose E-commerce template', 'astra-sites' ) } className="space-y-2 flex flex-col gap-4" > { platforms?.map( ( platform ) => ( { ( { checked } ) => (
{ { platform?.name }
{ platform?.recommended && ( { __( 'Recommended', 'astra-sites' ) } ) }

{ platform?.description }

) }
) ) }
); }; export default ChooseEcommerce; .cm-s-3024-day.CodeMirror{background:#f7f7f7;color:#3a3432}.cm-s-3024-day div.CodeMirror-selected{background:#d6d5d4}.cm-s-3024-day .CodeMirror-line::selection,.cm-s-3024-day .CodeMirror-line>span::selection,.cm-s-3024-day .CodeMirror-line>span>span::selection{background:#d6d5d4}.cm-s-3024-day .CodeMirror-line::-moz-selection,.cm-s-3024-day .CodeMirror-line>span::-moz-selection,.cm-s-3024-day .CodeMirror-line>span>span::selection{background:#d9d9d9}.cm-s-3024-day .CodeMirror-gutters{background:#f7f7f7;border-right:0}.cm-s-3024-day .CodeMirror-guttermarker{color:#db2d20}.cm-s-3024-day .CodeMirror-guttermarker-subtle,.cm-s-3024-day .CodeMirror-linenumber{color:#807d7c}.cm-s-3024-day .CodeMirror-cursor{border-left:1px solid #5c5855}.cm-s-3024-day span.cm-comment{color:#cdab53}.cm-s-3024-day span.cm-atom,.cm-s-3024-day span.cm-number{color:#a16a94}.cm-s-3024-day span.cm-attribute,.cm-s-3024-day span.cm-property{color:#01a252}.cm-s-3024-day span.cm-keyword{color:#db2d20}.cm-s-3024-day span.cm-string{color:#fded02}.cm-s-3024-day span.cm-variable{color:#01a252}.cm-s-3024-day span.cm-variable-2{color:#01a0e4}.cm-s-3024-day span.cm-def{color:#e8bbd0}.cm-s-3024-day span.cm-bracket{color:#3a3432}.cm-s-3024-day span.cm-tag{color:#db2d20}.cm-s-3024-day span.cm-link{color:#a16a94}.cm-s-3024-day span.cm-error{background:#db2d20;color:#5c5855}.cm-s-3024-day .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-3024-day .CodeMirror-matchingbracket{color:#a16a94!important;text-decoration:underline} /* ------------------------------------------------------------------- Microtip Modern, lightweight css-only tooltips Just 1kb minified and gzipped @author Ghosh @package Microtip ---------------------------------------------------------------------- 1. Base Styles 2. Direction Modifiers 3. Position Modifiers --------------------------------------------------------------------*/ [aria-label][role~="tooltip"]{position:relative}[aria-label][role~="tooltip"]::before,[aria-label][role~="tooltip"]::after{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all var(--microtip-transition-duration,.18s) var(--microtip-transition-easing,ease-in-out) var(--microtip-transition-delay,0s);position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}[aria-label][role~="tooltip"]::before{background-size:100% auto!important;content:""}[aria-label][role~="tooltip"]::after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(aria-label);font-size:var(--microtip-font-size,13px);font-weight:var(--microtip-font-weight,normal);text-transform:var(--microtip-text-transform,none);padding:.5em 1em;white-space:nowrap;box-sizing:content-box}[aria-label][role~="tooltip"]:hover::before,[aria-label][role~="tooltip"]:hover::after,[aria-label][role~="tooltip"]:focus::before,[aria-label][role~="tooltip"]:focus::after{opacity:1;pointer-events:auto}[role~="tooltip"][data-microtip-position|="top"]::before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-bottom:5px}[role~="tooltip"][data-microtip-position|="top"]::after{margin-bottom:11px}[role~="tooltip"][data-microtip-position|="top"]::before{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role~="tooltip"][data-microtip-position|="top"]:hover::before{transform:translate3d(-50%,-5px,0)}[role~="tooltip"][data-microtip-position|="top"]::after{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role~="tooltip"][data-microtip-position="top"]:hover::after{transform:translate3d(-50%,-5px,0)}[role~="tooltip"][data-microtip-position="top-left"]::after{transform:translate3d(calc(-100% + 16px),0,0);bottom:100%}[role~="tooltip"][data-microtip-position="top-left"]:hover::after{transform:translate3d(calc(-100% + 16px),-5px,0)}[role~="tooltip"][data-microtip-position="top-right"]::after{transform:translate3d(calc(0% + -16px),0,0);bottom:100%}[role~="tooltip"][data-microtip-position="top-right"]:hover::after{transform:translate3d(calc(0% + -16px),-5px,0)}[role~="tooltip"][data-microtip-position|="bottom"]::before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0}[role~="tooltip"][data-microtip-position|="bottom"]::after{margin-top:11px}[role~="tooltip"][data-microtip-position|="bottom"]::before{transform:translate3d(-50%,-10px,0);bottom:auto;left:50%;top:100%}[role~="tooltip"][data-microtip-position|="bottom"]:hover::before{transform:translate3d(-50%,0,0)}[role~="tooltip"][data-microtip-position|="bottom"]::after{transform:translate3d(-50%,-10px,0);top:100%;left:50%}[role~="tooltip"][data-microtip-position="bottom"]:hover::after{transform:translate3d(-50%,0,0)}[role~="tooltip"][data-microtip-position="bottom-left"]::after{transform:translate3d(calc(-100% + 16px),-10px,0);top:100%}[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after{transform:translate3d(calc(-100% + 16px),0,0)}[role~="tooltip"][data-microtip-position="bottom-right"]::after{transform:translate3d(calc(0% + -16px),-10px,0);top:100%}[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after{transform:translate3d(calc(0% + -16px),0,0)}[role~="tooltip"][data-microtip-position="left"]::before,[role~="tooltip"][data-microtip-position="left"]::after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px,-50%,0)}[role~="tooltip"][data-microtip-position="left"]::before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}[role~="tooltip"][data-microtip-position="left"]::after{margin-right:11px}[role~="tooltip"][data-microtip-position="left"]:hover::before,[role~="tooltip"][data-microtip-position="left"]:hover::after{transform:translate3d(0,-50%,0)}[role~="tooltip"][data-microtip-position="right"]::before,[role~="tooltip"][data-microtip-position="right"]::after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px,-50%,0)}[role~="tooltip"][data-microtip-position="right"]::before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}[role~="tooltip"][data-microtip-position="right"]::after{margin-left:11px}[role~="tooltip"][data-microtip-position="right"]:hover::before,[role~="tooltip"][data-microtip-position="right"]:hover::after{transform:translate3d(0,-50%,0)}[role~="tooltip"][data-microtip-size="small"]::after{white-space:initial;width:80px}[role~="tooltip"][data-microtip-size="medium"]::after{white-space:initial;width:150px}[role~="tooltip"][data-microtip-size="large"]::after{white-space:initial;width:260px} Spares Management - Reparar Works

Spares Management

This Page is under Construction