enhance/tools-dummy-data-react

includes/Admin/Dashboard/Dashboard.php

@@ -217,7 +217,7 @@ public function settings(): array {
                     [
                         'id'       => 'import-dummy-data',
                         'title'    => __( 'Import dummy data', 'dokan-lite' ),
-                        'url'      => $dashboard_url . '#/dummy-data',
+                        'url'      => admin_url( 'admin.php?page=dokan-dashboard' ) . '#/dummy-data',
                         'icon'     => 'import-data',
                         'external' => false,
                     ],

src/admin/dashboard/components/Dashboard.tsx

@@ -10,6 +10,7 @@ import Edit from '../pages/vendor-create-edit/Edit';
 import NotFound from '../../../layout/404';
 import AdminDashboard from '../pages/dashboard';
 import VendorsPage from '../pages/vendors';
+import DummyData from "admin/dashboard/pages/dummy-data";
 
 export type DokanAdminRoute = {
     id: string;
@@ -60,6 +61,11 @@ const getAdminRoutes = () => {
             element: <Edit />,
             path: '/vendors/edit/:id',
         },
+        {
+            id: 'dummy-data',
+            element: <DummyData />,
+            path: '/dummy-data',
+        },
     ];
 
     // @ts-ignore

src/admin/dashboard/pages/dummy-data/HeaderImage.tsx

@@ -0,0 +1,103 @@
+function HeaderImage( { className = '' } ) {
+    return (
+        <div className={ className }>
+            <svg
+                width="122"
+                height="83"
+                viewBox="0 0 122 83"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <rect
+                    y="13.7734"
+                    width="112.215"
+                    height="68.6155"
+                    rx="4.58333"
+                    fill="#EFEAFF"
+                />
+                <path
+                    d="M0 18.3568C0 15.8255 2.05203 13.7734 4.58333 13.7734H17.5738C20.1051 13.7734 22.1571 15.8255 22.1571 18.3568V77.8089C22.1571 80.3384 20.1065 82.3889 17.5771 82.3889H4.57999C2.05053 82.3889 0 80.3384 0 77.8089V18.3568Z"
+                    fill="#DFD7FA"
+                />
+                <rect
+                    x="38.5977"
+                    y="36.6445"
+                    width="45.7437"
+                    height="4.28847"
+                    rx="2.14423"
+                    fill="white"
+                />
+                <rect
+                    x="38.5977"
+                    y="45.2188"
+                    width="45.7437"
+                    height="4.28847"
+                    rx="2.14423"
+                    fill="white"
+                />
+                <rect
+                    x="38.5977"
+                    y="53.7969"
+                    width="45.7437"
+                    height="4.28847"
+                    rx="2.14423"
+                    fill="white"
+                />
+                <rect
+                    x="38.5977"
+                    y="62.375"
+                    width="45.7437"
+                    height="4.28847"
+                    rx="2.14423"
+                    fill="white"
+                />
+                <path
+                    d="M98 53.6712C98 51.5638 99.7084 49.8555 101.816 49.8555H118.184C120.292 49.8555 122 51.5638 122 53.6712V68.4034C122 70.5107 120.292 72.2191 118.184 72.2191H101.816C99.7084 72.2191 98 70.5107 98 68.4034V53.6712Z"
+                    fill="#7047EB"
+                />
+                <path
+                    d="M114.976 57.715H109.38M111.245 63.9328H105.649M111.245 63.9328C111.245 64.963 112.08 65.7981 113.111 65.7981C114.141 65.7981 114.976 64.963 114.976 63.9328C114.976 62.9026 114.141 62.0674 113.111 62.0674C112.08 62.0674 111.245 62.9026 111.245 63.9328ZM108.758 57.715C108.758 58.7452 107.923 59.5803 106.893 59.5803C105.862 59.5803 105.027 58.7452 105.027 57.715C105.027 56.6848 105.862 55.8496 106.893 55.8496C107.923 55.8496 108.758 56.6848 108.758 57.715Z"
+                    stroke="white"
+                    strokeWidth="1.09051"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <rect
+                    x="35.3672"
+                    width="24"
+                    height="22.8837"
+                    rx="3.90447"
+                    fill="#7047EB"
+                />
+                <g clipPath="url(#clip0_5284_101209)">
+                    <path
+                        d="M47.8285 5.17383H47.5486C47.2111 5.17383 46.8874 5.30789 46.6488 5.54653C46.4102 5.78517 46.2761 6.10883 46.2761 6.44632V6.56084C46.2759 6.78399 46.217 7.00315 46.1053 7.19634C45.9936 7.38954 45.8331 7.54997 45.6398 7.66154L45.3663 7.8206C45.1728 7.93229 44.9534 7.99108 44.73 7.99108C44.5066 7.99108 44.2872 7.93229 44.0938 7.8206L43.9983 7.7697C43.7063 7.60126 43.3594 7.55557 43.0338 7.64265C42.7081 7.72973 42.4303 7.94247 42.2614 8.23416L42.1214 8.47593C41.953 8.76793 41.9073 9.11483 41.9944 9.44048C42.0814 9.76613 42.2942 10.0439 42.5859 10.2129L42.6813 10.2765C42.8736 10.3875 43.0335 10.547 43.1452 10.7389C43.2568 10.9309 43.3162 11.1488 43.3176 11.3708V11.6953C43.3184 11.9196 43.2601 12.14 43.1483 12.3344C43.0366 12.5288 42.8755 12.6903 42.6813 12.8024L42.5859 12.8597C42.2942 13.0286 42.0814 13.3064 41.9944 13.6321C41.9073 13.9577 41.953 14.3046 42.1214 14.5966L42.2614 14.8384C42.4303 15.1301 42.7081 15.3428 43.0338 15.4299C43.3594 15.517 43.7063 15.4713 43.9983 15.3028L44.0938 15.2519C44.2872 15.1402 44.5066 15.0814 44.73 15.0814C44.9534 15.0814 45.1728 15.1402 45.3663 15.2519L45.6398 15.411C45.8331 15.5226 45.9936 15.683 46.1053 15.8762C46.217 16.0694 46.2759 16.2885 46.2761 16.5117V16.6262C46.2761 16.9637 46.4102 17.2874 46.6488 17.526C46.8874 17.7646 47.2111 17.8987 47.5486 17.8987H47.8285C48.166 17.8987 48.4897 17.7646 48.7283 17.526C48.9669 17.2874 49.101 16.9637 49.101 16.6262V16.5117C49.1012 16.2885 49.1601 16.0694 49.2718 15.8762C49.3835 15.683 49.544 15.5226 49.7373 15.411L50.0108 15.2519C50.2043 15.1402 50.4237 15.0814 50.6471 15.0814C50.8704 15.0814 51.0899 15.1402 51.2833 15.2519L51.3788 15.3028C51.6708 15.4713 52.0177 15.517 52.3433 15.4299C52.669 15.3428 52.9468 15.1301 53.1157 14.8384L53.2557 14.5902C53.4241 14.2982 53.4698 13.9513 53.3827 13.6257C53.2957 13.3 53.0829 13.0222 52.7912 12.8533L52.6958 12.8024C52.5016 12.6903 52.3405 12.5288 52.2288 12.3344C52.117 12.14 52.0587 11.9196 52.0595 11.6953V11.3772C52.0587 11.153 52.117 10.9325 52.2288 10.7381C52.3405 10.5437 52.5016 10.3823 52.6958 10.2701L52.7912 10.2129C53.0829 10.0439 53.2957 9.76613 53.3827 9.44048C53.4698 9.11483 53.4241 8.76793 53.2557 8.47593L53.1157 8.23416C52.9468 7.94247 52.669 7.72973 52.3433 7.64265C52.0177 7.55557 51.6708 7.60126 51.3788 7.7697L51.2833 7.8206C51.0899 7.93229 50.8704 7.99108 50.6471 7.99108C50.4237 7.99108 50.2043 7.93229 50.0108 7.8206L49.7373 7.66154C49.544 7.54997 49.3835 7.38954 49.2718 7.19634C49.1601 7.00315 49.1012 6.78399 49.101 6.56084V6.44632C49.101 6.10883 48.9669 5.78517 48.7283 5.54653C48.4897 5.30789 48.166 5.17383 47.8285 5.17383Z"
+                        stroke="white"
+                        strokeWidth="1.11587"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                    <path
+                        d="M47.6885 13.445C48.7427 13.445 49.5973 12.5904 49.5973 11.5363C49.5973 10.4821 48.7427 9.62753 47.6885 9.62753C46.6344 9.62753 45.7798 10.4821 45.7798 11.5363C45.7798 12.5904 46.6344 13.445 47.6885 13.445Z"
+                        stroke="white"
+                        strokeWidth="1.11587"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </g>
+                <defs>
+                    <clipPath id="clip0_5284_101209">
+                        <rect
+                            width="15.2698"
+                            height="15.2698"
+                            fill="white"
+                            transform="translate(40.0547 3.90234)"
+                        />
+                    </clipPath>
+                </defs>
+            </svg>
+        </div>
+    );
+}
+
+export default HeaderImage;

src/admin/dashboard/pages/dummy-data/Importer.tsx

@@ -0,0 +1,51 @@
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import { DokanButton } from '@dokan/components';
+import { __ } from '@wordpress/i18n';
+
+type ImporterProps = {
+    progress: number;
+    loading: boolean;
+    onRun: () => void;
+};
+
+function Importer( { progress, loading, onRun }: ImporterProps ) {
+    return (
+        <div className="p-[24px]">
+            <div className="flex flex-col gap-[24px]">
+                <div>
+                    <h2 className="font-[700] text-[18px] text-[#25252D] mb-[10px]">
+                        { __( 'Data Importer', 'dokan-lite' ) }
+                    </h2>
+                    <p className="font-[400] text-[14px] text-[#828282]">
+                        { __(
+                            'Normally it takes less than 1 minute.',
+                            'dokan-lite'
+                        ) }
+                    </p>
+                </div>
+
+                <div className="flex flex-row gap-[16px] items-center my-[4px]">
+                    <progress
+                        className="w-full h-[8px] [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-[#EFEAFF] [&::-webkit-progress-value]:bg-[#7047EB] [&::-webkit-progress-value]:transition-[width_0.5s] [&::-moz-progress-bar]:bg-[#7047EB]"
+                        value={ Math.round( progress ) }
+                        max={ 100 }
+                    />
+                    <span>{ Math.round( progress ) }%</span>
+                </div>
+
+                <div>
+                    <DokanButton
+                        disabled={ loading }
+                        loading={ loading }
+                        onClick={ onRun }
+                        label={ __( 'Run the Importer', 'dokan-lite' ) }
+                        className="!h-[28px] !font-[500] !text-[12px] !leading-[16px]"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Importer;

src/admin/dashboard/pages/dummy-data/RemovableDatasObj.ts

@@ -0,0 +1,82 @@
+export const vendorsDataToRemove = [
+    'sku',
+    'status',
+    'catalog_visibility',
+    'short_description',
+    'date_on_sale_from',
+    'date_on_sale_to',
+    'tax_status',
+    'tax_class',
+    'stock_status',
+    'manage_stock',
+    'stock_quantity',
+    'children',
+    'backorders',
+    'sold_individually',
+    'reviews_allowed',
+    'purchase_note',
+    'sale_price',
+    'regular_price',
+    'category_ids',
+    'tag_ids',
+    'shipping_class_id',
+    'raw_image_id',
+    'raw_gallery_image_ids',
+    'download_limit',
+    'download_expiry',
+    'parent_id',
+    'grouped_products',
+    'upsell_ids',
+    'cross_sell_ids',
+    'product_url',
+    'button_text',
+    'menu_order',
+    'virtual',
+    'downloadable',
+    'status',
+    'attribute_1_name',
+    'attribute_1_value',
+    'attribute_1_visible',
+    'attribute_1_global',
+    'attribute_2_name',
+    'attribute_2_value',
+    'attribute_2_visible',
+    'attribute_2_global',
+    '_wpcom_is_markdown',
+    'download1_name',
+    'download_1_url',
+    'download_2_name',
+    'download_2_url',
+    'vendor',
+];
+export const productsDataToRemove = [
+    'email',
+    'password',
+    'store_name',
+    'social',
+    'payment',
+    'phone',
+    'show_email',
+    'address',
+    'location',
+    'banner',
+    'icon',
+    'gravatar',
+    'show_more_tpab',
+    'show_ppp',
+    'enable_tnc',
+    'store_tnc',
+    'show_min_order_discount',
+    'store_seo',
+    'dokan_store_time',
+    'enabled',
+    'trusted',
+    'attribute_1_name',
+    'attribute_1_value',
+    'attribute_1_visible',
+    'attribute_1_global',
+    'attribute_2_name',
+    'attribute_2_value',
+    'attribute_2_visible',
+    'attribute_2_global',
+];

src/admin/dashboard/pages/dummy-data/Result.tsx

@@ -0,0 +1,101 @@
+import { Users, Box, Trash } from 'lucide-react';
+import { __ } from '@wordpress/i18n';
+import { DokanButton, DokanModal } from '@dokan/components';
+import { useState } from '@wordpress/element';
+
+type ResultProps = {
+    onClear: ( setIsConfirmOpen: ( value: boolean ) => void ) => void;
+    loading: boolean;
+    navigate: ( path: string ) => void;
+};
+
+function Result( { onClear, loading, navigate }: ResultProps ) {
+    const [ isConfirmOpen, setIsConfirmOpen ] = useState( false );
+
+    return (
+        <div className="p-[24px]">
+            <div className="flex flex-row items-center mb-[20px]">
+                <div className="bg-[#7047EB] h-[20px] w-[20px] rounded-full flex items-center justify-center mr-[12px]">
+                    <svg
+                        width="10"
+                        height="9"
+                        viewBox="0 0 10 9"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M3.9563 8.88889C3.7836 8.88839 3.61721 8.81992 3.48943 8.69659L0.193411 5.46443C-0.0727037 5.16928 -0.0630046 4.70111 0.215069 4.41866C0.468094 4.16159 0.861522 4.1439 1.13413 4.37718L3.86571 7.06202L8.74354 0.29445C8.97641 -0.0323841 9.41466 -0.0969513 9.72259 0.150223C10.0305 0.397398 10.0913 0.862562 9.85847 1.1894L4.54861 8.58564C4.43213 8.75716 4.25199 8.8675 4.05386 8.88889H3.9563Z"
+                            fill="white"
+                        />
+                    </svg>
+                </div>
+                <h2 className="font-bold font-[700] text-[18px] text-[#25252D]">
+                    { __( 'Dummy Data Import complete!', 'dokan-lite' ) }
+                </h2>
+            </div>
+
+            { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ }
+            <div
+                className="mb-[14px] border border-[#E9E9E9] rounded-[6px] flex items-center gap-[12px] p-[12px] hover:bg-[#F8F9F8]"
+                itemType="button"
+                onClick={ () => navigate( '/vendors' ) }
+            >
+                <div className="h-[44px] w-[44px] border border-[#E9E9E9] bg-[#F8F9F8] flex justify-center items-center rounded-[5px]">
+                    <Users size="24" color="#828282" />
+                </div>
+                <p className="text-[14px] font-[600] text-[#25252D]">
+                    { __( 'View Dummy Vendors', 'dokan-lite' ) }
+                </p>
+            </div>
+
+            { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ }
+            <div
+                className="mb-[14px] border border-[#E9E9E9] rounded-[6px] flex items-center gap-[12px] p-[12px] hover:bg-[#F8F9F8]"
+                itemType="button"
+                onClick={ () =>
+                    window.open(
+                        `${ dokanAdminDashboard.urls.adminRoot }edit.php?post_type=product`,
+                        '_self'
+                    )
+                }
+            >
+                <div className="h-[44px] w-[44px] border border-[#E9E9E9] bg-[#F8F9F8] flex justify-center items-center rounded-[5px]">
+                    <Box size="24" color="#828282" />
+                </div>
+                <p className="text-[14px] font-[600] text-[#25252D]">
+                    { __( 'View Dummy Products', 'dokan-lite' ) }
+                </p>
+            </div>
+
+            <DokanButton
+                disabled={ loading }
+                loading={ loading }
+                onClick={ () => setIsConfirmOpen( true ) }
+                variant="danger"
+                label={
+                    <div className="flex items-center gap-[6px]">
+                        <Trash size="15" />
+                        <span>{ __( 'Clear Data', 'dokan-lite' ) }</span>
+                    </div>
+                }
+                className="!h-[28px] !font-[500] !text-[12px] !leading-[16px] !bg-white !text-[#E64B5F]"
+            />
+
+            <DokanModal
+                isOpen={ isConfirmOpen }
+                namespace="dummy-data-clear"
+                onConfirm={ () => onClear( setIsConfirmOpen ) }
+                onClose={ () => setIsConfirmOpen( false ) }
+                confirmButtonVariant="danger"
+                confirmationTitle={ __( 'Confirmation', 'dokan-lite' ) }
+                confirmationDescription={ __(
+                    'Are you sure to remove all dummy data!',
+                    'dokan-lite'
+                ) }
+                loading={ loading }
+            />
+        </div>
+    );
+}
+
+export default Result;