room-craft/lib/ProductCard.js

A lightweight React component for displaying products in both Augmented Reality (AR) and 3D. Perfect for eCommerce applications where you want to showcase your products in an immersive and interactive way.

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
require("@google/model-viewer/dist/model-viewer.min.js");
var _reactToastify = require("react-toastify");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Import the minified version
var ProductCard = function ProductCard(_ref) {
  var gltfPath = _ref.gltfPath;
  var _useState = (0, _react.useState)(null),
    _useState2 = _slicedToArray(_useState, 2),
    modelError = _useState2[0],
    setModelError = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isPopupVisible = _useState4[0],
    setIsPopupVisible = _useState4[1];
  var modelViewerRef = (0, _react.useRef)(null);

  // Log the gltfPath to ensure it's correct
  (0, _react.useEffect)(function () {
    console.log('GLTF Path:', gltfPath);
    if (!gltfPath) {
      setModelError('No GLTF path provided');
    }
  }, [gltfPath]);
  var handleError = function handleError() {
    if (!modelError) {
      setModelError('Error loading 3D model');
      _reactToastify.toast.error('Failed to load 3D model!');
    }
  };
  var handlePopupVisibility = function handlePopupVisibility() {
    setIsPopupVisible(true); // Open the popup
  };
  var closePopup = function closePopup() {
    setIsPopupVisible(false); // Close the popup
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "flex flex-col mx-[15px] my-[20px] bg-white shadow-lg h-[400px] w-[600px] rounded-[25px]"
  }, /*#__PURE__*/_react["default"].createElement(_reactToastify.ToastContainer, {
    position: "top-right",
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    draggable: true,
    pauseOnHover: true,
    theme: "light"
  }), /*#__PURE__*/_react["default"].createElement("button", {
    onClick: handlePopupVisibility
  }, "Open 3D Model Popup"), isPopupVisible && /*#__PURE__*/_react["default"].createElement("div", {
    className: "popup-overlay"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "popup-content"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    onClick: closePopup,
    className: "close-button"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: "https://cdn.builder.io/api/v1/image/assets/TEMP/8413f1e3d7bad3c1c6a2161fe0a5e57db6bf71b385607571aa0c4b09275a751c",
    alt: "Close"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "model-container"
  }, isPopupVisible && gltfPath && /*#__PURE__*/_react["default"].createElement("model-viewer", {
    ref: modelViewerRef,
    src: gltfPath,
    alt: "3D Model",
    "camera-controls": true,
    "auto-rotate": true,
    style: {
      width: '100%',
      height: '100%'
    },
    onError: handleError
  }, /*#__PURE__*/_react["default"].createElement("div", {
    slot: "poster",
    className: "bg-gray-300 text-center"
  }, "Loading..."))))));
};
var _default = exports["default"] = ProductCard;