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}
Other Brand Repair Services - Reparar Works
Skip to content