Feature/update dependencies 20240108

example/nextjs/pages/_app.jsx

@@ -0,0 +1,13 @@
+import Script from 'next/script';
+import '../../../dist/promo-button.esm.css'; // @tincre/promo-button/bundle.css
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Script src="https://upload-widget.cloudinary.com/global/all.js" />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

package.json

@@ -85,8 +85,8 @@
     "@types/jest": "^28.1.6",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/node": "^17.0.25",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "autoprefixer": "10.4.5",
@@ -107,8 +107,8 @@
     "jsonwebtoken": "^9.0.2",
     "postcss": "^8.4.31",
     "prettier": "^2.6.2",
-    "react": "~17",
-    "react-dom": "~17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
@@ -119,7 +119,6 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
-    "@tincre/promo-node": "^0.1.0",
     "@tincre/promo-types": ">=0.0.3"
   },
   "keywords": [

src/components/Cloudinary/Cloudinary.tsx

@@ -6,7 +6,7 @@
  */
 
 import { CloudinaryOptions } from '@tincre/promo-types';
-import { getWidget, showWidget } from '@tincre/promo-node';
+import { getWidget, showWidget } from '../../lib/cloudinary-utils';
 
 export default function Cloudinary({
   setFileImage,

src/components/DefaultAdDisplay/DefaultAdDisplay.tsx

@@ -1,4 +1,4 @@
-import { detectMediaType } from '@tincre/promo-node';
+import { detectMediaType } from '../../lib/utils';
 import AdDisplay from '../AdDisplay/AdDisplay';
 
 interface MediaObject {

src/index.tsx

@@ -18,7 +18,7 @@ import React, {
 } from 'react';
 
 import { Dialog, Transition } from '@headlessui/react';
-import { getToken, generateAccessToken, getOptions } from '@tincre/promo-node';
+import { getOptions } from './lib/utils';
 import { Options } from './lib/types';
 import { PromoOptions, ButtonFormSubmission } from '@tincre/promo-types';
 import HowItWorks from './components/HowItWorks/HowItWorks';
@@ -392,4 +392,4 @@ function PromoButton({
   );
 }
 
-export { PromoButton, getToken, generateAccessToken, DefaultAdDisplay };
+export { PromoButton, DefaultAdDisplay };

src/lib/cloudinary-utils.ts

@@ -0,0 +1,37 @@
+import { CloudinaryOptions } from '@tincre/promo-types';
+
+export function getWidgetCallback(
+  setFileImage: any,
+  fileImage: any,
+  error: any,
+  result: any
+) {
+  if (!error && result && result.event === 'success') {
+    if (!fileImage) {
+      setFileImage([{ ...result.info }]);
+    } else {
+      setFileImage([...fileImage, { ...result.info }]);
+    }
+  }
+  if (error) {
+    console.error(error.message);
+  }
+}
+export function getWidget(
+  setFileImage: any,
+  fileImage: object,
+  cloudinaryOptions: CloudinaryOptions
+) {
+  if (typeof window.cloudinary === 'undefined') return null;
+  let options = cloudinaryOptions;
+  let widget = window.cloudinary.createUploadWidget(
+    options,
+    (error: any, result: any) =>
+      getWidgetCallback(setFileImage, fileImage, error, result)
+  );
+  return widget;
+}
+export function showWidget(widget: any) {
+  if (typeof window.cloudinary === 'undefined') return null;
+  widget.open();
+}