import { Alert, Button, Spin, Tooltip, Row, Col } from "antd";
import { useTypedSelector } from "redux/rootReducer";
import { SHOPIFY_MODULE_TYPE } from "constants/shopify";
import DragDropContext from "components/DragDropContext";
import { Icon } from "components/Icon";
import PortalComponent from "components/PortalComponent/PortalComponent";
import ShopifyProductCard from "components/ShopifyProductCard";
import ShopifyStoreSelection from "components/ShopifyStoreSelection";
import { Text } from "components/Typography";
import { ReactComponent as InfoIcon } from "icons/info.svg";
import {
  ShopifyProductItem,
  TalentModuleMixItem,
  TalentProfileModule,
} from "models/talent/talent-profile-module.model";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { isMobile } from "react-device-detect";
import {
  selectShopifyStores,
  selectTriggerCheckCollection,
} from "redux/Shopify/selector";
import { MODAL_STEPS, ShopifyStore } from "redux/Shopify/types";
import {
  selectLocalizationSelected,
  selectTalentProfile,
  selectTalentProfileModulesOrigin,
} from "redux/User/selector";
import { shopifyService } from "services";
import EmptyModule from "./EmptyModule";

import classNames from "classnames";
import ShopifyModal from "components/ShopifyModal";
import ConfirmDeleteModal from "components/ShopifyProductCard/ProductDeleteModalConfirm";
import ShopifyStoreDomainInputModal from "components/ShopifyStoreDomainInputModal/ShopifyStoreDomainInputModal";
import { SEGMENT_EVENTS } from "constants/segment";
import { useAnalytics } from "hooks/useAnalytics";
import { useModules } from "hooks/useModules";
import { ArrayServices } from "utils/array";
import notification from "utils/notification";
import ModuleEditor from "../ModuleEditor";
import "./ModuleShopify.scss";
import { triggerCheckCollectionAction } from "redux/Shopify/actions";
import { useDispatch } from "react-redux";
import { isEmptyModule } from "utils/modules";
import { ModuleType } from "@komi-app/shared-types"
import { FLAGS, useFeatureIsOn } from "@komi-app/flags-sdk";
import { useCreatorTracking, CreatorEvent } from "@komi-app/analytics-sdk";
import { trackingProps } from "utils/tracking";

const PRODUCT_TYPES = {
  COLLECTION: 1,
  INDIVIDUAL: 2,
};

const ShopifyProductCardMemo = React.memo(ShopifyProductCard);

interface ModuleShopifyProps {
  module: TalentProfileModule<ShopifyProductItem>;
  dragHandleProps?: DraggableProvidedDragHandleProps;
  active?: boolean;
}

const ModuleShopify: React.FC<ModuleShopifyProps> = ({
  module,
  dragHandleProps,
  active,
}) => {
  const dispatch = useDispatch();
  const { sendSegmentEvent } = useAnalytics();
  const profileContext = useModules();
  const [items, setItems] = useState<ShopifyProductItem[]>([]);
  const [storeSelected, setStoreSelected] = useState<ShopifyStore>();
  const [collectionList, setCollectionList] = useState<any>([]);
  const [isAdding, setIsAdding] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isShowAlert, setIsShowAlert] = useState(false);
  const [productList, setProductList] = useState<any>([]);
  const [hasProducts, setHasProducts] = useState<boolean>();
  const [hasCollections, setHasCollections] = useState<boolean>();
  const [collectionSelected, setCollectionSelected] = useState<string>();
  const [productsSelected, setProductsSelected] = useState<
    Array<ShopifyProductItem>
  >([]);
  const [availableProducts, setAvailableProducts] = useState<
    Array<ShopifyProductItem>
  >([]);
  const [productsAdded, setProductAdded] = useState<Array<ShopifyProductItem>>(
    []
  );
  const [productType, setProductType] = useState<number>();
  const [collectionName, setCollectionName] = useState<string>();
  const [showShopifyInputModal, setShowShopifyInputModal] = useState(false);
  const [visibleConfirmDeleteModal, setVisibleConfirmDeleteModal] =
    useState(false);
  const [visibleModal, setVisibleModal] = useState<boolean>(false);
  const [step, setStep] = useState<MODAL_STEPS>(MODAL_STEPS.LOADING);
  const [isFetching, setIsFetching] = useState(false);
  const stores = useTypedSelector(selectShopifyStores);
  const talentProfile = useTypedSelector(selectTalentProfile);
  const trigger = useTypedSelector(selectTriggerCheckCollection);
  const talentModulesRevert = useTypedSelector(
    selectTalentProfileModulesOrigin
  );
  const localizationSelected = useTypedSelector(selectLocalizationSelected);
  const useAnalyticsSDK = useFeatureIsOn(FLAGS.USE_ANALYTICS_SDK_TALENT);
  const { createTracker } = useCreatorTracking()
  const elementCreate = createTracker(CreatorEvent.ELEMENT_CREATED);

  const actualStores = useMemo(
    () => stores.filter((store) => store.connected),
    [stores]
  );

  const handleCheckCollection = async (store?: ShopifyStore) => {
    if (!store) return;

    const client = shopifyService.createClient(store.accessToken, store.domain);

    try {
      const [collections, products] = await Promise.all([
        client.collection.fetchAllWithProducts(),
        client.product.fetchAll(),
      ]);

      setHasCollections(!!collections.length);
      setHasProducts(!!products.length);

      if (!collections.length) {
        if (!products.length) {
          onOpenModal(MODAL_STEPS.EMPTY);
        } else {
          setProductList(products);
          setProductType(PRODUCT_TYPES.INDIVIDUAL);
          onOpenModal(MODAL_STEPS.ADD_PRODUCT);
        }
      } else {
        onOpenModal(MODAL_STEPS.SELECT_MODULE_TYPE);
      }
    } catch (e) {
      console.error("[module:shopify:check-collection]", e);

      notification.error({
        message: "Something went wrong with Shopify service",
      });
    }

    setIsFetching(false);
  };

  useEffect(() => {
    if (!storeSelected && actualStores.length) {
      setStoreSelected(actualStores[0]);
    }

    /**
     * When a store is added for the first time
     */
    if (
      trigger &&
      module.type === ModuleType.SHOPIFY &&
      actualStores.length === 1
    ) {
      setIsFetching(true);
      dispatch(triggerCheckCollectionAction(false));

      handleCheckCollection(actualStores[0]);
    }
  }, [trigger, module.type, actualStores, hasCollections, hasProducts]);

  const fetchData = useCallback(
    async (currentModule: any) => {
      try {
        setIsLoading(true);
        const storeDomain = currentModule.items[0]?.shop || "";

        const store = actualStores.length
          ? actualStores.filter((store) => store.domain === storeDomain)[0]
          : talentProfile?.shopifyMerchants[storeDomain];
        setStoreSelected(store);
        const client = shopifyService.createClient(
          store.accessToken,
          storeDomain
        );
        if (currentModule.type === SHOPIFY_MODULE_TYPE.SHOPIFY_COLLECTION) {
          const colectionId = currentModule.items[0].collectionId || "";
          const collection: any = await client.collection.fetchWithProducts(
            colectionId
          );
          setCollectionName(collection?.title);
          setItems(collection.products);
          return;
        }
        if (currentModule.type === SHOPIFY_MODULE_TYPE.SHOPIFY_PRODUCT) {
          setProductType(PRODUCT_TYPES.INDIVIDUAL);
          const productIds: any = currentModule.items[0].itemIds;
          const products: any = await client.product.fetchMultiple(
            productIds as string[]
          );
          setItems(products);
          setProductsSelected(products);
        }
        setIsShowAlert(false);
      } catch (error) {
      } finally {
        setIsLoading(false);
      }
    },
    [actualStores]
  );

  useEffect(() => {
    if (actualStores.length && module.items[0]) {
      fetchData(module);
    }
    return () => {};
  }, [fetchData, actualStores, module]);

  const onDeleteItem = useCallback(
    (item: ShopifyProductItem) => {
      const itemsUpdate = module.items[0].itemIds?.filter(
        (id) => id !== item.id
      );
      setItems((items) => items.filter((el) => el.id !== item.id));
      profileContext.setModule({
        ...module,
        items: [{ ...module.items[0], itemIds: itemsUpdate }],
        isUpdate: true,
      });
    },
    [module, profileContext.setModule]
  );

  const onDropEndProducts = useCallback(
    (list: ShopifyProductItem[]) => {
      const itemsUpdate = list.map((item) => item.id);
      setItems(list);
      profileContext.setModule({
        ...module,
        items: [
          { ...module.items[0], itemIds: itemsUpdate },
        ] as ShopifyProductItem[],
        isUpdate: true,
      });
    },
    [module, profileContext.setModule]
  );

  const onOpenModal = (step: MODAL_STEPS) => {
    setStep(step);
    setVisibleModal(true);
  };

  const handleSubmit = useCallback(() => {
    setIsFetching(true);
    handleCheckCollection(storeSelected);

    setIsAdding(true);
    setIsShowAlert(true);
    setProductList([]);
    setCollectionList([]);
    setProductsSelected([]);
  }, [actualStores, storeSelected]);

  const handleChangeStore = useCallback(
    (store) => {
      setStoreSelected(store);
    },
    [setStoreSelected]
  );

  const handleAddInvidualProduct = useCallback(() => {
    setIsFetching(true);
    onOpenModal(MODAL_STEPS.ADD_MORE_PRODUCT);
    if (module.items.length) {
      const store = actualStores.filter(
        (store) => store.domain === module.items[0].shop
      )[0];
      setStoreSelected(store);
      const client = shopifyService.createClient(
        store.accessToken,
        store.domain
      );

      client.product.fetchAll().then((products: any) => {
        setProductList(products);
        const listProductSelected = products.filter((item: any) =>
          module.items[0].itemIds?.some((id) => id === item.id)
        );
        setProductsSelected(listProductSelected);
        setProductAdded(listProductSelected);
        const availableItems = products.filter(
          (item: ShopifyProductItem) =>
            !listProductSelected?.some((product: any) => product.id === item.id)
        );
        setAvailableProducts(availableItems);
        setIsFetching(false);
      });
    } else {
      setIsFetching(false);
    }
  }, [isAdding, module.items, actualStores]);

  const handleSelectProductType = async () => {
    setIsFetching(true);
    const storeDetail = actualStores?.filter(
      (store) => store.domain === storeSelected?.domain
    )[0];

    const client = shopifyService.createClient(
      storeDetail.accessToken,
      storeSelected ? storeSelected.domain : ""
    );
    switch (productType) {
      case PRODUCT_TYPES.COLLECTION:
        onOpenModal(MODAL_STEPS.ADD_COLLECTION);
        const collections = await client.collection.fetchAllWithProducts();
        if (!collections.length) {
          const products = await client.product.fetchAll();
          setIsFetching(false);
          if (!products.length) {
            onOpenModal(MODAL_STEPS.EMPTY);
          } else {
            setProductType(PRODUCT_TYPES.INDIVIDUAL);
            setProductList(products);
            onOpenModal(MODAL_STEPS.ADD_PRODUCT);
          }
        } else {
          setCollectionList(collections);
          onOpenModal(MODAL_STEPS.ADD_COLLECTION);
          setIsFetching(false);
        }
        break;

      default:
        onOpenModal(MODAL_STEPS.ADD_PRODUCT);
        client.product
          .fetchAll()
          .then((products: any) => {
            if (!products.length) {
              setIsFetching(false);
              onOpenModal(MODAL_STEPS.EMPTY);
              return;
            }
            setProductList(products);
            setIsFetching(false);
          })
          .catch((e) => console.log(e));
        break;
    }
  };

  const onAddColectionCallback = useCallback(() => {
    if (!collectionSelected) {
      notification.error({
        message: "Please select the collection!",
      });
      return;
    }
    const colection = collectionList.filter((collection: any) => {
      return collection.id === collectionSelected;
    })[0];

    setCollectionName(colection?.title || "");

    if (!colection?.products?.length) {
      return onOpenModal(MODAL_STEPS.EMPTY);
    }

    setItems(colection.products);
    const moduleEdit = {
      ...module,
      items: [
        {
          shop: storeSelected?.domain,
          collectionId: collectionSelected,
        },
      ],
      isUpdate: true,
      type: SHOPIFY_MODULE_TYPE.SHOPIFY_COLLECTION,
    };
    profileContext.setModule(moduleEdit);
    setVisibleModal(false);
  }, [collectionSelected, module, storeSelected, profileContext.setModule]);

  const onAddProductCallBack = useCallback(() => {
    if (!productsSelected.length) {
      notification.error({
        message: "Please select products!",
      });
      return;
    }
    setItems(
      productsSelected.map((exp, index) => ({
        ...exp,
        order: index,
      }))
    );
    const moduleEdit = {
      ...module,
      items: [
        {
          ...module.items[0],
          shop: storeSelected?.domain,
          itemIds: productsSelected.map((item) => item.id),
        } as TalentModuleMixItem,
      ],
      isUpdate: true,
      type: SHOPIFY_MODULE_TYPE.SHOPIFY_PRODUCT,
    };

    profileContext.setModule(moduleEdit);
    
    const {
      pageId,
      pageName,
      type
    } = trackingProps(moduleEdit.type, localizationSelected)

    useAnalyticsSDK
      ? elementCreate({ pageId, pageName, type })
      : sendSegmentEvent(SEGMENT_EVENTS.ELEMENT_CREATED, {
        "Module Type": moduleEdit.type,
        "Page ID": localizationSelected?.id || null,
        "Page Name": localizationSelected?.name || "Default",
      });
    setVisibleModal(false);
  }, [
    module,
    productsSelected,
    storeSelected?.domain,
    localizationSelected,
    profileContext.setModule,
    sendSegmentEvent,
  ]);

  const onLoginSuccessCallback = useCallback(() => {
    setIsFetching(true);
    const store = actualStores[actualStores.length - 1]; // the last store added
    setStoreSelected(store);
    handleCheckCollection(store);
  }, [actualStores]);

  const onCreateAccountCallback = useCallback(() => {
    onOpenModal(MODAL_STEPS.CREATE_ACCOUNT);
  }, []);

  const onSelectProduct = useCallback(
    (productSelect: ShopifyProductItem) => {
      const products =
        productsSelected?.filter((product) => product.id === productSelect.id)
          .length > 0
          ? productsSelected.filter(
              (product) => product.id !== productSelect.id
            )
          : ArrayServices.unshift(productsSelected, productSelect);
      setProductsSelected(products);
    },
    [productsSelected, productList]
  );

  const connectToStore = useCallback(() => onOpenModal(MODAL_STEPS.LOGIN), []);
  const goBackToProductType = useCallback(
    () => onOpenModal(MODAL_STEPS.SELECT_MODULE_TYPE),
    []
  );

  const onReload = async () => {
    const storeDetail = actualStores?.filter(
      (store) => store.domain === storeSelected?.domain
    )[0];
    const client = shopifyService.createClient(
      storeDetail.accessToken,
      storeSelected ? storeSelected.domain : ""
    );
    if (productType === PRODUCT_TYPES.COLLECTION) {
      const collections: any = await client.collection.fetchAllWithProducts();
      if (!collections.length) {
        const products = await client.product.fetchAll();
        if (!products.length) {
          return;
        }
        setProductType(PRODUCT_TYPES.INDIVIDUAL);
        setProductList(products);
        onOpenModal(MODAL_STEPS.ADD_PRODUCT);
        return;
      }
      setCollectionList(collections);
      const selected = collections.find(
        (item: any) => item.id === collectionSelected
      );
      if (!selected?.products?.length) {
        return;
      }
      setCollectionName(selected?.title || "");

      setItems(selected.products);
      const moduleEdit = {
        ...module,
        items: [
          {
            shop: storeSelected?.domain,
            collectionId: selected.id,
          },
        ],
        isUpdate: true,
        type: SHOPIFY_MODULE_TYPE.SHOPIFY_COLLECTION,
      };
      profileContext.setModule(moduleEdit);
      setVisibleModal(false);
      return;
    }
    const products = await client.product.fetchAll();
    if (!products.length) {
      return;
    }
    onOpenModal(MODAL_STEPS.ADD_PRODUCT);
    setProductList(products);
    setTimeout(() => {
      onOpenModal(MODAL_STEPS.ADD_PRODUCT);
    }, 150);
  };

  const onDeteleCollection = () => {
    setVisibleConfirmDeleteModal(true);
  };

  const onConfirmDeteleCollection = useCallback(() => {
    setItems([]);
    profileContext.setModule({ ...module, items: [], isUpdate: true });
    setVisibleConfirmDeleteModal(false);
  }, [profileContext.setModule]);

  return (
    <React.Fragment>
      <ModuleEditor
        module={module}
        dragHandleProps={dragHandleProps}
        InfoTooltip={
          module.items.length && !isShowAlert ? (
            <Tooltip
              className="m__l--12 align__self--center"
              overlayClassName="module-shopify__tooltip"
              placement={isMobile ? "bottom" : "bottomLeft"}
              title={
                productType === PRODUCT_TYPES.COLLECTION
                  ? "This module contains a collection. To add another collection or individual products, create a new product module. If you want to reorder items, you can do so from your Shopify account."
                  : "This module contains individual products. To add a collection, create a new product module."
              }
              color={"#FFFFFF"}
            >
              <div className="height--24 width--24">
                <Icon name="info" width={24} height={24} />
              </div>
            </Tooltip>
          ) : undefined
        }
      >
        <Spin spinning={isLoading}>
          {isEmptyModule(module) ||
          module.type === ModuleType.SHOPIFY ? (
            <>
              <Text preset="regular14">Select your store</Text>
              <ShopifyStoreSelection
                items={actualStores.filter(
                  (store) => store?.connected === true
                )}
                onChange={handleChangeStore}
                value={storeSelected as ShopifyStore}
                onConnectToAnotherStore={connectToStore}
              />
              <div className="divider m__t--24" />
              <EmptyModule
                caption="Add Products From Your Shopify Store"
                titleAction="Add Products"
                onClick={handleSubmit}
              />
            </>
          ) : (
            <React.Fragment>
              {!!module.items.length && isShowAlert && (
                <Alert
                  message={undefined}
                  className={classNames(
                    "m__b--16 p__x--16 p__y--8 bg--grey shopify-module__alert",
                    productType !== PRODUCT_TYPES.COLLECTION &&
                      "align__items--center"
                  )}
                  description={
                    productType === PRODUCT_TYPES.COLLECTION
                      ? "This module contains a collection. To add another collection or individual products, create a new product module. If you want to reorder items, you can do so from your Shopify account."
                      : "This module contains individual products. To add a collection, create a new product module."
                  }
                  icon={<InfoIcon />}
                  showIcon
                  closeText={
                    <Icon width={24} height={24} name="close-outline" />
                  }
                  onClose={() => setIsShowAlert(false)}
                />
              )}

              {module.type === SHOPIFY_MODULE_TYPE.SHOPIFY_COLLECTION ? (
                <div className="border--grey2 p--20 ">
                  {items.length ? (
                    <>
                      <Row align="middle" wrap={false}>
                        <Col flex={"1"}>
                          <Text preset="semibold18">{collectionName}</Text>
                        </Col>
                        <Col
                          className="height--24"
                          onClick={onDeteleCollection}
                        >
                          <Icon name="trash" />
                        </Col>
                      </Row>
                      <Text
                        preset="regular16"
                        className="m__b--16 m__t--4 leading-24"
                      >
                        {items.length}{" "}
                        {items.length > 1 ? "products" : "product"}
                      </Text>
                    </>
                  ) : null}
                  <div className="m__t--16">
                    <DragDropContext
                      droppableId="collection-child-drop"
                      listClassName="collection-list"
                      itemIdPrefix="collection"
                      list={items}
                      onDropEndCallback={onDropEndProducts}
                    >
                      {(dragProvided, snapshot, item, itemIndex) => {
                        return active ? (
                          <PortalComponent
                            innerRef={dragProvided.innerRef}
                            key={itemIndex}
                            namespaceClass="collection-list"
                            provided={dragProvided}
                            snapshot={snapshot}
                            single={items?.length === 1}
                          >
                            <ShopifyProductCardMemo
                              disableDragDrop={items?.length <= 1}
                              index={itemIndex}
                              item={item}
                              type={PRODUCT_TYPES.COLLECTION}
                              showPrice
                              onDelete={onDeleteItem}
                              active={active}
                              dragHandleProps={dragProvided.dragHandleProps}
                            />
                          </PortalComponent>
                        ) : itemIndex < 2 ? (
                          <PortalComponent
                            innerRef={dragProvided.innerRef}
                            key={itemIndex}
                            namespaceClass="collection-list"
                            provided={dragProvided}
                            snapshot={snapshot}
                            single={items?.length === 1}
                          >
                            <ShopifyProductCardMemo
                              disableDragDrop={items?.length <= 1}
                              index={itemIndex}
                              item={item}
                              type={PRODUCT_TYPES.COLLECTION}
                              showPrice
                              onDelete={onDeleteItem}
                              active={active}
                              dragHandleProps={dragProvided.dragHandleProps}
                            />
                          </PortalComponent>
                        ) : (
                          <></>
                        );
                      }}
                    </DragDropContext>
                  </div>
                </div>
              ) : (
                <>
                  <div className="d--flex justify__content--between align__items--center m__b--22">
                    <Button
                      type="link"
                      className="p--0"
                      onClick={handleAddInvidualProduct}
                    >
                      <div className="d--flex justify__content--start align__items--center">
                        <Icon name="add-blue" />
                        <Text
                          preset="semibold18"
                          className="text--blue m__l--4"
                        >
                          Add products
                        </Text>
                      </div>
                    </Button>
                    <Text preset="medium14" className="opacity-6">
                      {items.length}&nbsp;
                      {items.length > 1 ? "products added" : "product added"}
                    </Text>
                  </div>
                  <DragDropContext
                    droppableId="shopify-child-drop"
                    listClassName="collection-list"
                    itemIdPrefix="shopify"
                    list={items}
                    onDropEndCallback={onDropEndProducts}
                  >
                    {(dragProvided, snapshot, item, itemIndex) => {
                      const isRender = active ? active : itemIndex < 2;
                      return isRender ? (
                        <PortalComponent
                          key={itemIndex}
                          innerRef={dragProvided.innerRef}
                          namespaceClass="collection-list"
                          provided={dragProvided}
                          snapshot={snapshot}
                          single={items?.length === 1}
                        >
                          <ShopifyProductCardMemo
                            disableDragDrop={items?.length <= 1}
                            index={itemIndex}
                            item={item}
                            type={PRODUCT_TYPES.INDIVIDUAL}
                            showPrice
                            onDelete={onDeleteItem}
                            active={active}
                            dragHandleProps={dragProvided.dragHandleProps}
                          />
                        </PortalComponent>
                      ) : (
                        <></>
                      );
                    }}
                  </DragDropContext>
                </>
              )}
              {!active && items.length > 2 && (
                <div className="d--flex justify__content--end align__items--center m__t--20 cursor-pointer">
                  <Text preset="medium14" className="opacity-6">
                    +{items.length - 2} More
                  </Text>
                </div>
              )}
            </React.Fragment>
          )}
        </Spin>
      </ModuleEditor>

      <ConfirmDeleteModal
        show={visibleConfirmDeleteModal}
        toggleModal={setVisibleConfirmDeleteModal}
        cancelLabel="NO THANKS"
        confirmLabel="DELETE"
        title="Are you sure you want to delete this collection?"
        description="The collection will be deleted from your Komi profile and you can’t undo this action."
        handleConfirm={onConfirmDeteleCollection}
      />

      <ShopifyModal
        show={visibleModal}
        toggleModal={setVisibleModal}
        reloadCallback={onReload}
        step={step}
        loading={isFetching}
        collections={collectionList}
        onSelectColection={setCollectionSelected}
        onSelectProductType={setProductType}
        productType={productType}
        products={productList}
        hasProducts={hasProducts}
        hasCollections={hasCollections}
        productsSelected={productsSelected}
        productsAdded={productsAdded}
        availableProducts={availableProducts}
        onSelectProduct={onSelectProduct}
        addCollectionCallback={onAddColectionCallback}
        addProductCallback={onAddProductCallBack}
        loginSuccessCallback={onLoginSuccessCallback}
        createAccountCallback={onCreateAccountCallback}
        connectToStore={connectToStore}
        loginCallback={() => {
          setVisibleModal(false);
          setShowShopifyInputModal(true);
        }}
        selectModuleTypeCallback={handleSelectProductType}
        goBackToProductTypeCallback={goBackToProductType}
      />

      {showShopifyInputModal && (
        <ShopifyStoreDomainInputModal
          toggleModal={setShowShopifyInputModal}
          callback={() => onOpenModal(MODAL_STEPS.LOGIN_SUCCESS)}
        />
      )}
    </React.Fragment>
  );
};

export default React.memo(ModuleShopify);
