@planningcenter/organization-avatars 1.6.3 → 1.7.0

package/README.md

@@ -2,15 +2,42 @@
 
 This package provides an `OrganizationAvatars` React component which encapsulates displaying and updating an organization's avatar.
 
-See [the component's type signature](https://github.com/planningcenter/organization-avatars/blob/main/src/types.ts) for up-to-date props.
-
 ## Usage
 
-If no `darkModeAvatarUrl` is provided, the `avatarUrl` will be rendered with dark styles in the dark mode avatar's UI slot.
+```tsx
+import { OrganizationAvatars } from "@planningcenter/organization-avatars"
+import "@planningcenter/organization-avatars/style.css"
+
+<OrganizationAvatars
+  orgName="Demo Church"
+  avatarUrl="https://example.com/avatar.png"
+  darkModeAvatarUrl="https://example.com/avatar-dark.png"
+  showDarkModeAvatar
+  onAvatarUpdate={(mode, newUrl) => console.log(mode, newUrl)}
+/>
+```
+
+To see a working example, see the [`/organization` page in Accounts](https://accounts.planningcenteronline.com/organization). The `OrganizationAvatars` component is mounted in [the `_church_information` partial](https://github.com/planningcenter/accounts/blob/main/app/views/organization/show/_church_information.html.erb).
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orgName` | `string` | **required** | The organization name, used for avatar alt text. |
+| `avatarUrl` | `string` | `undefined` | URL of the current light mode avatar. When no `darkModeAvatarUrl` is provided, this is also used for the dark mode slot. |
+| `darkModeAvatarUrl` | `string` | `undefined` | URL of the current dark mode avatar. Falls back to `avatarUrl` if not set. |
+| `showDarkModeAvatar` | `boolean` | `false` | Whether to render the dark mode avatar UI alongside the light mode avatar. Intended to be controlled by a feature flag. |
+| `onAvatarUpdate` | `(mode: AvatarMode, newUrl: string) => void` | `undefined` | Callback fired after a successful upload or delete. `mode` is `"avatar"` or `"dark_mode_avatar"`. `newUrl` is the new URL (or `""` on delete). |
+| `pcoEnv` | `Environment` | `undefined` | Planning Center environment override (`"production"`, `"staging"`, `"development"`, `"test"`, `"prototype"`). When omitted, the environment is inferred automatically. |
+| `readOnly` | `boolean` | `false` | Disables the edit button, preventing uploads and deletes. |
+
+### Types
 
-The `showDarkModeAvatar` prop gates the rendering of the dark mode avatar UI. It is intended to be controlled by a feature flag, and will eventually be removed when dark mode avatars have been rolled out.
+```ts
+type AvatarMode = "avatar" | "dark_mode_avatar"
 
-To see an example of how this package can be used, see the [`/organization` page in Accounts](https://accounts.planningcenteronline.com/organization). The `OrganizationAvatars` component is mounted in [the `_church_information` partial](https://github.com/planningcenter/accounts/blob/main/app/views/organization/show/_church_information.html.erb).
+type Environment = "production" | "staging" | "development" | "test" | "prototype"
+```
 
 ## Development
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),M=require("react-dom"),B=require("@planningcenter/url"),A=require("@planningcenter/tapestry"),x=require("@planningcenter/icons/paths/general"),O=require("@planningcenter/icons/paths/services"),P=require("react-dropzone");function z(a){var o,t,r="";if(typeof a=="string"||typeof a=="number")r+=a;else if(typeof a=="object")if(Array.isArray(a)){var l=a.length;for(o=0;o<l;o++)a[o]&&(t=z(a[o]))&&(r&&(r+=" "),r+=t)}else for(t in a)a[t]&&(r&&(r+=" "),r+=t);return r}function T(){for(var a,o,t=0,r="",l=arguments.length;t<l;t++)(a=arguments[t])&&(o=z(a))&&(r&&(r+=" "),r+=o);return r}function $(){const a=document.querySelector('meta[name="csrf-token"]');if(!a||!a.content)throw new Error('CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.');return a.content}function L(a){const o=a.split("");return[o.shift()?.toUpperCase(),o.join("")].join("")}const I=a=>a==="dark_mode_avatar"?"dark":"light";function S({avatarUrl:a,organization:o,mode:t,pcoEnv:r,readOnly:l,onAvatarUpdate:j}){const[s,g]=i.useState(null),[c,_]=i.useState(!1),[d,f]=i.useState(!1),[b,u]=i.useState(""),p=i.useId(),v=i.useRef(null),y=I(t),F=h=>{const[n]=h;n&&g(Object.assign(n,{preview:URL.createObjectURL(n)}))};i.useEffect(()=>()=>{s?.preview&&(URL.revokeObjectURL(s.preview),u(""))},[s]);const N=async h=>{const n=await fetch(B.pcoApiUrl("accounts",{env:r}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":$(),Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),m=await n.json();if(!n.ok)throw m;return m},R=async h=>{if(h.preventDefault(),!(!s||c||d)){_(!0);try{const n=new FileReader,m=await new Promise((w,k)=>{n.onloadend=()=>w(n.result),n.onerror=k,n.readAsDataURL(s)}),C=await N({[t]:m,[`${t}_cache`]:""});g(null),j(t,C.data.attributes[t].url),v.current?.close()}catch{u("We were unable to save your avatar.")}finally{_(!1)}}},U=async()=>{if(!(c||d)){f(!0);try{await N({[`remove_${t}`]:"1"}),j(t,""),v.current?.close()}catch{u("We were unable to delete your avatar.")}finally{f(!1)}}},q=()=>{g(null),u("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",onClick:()=>v.current?.showModal(),disabled:l,className:`pco-org-avatar__button pco-org-avatar__button--${y}`,children:a?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:a,alt:`Church logo for ${o}`}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.pencil})})})]}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:O.image})}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.pencil})})})]})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[L(y)," mode"]})]}),M.createPortal(e.jsx("dialog",{id:p,ref:v,className:"pco-org-avatar__dialog",onClose:q,children:e.jsxs("form",{onSubmit:R,children:[e.jsxs("div",{className:"pco-org-avatar__dialog-header",children:[e.jsxs("h1",{className:"pco-org-avatar__dialog-title",children:["Church logo — ",y," mode"]}),e.jsx("button",{type:"button",onClick:()=>v.current?.close(),className:"pco-org-avatar__dialog-close","aria-label":"Close modal",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:x.smallX})})})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-body",children:[b&&e.jsxs("div",{role:"alert",className:"pco-org-avatar__dialog-alert",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:x.exclamationTriangle})}),e.jsx("p",{children:b})]}),e.jsx(P,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:F,children:({getRootProps:h,getInputProps:n,isFocused:m,isDragAccept:C,isDragReject:w,isDragActive:k})=>{const D=T("pco-org-avatar__dialog-dropzone",`pco-org-avatar__dialog-dropzone--${y}`,{"pco-org-avatar__dialog-dropzone--image":s||a,"pco-org-avatar__dialog-dropzone--focused":m,"pco-org-avatar__dialog-dropzone--accepted":C,"pco-org-avatar__dialog-dropzone--rejected":k&&w});return e.jsxs("div",{...h({className:D}),children:[e.jsx("input",{...n()}),s?e.jsx("img",{src:s.preview,alt:`Church logo for ${o}`}):a?e.jsx("img",{src:a,alt:`Church logo for ${o}`}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"64",height:"64",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:x.toCloudArrow})}),k&&w?e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Wrong file type"}),e.jsx("p",{children:"Please upload a PNG or JPG file."})]}):e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Add church logo"}),e.jsx("p",{children:"Use a high-quality image (up to 20mb) with a transparent background."})]})]})]})}})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-actions",children:[a&&e.jsx(A.Button,{label:"Delete logo",kind:"delete",onClick:U,loading:d,disabled:d||c,className:"pco-org-avatar__dialog-delete"}),e.jsx(A.Button,{type:"button",label:"Cancel",onClick:()=>v.current?.close(),disabled:c||d}),e.jsx(A.Button,{type:"submit",label:"Update logo",kind:"primary",loading:c,disabled:!s||c||d})]})]})}),document.body)]})}function E({avatarUrl:a,darkModeAvatarUrl:o,orgName:t,onAvatarUpdate:r,pcoEnv:l,readOnly:j,showDarkModeAvatar:s=!1}){const[g,c]=i.useState(a),[_,d]=i.useState(o),f=(u,p)=>{u==="avatar"?(c(p),r?.("avatar",p)):u==="dark_mode_avatar"&&(d(p),r?.("dark_mode_avatar",p))},b=_||g;return e.jsxs("div",{className:"pco-org-avatars",children:[e.jsx(S,{avatarUrl:g,organization:t,mode:"avatar",pcoEnv:l,readOnly:j,onAvatarUpdate:f}),s&&e.jsx(S,{avatarUrl:b,organization:t,mode:"dark_mode_avatar",pcoEnv:l,readOnly:j,onAvatarUpdate:f})]})}exports.OrganizationAvatars=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("react-dom"),$=require("@planningcenter/url"),b=require("@planningcenter/tapestry"),I=require("@planningcenter/sweetest-alert"),_=require("@planningcenter/icons/paths/general"),L=require("@planningcenter/icons/paths/services"),E=require("react-dropzone");function B(a){var r,t,o="";if(typeof a=="string"||typeof a=="number")o+=a;else if(typeof a=="object")if(Array.isArray(a)){var d=a.length;for(r=0;r<d;r++)a[r]&&(t=B(a[r]))&&(o&&(o+=" "),o+=t)}else for(t in a)a[t]&&(o&&(o+=" "),o+=t);return o}function W(){for(var a,r,t=0,o="",d=arguments.length;t<d;t++)(a=arguments[t])&&(r=B(a))&&(o&&(o+=" "),o+=r);return o}function G(){const a=document.querySelector('meta[name="csrf-token"]');if(!a||!a.content)throw new Error('CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.');return a.content}function J(a){const r=a.split("");return[r.shift()?.toUpperCase(),r.join("")].join("")}const X=a=>a==="dark_mode_avatar"?"dark":"light",z=({open:a})=>e.jsxs("h2",{className:"pco-org-avatar__instructions",children:["Drag & drop your logo file to upload, or"," ",e.jsx(b.Button,{label:"browse",kind:"inline-text",onClick:r=>{r.stopPropagation(),a()}})]});function F({avatarUrl:a,organization:r,mode:t,pcoEnv:o,readOnly:d,onAvatarUpdate:x,fallbackAvatarUrl:A}){const[n,f]=c.useState(null),[l,y]=c.useState(!1),[i,p]=c.useState(!1),[u,w]=c.useState(""),q=c.useId(),v=c.useRef(null),g=X(t),m=a||A,D=h=>{const[s]=h;s&&f(Object.assign(s,{preview:URL.createObjectURL(s)}))};c.useEffect(()=>()=>{n?.preview&&(URL.revokeObjectURL(n.preview),w(""))},[n]);const S=async h=>{const s=await fetch($.pcoApiUrl("accounts",{env:o}),{method:"PATCH",headers:{"Content-Type":"application/json","X-CSRF-Token":G(),Accept:"application/json"},body:JSON.stringify({data:{attributes:h}})}),j=await s.json();if(!s.ok)throw j;return j},M=async h=>{if(h.preventDefault(),!(!n||l||i)){y(!0);try{const s=new FileReader,j=await new Promise((k,C)=>{s.onloadend=()=>k(s.result),s.onerror=C,s.readAsDataURL(n)}),N=await S({[t]:j,[`${t}_cache`]:""});f(null),x(t,N.data.attributes[t].url),v.current?.close()}catch{w("We were unable to save your avatar.")}finally{y(!1)}}},U=async()=>{l||i||(p(!0),I.SweetestAlert({type:"danger",title:"Remove this logo?",content:`Removing this logo will mean your light mode logo appear in ${g} mode. This cannot be undone.`,confirmButton:"Remove logo",onConfirm:async()=>{try{await S({[`remove_${t}`]:"1"}),x(t,""),v.current?.close()}catch{w("We were unable to delete your avatar.")}finally{p(!1)}},onCancel:()=>{p(!1)}}))},O=()=>{f(null),w("")};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pco-org-avatar",children:[e.jsx("button",{type:"button",onClick:()=>v.current?.showModal(),disabled:d,className:`pco-org-avatar__button pco-org-avatar__button--${g}`,children:m?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:m,alt:`Church logo for ${r}`}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:_.pencil})})})]}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"48",height:"48",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:L.image})}),e.jsx("div",{className:"tds-btn tds-btn--interaction tds-btn--icononly",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:_.pencil})})})]})}),e.jsxs("div",{className:"pco-org-avatar__label",children:[J(g)," mode"]})]}),T.createPortal(e.jsx("dialog",{id:q,ref:v,className:"pco-org-avatar__dialog",onClose:O,children:e.jsxs("form",{onSubmit:M,children:[e.jsxs("div",{className:"pco-org-avatar__dialog-header",children:[e.jsxs("h1",{className:"pco-org-avatar__dialog-title",children:["Church logo — ",g," mode"]}),e.jsx("button",{type:"button",onClick:()=>v.current?.close(),className:"pco-org-avatar__dialog-close","aria-label":"Close modal",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:_.smallX})})})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-body",children:[u&&e.jsxs("div",{role:"alert",className:"pco-org-avatar__dialog-alert",children:[e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",className:"symbol","aria-hidden":"true",children:e.jsx("path",{d:_.exclamationTriangle})}),e.jsx("p",{children:u})]}),e.jsx(E,{accept:{"image/*":[".jpg",".jpeg",".png"]},multiple:!1,onDropAccepted:D,children:({getRootProps:h,getInputProps:s,isFocused:j,isDragAccept:N,isDragReject:k,isDragActive:C,open:R})=>{const P=W("pco-org-avatar__dialog-dropzone",`pco-org-avatar__dialog-dropzone--${g}`,{"pco-org-avatar__dialog-dropzone--image":n||m,"pco-org-avatar__dialog-dropzone--focused":j,"pco-org-avatar__dialog-dropzone--accepted":N,"pco-org-avatar__dialog-dropzone--rejected":C&&k});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...h({className:P}),children:[e.jsx("input",{...s()}),n?e.jsx("img",{src:n.preview,alt:`Church logo for ${r}`}):m?e.jsx("img",{src:m,alt:`Church logo for ${r}`}):e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"64",height:"64",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:_.toCloudArrow})}),C&&k?e.jsxs(e.Fragment,{children:[e.jsx("h2",{children:"Wrong file type"}),e.jsx("p",{children:"Please upload a PNG or JPG file."})]}):e.jsxs(e.Fragment,{children:[e.jsx(z,{open:R}),e.jsx("p",{className:"pco-org-avatar__instructions-sub",children:"Use a high-quality image (up to 20mb) with a transparent background."})]})]})]}),(n||m)&&e.jsx(z,{open:R})]})}})]}),e.jsxs("div",{className:"pco-org-avatar__dialog-actions",children:[a&&g==="light"&&e.jsx(b.Button,{label:"Remove logo",kind:"secondary-delete",onClick:U,loading:i,disabled:i||l,className:"pco-org-avatar__dialog-delete"}),a&&g==="dark"&&e.jsx(b.Button,{label:"Use light mode logo",kind:"secondary",onClick:U,loading:i,disabled:i||l,className:"pco-org-avatar__dialog-delete"}),e.jsx(b.Button,{type:"button",label:"Cancel",onClick:()=>v.current?.close(),disabled:l||i}),e.jsx(b.Button,{type:"submit",label:"Update logo",kind:"primary",loading:l,disabled:!n||l||i})]})]})}),document.body)]})}function H({avatarUrl:a,darkModeAvatarUrl:r,orgName:t,onAvatarUpdate:o,pcoEnv:d,readOnly:x,showDarkModeAvatar:A=!1}){const[n,f]=c.useState(a),[l,y]=c.useState(r),i=(p,u)=>{p==="avatar"?(f(u),o?.("avatar",u)):p==="dark_mode_avatar"&&(y(u),o?.("dark_mode_avatar",u))};return e.jsxs("div",{className:"pco-org-avatars",children:[e.jsx(F,{avatarUrl:n,organization:t,mode:"avatar",pcoEnv:d,readOnly:x,onAvatarUpdate:i}),A&&e.jsx(F,{avatarUrl:l,organization:t,mode:"dark_mode_avatar",pcoEnv:d,readOnly:x,onAvatarUpdate:i,fallbackAvatarUrl:n})]})}exports.OrganizationAvatars=H;

package/dist/index.js

@@ -1,117 +1,140 @@
-import { jsxs as n, Fragment as f, jsx as e } from "react/jsx-runtime";
-import { useState as _, useId as O, useRef as P, useEffect as T } from "react";
-import { createPortal as L } from "react-dom";
-import { pcoApiUrl as I } from "@planningcenter/url";
-import { Button as z } from "@planningcenter/tapestry";
-import { pencil as x, smallX as E, exclamationTriangle as W, toCloudArrow as q } from "@planningcenter/icons/paths/general";
-import { image as G } from "@planningcenter/icons/paths/services";
-import J from "react-dropzone";
-function M(a) {
+import { jsxs as n, Fragment as u, jsx as a } from "react/jsx-runtime";
+import { useState as b, useId as L, useRef as E, useEffect as W } from "react";
+import { createPortal as q } from "react-dom";
+import { pcoApiUrl as G } from "@planningcenter/url";
+import { Button as k } from "@planningcenter/tapestry";
+import { SweetestAlert as J } from "@planningcenter/sweetest-alert";
+import { pencil as B, smallX as X, exclamationTriangle as H, toCloudArrow as K } from "@planningcenter/icons/paths/general";
+import { image as Q } from "@planningcenter/icons/paths/services";
+import V from "react-dropzone";
+function M(e) {
   var o, r, t = "";
-  if (typeof a == "string" || typeof a == "number") t += a;
-  else if (typeof a == "object") if (Array.isArray(a)) {
-    var c = a.length;
-    for (o = 0; o < c; o++) a[o] && (r = M(a[o])) && (t && (t += " "), t += r);
-  } else for (r in a) a[r] && (t && (t += " "), t += r);
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var s = e.length;
+    for (o = 0; o < s; o++) e[o] && (r = M(e[o])) && (t && (t += " "), t += r);
+  } else for (r in e) e[r] && (t && (t += " "), t += r);
   return t;
 }
-function X() {
-  for (var a, o, r = 0, t = "", c = arguments.length; r < c; r++) (a = arguments[r]) && (o = M(a)) && (t && (t += " "), t += o);
+function Y() {
+  for (var e, o, r = 0, t = "", s = arguments.length; r < s; r++) (e = arguments[r]) && (o = M(e)) && (t && (t += " "), t += o);
   return t;
 }
-function H() {
-  const a = document.querySelector('meta[name="csrf-token"]');
-  if (!a || !a.content)
+function Z() {
+  const e = document.querySelector('meta[name="csrf-token"]');
+  if (!e || !e.content)
     throw new Error(
       'CSRF token not found. Ensure your Rails application includes <meta name="csrf-token" content="..."> in the document head.'
     );
-  return a.content;
+  return e.content;
 }
-function K(a) {
-  const o = a.split("");
+function aa(e) {
+  const o = e.split("");
   return [o.shift()?.toUpperCase(), o.join("")].join("");
 }
-const Q = (a) => a === "dark_mode_avatar" ? "dark" : "light";
-function D({
-  avatarUrl: a,
+const ea = (e) => e === "dark_mode_avatar" ? "dark" : "light", D = ({ open: e }) => /* @__PURE__ */ n("h2", { className: "pco-org-avatar__instructions", children: [
+  "Drag & drop your logo file to upload, or",
+  " ",
+  /* @__PURE__ */ a(
+    k,
+    {
+      label: "browse",
+      kind: "inline-text",
+      onClick: (o) => {
+        o.stopPropagation(), e();
+      }
+    }
+  )
+] });
+function F({
+  avatarUrl: e,
   organization: o,
   mode: r,
   pcoEnv: t,
-  readOnly: c,
-  onAvatarUpdate: b
+  readOnly: s,
+  onAvatarUpdate: y,
+  fallbackAvatarUrl: R
 }) {
-  const [l, p] = _(null), [d, w] = _(!1), [s, y] = _(!1), [N, h] = _(""), g = O(), m = P(null), k = Q(r), R = (u) => {
-    const [i] = u;
-    i && p(
-      Object.assign(i, {
-        preview: URL.createObjectURL(i)
+  const [i, w] = b(null), [d, C] = b(!1), [c, m] = b(!1), [g, A] = b(""), $ = L(), v = E(null), h = ea(r), f = e || R, P = (p) => {
+    const [l] = p;
+    l && w(
+      Object.assign(l, {
+        preview: URL.createObjectURL(l)
       })
     );
   };
-  T(() => () => {
-    l?.preview && (URL.revokeObjectURL(l.preview), h(""));
-  }, [l]);
-  const U = async (u) => {
-    const i = await fetch(I("accounts", { env: t }), {
+  W(() => () => {
+    i?.preview && (URL.revokeObjectURL(i.preview), A(""));
+  }, [i]);
+  const z = async (p) => {
+    const l = await fetch(G("accounts", { env: t }), {
       method: "PATCH",
       headers: {
         "Content-Type": "application/json",
-        "X-CSRF-Token": H(),
+        "X-CSRF-Token": Z(),
         Accept: "application/json"
       },
       body: JSON.stringify({
         data: {
-          attributes: u
+          attributes: p
         }
       })
-    }), v = await i.json();
-    if (!i.ok) throw v;
-    return v;
-  }, S = async (u) => {
-    if (u.preventDefault(), !(!l || d || s)) {
-      w(!0);
+    }), _ = await l.json();
+    if (!l.ok) throw _;
+    return _;
+  }, T = async (p) => {
+    if (p.preventDefault(), !(!i || d || c)) {
+      C(!0);
       try {
-        const i = new FileReader(), v = await new Promise((C, A) => {
-          i.onloadend = () => C(i.result), i.onerror = A, i.readAsDataURL(l);
-        }), j = await U({
-          [r]: v,
+        const l = new FileReader(), _ = await new Promise((N, U) => {
+          l.onloadend = () => N(l.result), l.onerror = U, l.readAsDataURL(i);
+        }), j = await z({
+          [r]: _,
           [`${r}_cache`]: ""
         });
-        p(null), b(r, j.data.attributes[r].url), m.current?.close();
+        w(null), y(r, j.data.attributes[r].url), v.current?.close();
       } catch {
-        h("We were unable to save your avatar.");
+        A("We were unable to save your avatar.");
       } finally {
-        w(!1);
+        C(!1);
       }
     }
-  }, F = async () => {
-    if (!(d || s)) {
-      y(!0);
-      try {
-        await U({
-          [`remove_${r}`]: "1"
-        }), b(r, ""), m.current?.close();
-      } catch {
-        h("We were unable to delete your avatar.");
-      } finally {
-        y(!1);
+  }, x = async () => {
+    d || c || (m(!0), J({
+      type: "danger",
+      title: "Remove this logo?",
+      content: `Removing this logo will mean your light mode logo appear in ${h} mode. This cannot be undone.`,
+      confirmButton: "Remove logo",
+      onConfirm: async () => {
+        try {
+          await z({
+            [`remove_${r}`]: "1"
+          }), y(r, ""), v.current?.close();
+        } catch {
+          A("We were unable to delete your avatar.");
+        } finally {
+          m(!1);
+        }
+      },
+      onCancel: () => {
+        m(!1);
       }
-    }
-  }, B = () => {
-    p(null), h("");
+    }));
+  }, O = () => {
+    w(null), A("");
   };
-  return /* @__PURE__ */ n(f, { children: [
+  return /* @__PURE__ */ n(u, { children: [
     /* @__PURE__ */ n("div", { className: "pco-org-avatar", children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => m.current?.showModal(),
-          disabled: c,
-          className: `pco-org-avatar__button pco-org-avatar__button--${k}`,
-          children: a ? /* @__PURE__ */ n(f, { children: [
-            /* @__PURE__ */ e("img", { src: a, alt: `Church logo for ${o}` }),
-            /* @__PURE__ */ e("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ e(
+          onClick: () => v.current?.showModal(),
+          disabled: s,
+          className: `pco-org-avatar__button pco-org-avatar__button--${h}`,
+          children: f ? /* @__PURE__ */ n(u, { children: [
+            /* @__PURE__ */ a("img", { src: f, alt: `Church logo for ${o}` }),
+            /* @__PURE__ */ a("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ a(
               "svg",
               {
                 width: "14",
@@ -119,11 +142,11 @@ function D({
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: x })
+                children: /* @__PURE__ */ a("path", { d: B })
               }
             ) })
-          ] }) : /* @__PURE__ */ n(f, { children: [
-            /* @__PURE__ */ e(
+          ] }) : /* @__PURE__ */ n(u, { children: [
+            /* @__PURE__ */ a(
               "svg",
               {
                 width: "48",
@@ -131,10 +154,10 @@ function D({
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: G })
+                children: /* @__PURE__ */ a("path", { d: Q })
               }
             ),
-            /* @__PURE__ */ e("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ e(
+            /* @__PURE__ */ a("div", { className: "tds-btn tds-btn--interaction tds-btn--icononly", children: /* @__PURE__ */ a(
               "svg",
               {
                 width: "14",
@@ -142,40 +165,40 @@ function D({
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ e("path", { d: x })
+                children: /* @__PURE__ */ a("path", { d: B })
               }
             ) })
           ] })
         }
       ),
       /* @__PURE__ */ n("div", { className: "pco-org-avatar__label", children: [
-        K(k),
+        aa(h),
         " mode"
       ] })
     ] }),
-    L(
-      /* @__PURE__ */ e(
+    q(
+      /* @__PURE__ */ a(
         "dialog",
         {
-          id: g,
-          ref: m,
+          id: $,
+          ref: v,
           className: "pco-org-avatar__dialog",
-          onClose: B,
-          children: /* @__PURE__ */ n("form", { onSubmit: S, children: [
+          onClose: O,
+          children: /* @__PURE__ */ n("form", { onSubmit: T, children: [
             /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-header", children: [
               /* @__PURE__ */ n("h1", { className: "pco-org-avatar__dialog-title", children: [
                 "Church logo — ",
-                k,
+                h,
                 " mode"
               ] }),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  onClick: () => m.current?.close(),
+                  onClick: () => v.current?.close(),
                   className: "pco-org-avatar__dialog-close",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ e(
+                  children: /* @__PURE__ */ a(
                     "svg",
                     {
                       width: "16",
@@ -183,15 +206,15 @@ function D({
                       viewBox: "0 0 16 16",
                       fill: "currentColor",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ e("path", { d: E })
+                      children: /* @__PURE__ */ a("path", { d: X })
                     }
                   )
                 }
               )
             ] }),
             /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-body", children: [
-              N && /* @__PURE__ */ n("div", { role: "alert", className: "pco-org-avatar__dialog-alert", children: [
-                /* @__PURE__ */ e(
+              g && /* @__PURE__ */ n("div", { role: "alert", className: "pco-org-avatar__dialog-alert", children: [
+                /* @__PURE__ */ a(
                   "svg",
                   {
                     width: "16",
@@ -199,102 +222,117 @@ function D({
                     viewBox: "0 0 16 16",
                     className: "symbol",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ e("path", { d: W })
+                    children: /* @__PURE__ */ a("path", { d: H })
                   }
                 ),
-                /* @__PURE__ */ e("p", { children: N })
+                /* @__PURE__ */ a("p", { children: g })
               ] }),
-              /* @__PURE__ */ e(
-                J,
+              /* @__PURE__ */ a(
+                V,
                 {
                   accept: { "image/*": [".jpg", ".jpeg", ".png"] },
                   multiple: !1,
-                  onDropAccepted: R,
+                  onDropAccepted: P,
                   children: ({
-                    getRootProps: u,
-                    getInputProps: i,
-                    isFocused: v,
+                    getRootProps: p,
+                    getInputProps: l,
+                    isFocused: _,
                     isDragAccept: j,
-                    isDragReject: C,
-                    isDragActive: A
+                    isDragReject: N,
+                    isDragActive: U,
+                    open: S
                   }) => {
-                    const $ = X(
+                    const I = Y(
                       "pco-org-avatar__dialog-dropzone",
-                      `pco-org-avatar__dialog-dropzone--${k}`,
+                      `pco-org-avatar__dialog-dropzone--${h}`,
                       {
-                        "pco-org-avatar__dialog-dropzone--image": l || a,
-                        "pco-org-avatar__dialog-dropzone--focused": v,
+                        "pco-org-avatar__dialog-dropzone--image": i || f,
+                        "pco-org-avatar__dialog-dropzone--focused": _,
                         "pco-org-avatar__dialog-dropzone--accepted": j,
-                        "pco-org-avatar__dialog-dropzone--rejected": A && C
+                        "pco-org-avatar__dialog-dropzone--rejected": U && N
                       }
                     );
-                    return /* @__PURE__ */ n("div", { ...u({ className: $ }), children: [
-                      /* @__PURE__ */ e("input", { ...i() }),
-                      l ? /* @__PURE__ */ e(
-                        "img",
-                        {
-                          src: l.preview,
-                          alt: `Church logo for ${o}`
-                        }
-                      ) : a ? /* @__PURE__ */ e(
-                        "img",
-                        {
-                          src: a,
-                          alt: `Church logo for ${o}`
-                        }
-                      ) : /* @__PURE__ */ n(f, { children: [
-                        /* @__PURE__ */ e(
-                          "svg",
+                    return /* @__PURE__ */ n(u, { children: [
+                      /* @__PURE__ */ n("div", { ...p({ className: I }), children: [
+                        /* @__PURE__ */ a("input", { ...l() }),
+                        i ? /* @__PURE__ */ a(
+                          "img",
                           {
-                            width: "64",
-                            height: "64",
-                            viewBox: "0 0 16 16",
-                            "aria-hidden": "true",
-                            children: /* @__PURE__ */ e("path", { d: q })
+                            src: i.preview,
+                            alt: `Church logo for ${o}`
                           }
-                        ),
-                        A && C ? /* @__PURE__ */ n(f, { children: [
-                          /* @__PURE__ */ e("h2", { children: "Wrong file type" }),
-                          /* @__PURE__ */ e("p", { children: "Please upload a PNG or JPG file." })
-                        ] }) : /* @__PURE__ */ n(f, { children: [
-                          /* @__PURE__ */ e("h2", { children: "Add church logo" }),
-                          /* @__PURE__ */ e("p", { children: "Use a high-quality image (up to 20mb) with a transparent background." })
+                        ) : f ? /* @__PURE__ */ a(
+                          "img",
+                          {
+                            src: f,
+                            alt: `Church logo for ${o}`
+                          }
+                        ) : /* @__PURE__ */ n(u, { children: [
+                          /* @__PURE__ */ a(
+                            "svg",
+                            {
+                              width: "64",
+                              height: "64",
+                              viewBox: "0 0 16 16",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ a("path", { d: K })
+                            }
+                          ),
+                          U && N ? /* @__PURE__ */ n(u, { children: [
+                            /* @__PURE__ */ a("h2", { children: "Wrong file type" }),
+                            /* @__PURE__ */ a("p", { children: "Please upload a PNG or JPG file." })
+                          ] }) : /* @__PURE__ */ n(u, { children: [
+                            /* @__PURE__ */ a(D, { open: S }),
+                            /* @__PURE__ */ a("p", { className: "pco-org-avatar__instructions-sub", children: "Use a high-quality image (up to 20mb) with a transparent background." })
+                          ] })
                         ] })
-                      ] })
+                      ] }),
+                      (i || f) && /* @__PURE__ */ a(D, { open: S })
                     ] });
                   }
                 }
               )
             ] }),
             /* @__PURE__ */ n("div", { className: "pco-org-avatar__dialog-actions", children: [
-              a && /* @__PURE__ */ e(
-                z,
+              e && h === "light" && /* @__PURE__ */ a(
+                k,
                 {
-                  label: "Delete logo",
-                  kind: "delete",
-                  onClick: F,
-                  loading: s,
-                  disabled: s || d,
+                  label: "Remove logo",
+                  kind: "secondary-delete",
+                  onClick: x,
+                  loading: c,
+                  disabled: c || d,
                   className: "pco-org-avatar__dialog-delete"
                 }
               ),
-              /* @__PURE__ */ e(
-                z,
+              e && h === "dark" && /* @__PURE__ */ a(
+                k,
+                {
+                  label: "Use light mode logo",
+                  kind: "secondary",
+                  onClick: x,
+                  loading: c,
+                  disabled: c || d,
+                  className: "pco-org-avatar__dialog-delete"
+                }
+              ),
+              /* @__PURE__ */ a(
+                k,
                 {
                   type: "button",
                   label: "Cancel",
-                  onClick: () => m.current?.close(),
-                  disabled: d || s
+                  onClick: () => v.current?.close(),
+                  disabled: d || c
                 }
               ),
-              /* @__PURE__ */ e(
-                z,
+              /* @__PURE__ */ a(
+                k,
                 {
                   type: "submit",
                   label: "Update logo",
                   kind: "primary",
                   loading: d,
-                  disabled: !l || d || s
+                  disabled: !i || d || c
                 }
               )
             ] })
@@ -305,45 +343,46 @@ function D({
     )
   ] });
 }
-function ne({
-  avatarUrl: a,
+function ga({
+  avatarUrl: e,
   darkModeAvatarUrl: o,
   orgName: r,
   onAvatarUpdate: t,
-  pcoEnv: c,
-  readOnly: b,
-  showDarkModeAvatar: l = !1
+  pcoEnv: s,
+  readOnly: y,
+  showDarkModeAvatar: R = !1
 }) {
-  const [p, d] = _(a), [w, s] = _(
+  const [i, w] = b(e), [d, C] = b(
     o
-  ), y = (h, g) => {
-    h === "avatar" ? (d(g), t?.("avatar", g)) : h === "dark_mode_avatar" && (s(g), t?.("dark_mode_avatar", g));
+  ), c = (m, g) => {
+    m === "avatar" ? (w(g), t?.("avatar", g)) : m === "dark_mode_avatar" && (C(g), t?.("dark_mode_avatar", g));
   };
   return /* @__PURE__ */ n("div", { className: "pco-org-avatars", children: [
-    /* @__PURE__ */ e(
-      D,
+    /* @__PURE__ */ a(
+      F,
       {
-        avatarUrl: p,
+        avatarUrl: i,
         organization: r,
         mode: "avatar",
-        pcoEnv: c,
-        readOnly: b,
-        onAvatarUpdate: y
+        pcoEnv: s,
+        readOnly: y,
+        onAvatarUpdate: c
       }
     ),
-    l && /* @__PURE__ */ e(
-      D,
+    R && /* @__PURE__ */ a(
+      F,
       {
-        avatarUrl: w || p,
+        avatarUrl: d,
         organization: r,
         mode: "dark_mode_avatar",
-        pcoEnv: c,
-        readOnly: b,
-        onAvatarUpdate: y
+        pcoEnv: s,
+        readOnly: y,
+        onAvatarUpdate: c,
+        fallbackAvatarUrl: i
       }
     )
   ] });
 }
 export {
-  ne as OrganizationAvatars
+  ga as OrganizationAvatars
 };

package/dist/organization_avatar.d.ts

@@ -1,2 +1,2 @@
 import type { OrganizationAvatarProps } from "./types";
-export declare function OrganizationAvatar({ avatarUrl, organization, mode, pcoEnv, readOnly, onAvatarUpdate, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function OrganizationAvatar({ avatarUrl, organization, mode, pcoEnv, readOnly, onAvatarUpdate, fallbackAvatarUrl, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/style.css

@@ -178,19 +178,6 @@
   fill: var(--t-icon-color-status-info);
 }
 
-.pco-org-avatar__dialog-dropzone h2 {
-  color: var(--t-text-color-headline);
-  font-size: var(--t-font-size-md);
-  font-weight: var(--t-font-weight-normal);
-  margin: 0;
-}
-
-.pco-org-avatar__dialog-dropzone p {
-  color: var(--t-text-color-placeholder);
-  font-size: var(--t-font-size-sm);
-  margin: 0;
-}
-
 .pco-org-avatar__dialog-dropzone img {
   max-height: 100%;
   max-width: 100%;
@@ -222,11 +209,25 @@
   fill: var(--t-fill-color-status-error);
 }
 
-/* Light/dark backgrounds are hardcoded to match the avatar preview context,
+.pco-org-avatar__instructions {
+  font-size: var(--t-font-size-md);
+  font-weight: var(--t-font-weight-normal);
+  margin: var(--t-spacing-2) 0 0;
+  text-align: center;
+}
+
+.pco-org-avatar__instructions-sub {
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-sm);
+  margin: 0;
+}
+
+/* Light/dark colors/backgrounds are hardcoded to match the avatar preview context,
    regardless of the UI theme or whether an avatar is uploaded */
+
 .pco-org-avatar__button--light,
 .pco-org-avatar__dialog-dropzone--light {
-  background: hsl(0, 0%, 100%);
+  background: hsl(0, 0%, 97%);
 }
 
 .pco-org-avatar__button--light:has(img),
@@ -243,3 +244,11 @@
 .pco-org-avatar__dialog-dropzone--dark:has(img) {
   border-color: transparent;
 }
+
+.pco-org-avatar__dialog-dropzone--light .pco-org-avatar__instructions {
+  color: hsl(0, 0%, 12%);
+}
+
+.pco-org-avatar__dialog-dropzone--dark .pco-org-avatar__instructions {
+  color: hsl(0, 0%, 94%);
+}

package/dist/types.d.ts

@@ -16,6 +16,7 @@ export type OrganizationAvatarProps = {
     pcoEnv?: Environment;
     readOnly?: boolean;
     onAvatarUpdate: (attrName: AvatarMode, newUrl: string) => void;
+    fallbackAvatarUrl?: string;
 };
 export type FileWithPreview = File & {
     preview: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/organization-avatars",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "Organization avatar upload components for Planning Center apps",
   "type": "module",
   "packageManager": "yarn@1.22.22",
@@ -31,14 +31,19 @@
   },
   "peerDependencies": {
     "@planningcenter/icons": "^15.29.1",
+    "@planningcenter/sweetest-alert": "^1.0.1",
     "@planningcenter/tapestry": "^2.10.1",
     "@planningcenter/url": "^3.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.0.0"
   },
+  "prettier": {
+    "semi": false
+  },
   "devDependencies": {
     "@planningcenter/icons": "^15.29.1",
+    "@planningcenter/sweetest-alert": "^1.0.1",
     "@planningcenter/tapestry": "^2.10.1",
     "@planningcenter/url": "^3.2.0",
     "@types/react": "^18.3.0",