closeMini not working and app icon is not loading on permission screen

Shop Minis
1

Hi Team, I am facing 2 issues.

  1. I am using closeMini, to close the mini if user doesn’t give Camera permission. But it’s not closing the mini, is it not working only in dev mode and might work in production? please let me know
  2. When permission modal is coming, my app icon is not loading in that modal, please suggest that how to fix it.

Thanks

2

Hey!

Can you give me your mini handle and I can check your icon issue.

Can you also supply me with some reproduction code for the closeMini issue?

Thanks!

3

Hi @steve-t-shopify ,

My Shop mini handle is : pick-my-vibe

And below is code that I used in one of my components, to trigger closeMini hook.

import { X, CameraOff, ShieldCheck } from "lucide-react";

import { useCloseMini } from "@shopify/shop-minis-react";


type CameraPermissionDialogProps = {

onGivePermission: () => void;

onContinueWithout: () => void;

onCloseMini: () => void;

};



export default function CameraPermissionDialog({

onGivePermission,

onContinueWithout,

}: CameraPermissionDialogProps) {

const { closeMini } = useCloseMini();

return (

<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">

<div className="relative w-full max-w-md rounded-2xl bg-white shadow-2xl p-6 md:p-7">

{/* Close icon (top-right) */}

<button

onClick={closeMini}

className="absolute right-3 top-3 rounded-full p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"

aria-label="Close"

>

<X className="w-4 h-4" />

</button>


{/* Header icon */}

<div className="flex justify-center mb-4">

<div className="flex h-14 w-14 items-center justify-center rounded-full bg-red-50 border border-red-100">

<CameraOff className="w-7 h-7 text-red-500" />

</div>

</div>


{/* Title */}

<h2 className="text-xl font-semibold text-center text-gray-900 mb-2">

          Camera permission is turned off

</h2>


{/* Subtitle */}

<p className="text-sm text-center text-gray-600 mb-5">

          The image-based discovery experience works best when we can access

          your camera. Without permission, some features may not work as

          expected.

</p>


{/* Info box */}

<div className="flex items-start gap-3 rounded-xl bg-gray-50 border border-gray-100 px-3.5 py-3 mb-5">

<ShieldCheck className="w-5 h-5 text-emerald-500 mt-0.5" />

<div className="text-xs text-gray-600">

<p className="font-medium text-gray-800 mb-0.5">

              We only analyse your photo briefly to suggest products.

</p>

<p>

              Images are not stored or shared, and are processed only to power

              your recommendations.

</p>

</div>

</div>



{/* What happens list */}

<div className="mb-6">

<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">

            If you continue without camera access

</p>

<ul className="list-disc list-inside text-xs text-gray-600 space-y-1.5">

<li>You can still explore products using mood selection.</li>

<li>Image upload and camera-based suggestions may be limited.</li>

</ul>

</div>

{/* Buttons */}
<div className="flex flex-col gap-2.5">

<button
onClick={onGivePermission}
className="inline-flex items-center justify-center rounded-xl bg-black text-white text-sm font-medium py-2.5 w-full active:scale-[0.98] transition-transform"
>
            Give camera permission

</button>

<button
onClick={onContinueWithout}
className="inline-flex items-center justify-center rounded-xl border border-gray-200 bg-white text-sm font-medium text-gray-800 py-2.5 w-full hover:bg-gray-50 active:scale-[0.98] transition-transform"
>
   Continue without camera
</button>

<button
onClick={closeMini}
className="inline-flex items-center justify-center rounded-xl text-xs font-medium text-gray-500 py-2 w-full hover:text-gray-700"
>
   Close mini
</button>
</div>
</div>
</div>
);

}
4

Ok I tried but could not reproduce this issue, can you try this code:

import { useCloseMini, useRequestPermissions, Button } from "@shopify/shop-minis-react"
import { useEffect, useState } from "react"

export function App() {
  const { closeMini } = useCloseMini()
  const { requestPermission } = useRequestPermissions()
  const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null)

  useEffect(() => {
    const checkCameraPermission = async () => {
      const result = await requestPermission({ permission: "CAMERA" })

      if (result.granted) {
        setPermissionGranted(true)
      } else {
        // User denied camera access - close the mini
        closeMini()
      }
    }

    checkCameraPermission()
  }, [requestPermission, closeMini])

  if (permissionGranted === null) {
    return (
      <div className="p-4">
        <p>Requesting camera permission...</p>
      </div>
    )
  }

  return (
    <div className="p-4 space-y-4">
      <h1 className="text-xl font-bold">Camera Access Granted</h1>
      <p>You can now use the camera features.</p>

      <Button onClick={() => closeMini()} className="w-full">
        Close Mini
      </Button>
    </div>
  )
}

If it’s still not working for you it might just be a local issue