Merge branch 'main' into amir/0XP-1662

apps/passport-client/new-components/screens/Home/NewHomeScreen.tsx

@@ -6,7 +6,6 @@ import {
 } from "../../../components/screens/ZappScreens/ZappButton";
 import { ZappButtonsContainer } from "../../../components/screens/ZappScreens/ZappButtonsContainer";
 import { ZappFullScreen } from "../../../components/screens/ZappScreens/ZappFullScreen";
-import { ZappScreen } from "../../../components/screens/ZappScreens/ZappScreen";
 import { AppContainer } from "../../../components/shared/AppContainer";
 import { CardBody } from "../../../components/shared/PCDCard";
 import { appConfig } from "../../../src/appConfig";
@@ -493,8 +492,12 @@ export const NewHomeScreen = (): ReactElement => {
                             setParams({ folder: zappName });
                           }}
                         >
-                          <ZappScreen
-                            url={new URL(
+                          <iframe
+                            style={{
+                              width: "100%",
+                              height: "100%"
+                            }}
+                            src={new URL(
                               `button/${self?.semaphore_v4_commitment ?? ""}`,
                               url
                             ).toString()}

apps/passport-client/new-components/screens/Home/SyncIndicator.tsx

@@ -3,33 +3,53 @@ import { useIsSyncSettled } from "../../../src/appHooks";
 import { NewLoader } from "../../shared/NewLoader";
 import { Typography } from "../../shared/Typography";
 
+const syncStates = {
+  now: (_: number): string => "Synced just now",
+  near: (_: number): string => "Synced a few seconds ago",
+  aboutMinute: (_: number): string => "Synced about a minute ago",
+  minutes: (seconds: number): string => `Synced ${seconds / 60} minutes ago`
+} as const;
+
+const getSyncState = (seconds: number): keyof typeof syncStates => {
+  switch (true) {
+    case seconds <= 10:
+      return "now";
+    case seconds <= 50:
+      return "near";
+    case seconds <= 120:
+      return "aboutMinute";
+    default:
+      return "minutes";
+  }
+};
 export const SyncIndicator = (): ReactElement => {
-  const [minutesSinceSynced, setMinutesSinceSynced] = useState(0);
+  const [syncState, setSyncState] = useState<string | undefined>();
   const isSyncSettled = useIsSyncSettled();
 
   useEffect(() => {
+    let seconds = 0;
     const interval = setInterval(() => {
       if (isSyncSettled) {
-        setMinutesSinceSynced((oldValue) => oldValue + 1);
+        seconds += 10;
+        setSyncState(syncStates[getSyncState(seconds)](seconds));
       } else {
-        setMinutesSinceSynced(0);
+        setSyncState(undefined);
+        seconds = 0;
       }
-    }, 60000);
+    }, 10000);
 
+    if (isSyncSettled) {
+      seconds += 10;
+      setSyncState(syncStates[getSyncState(seconds)](seconds));
+    } else {
+      setSyncState(undefined);
+      seconds = 0;
+    }
     return () => clearInterval(interval);
   }, [isSyncSettled]);
 
-  if (isSyncSettled) {
-    if (minutesSinceSynced) {
-      return (
-        <Typography color="var(--text-tertiary)">
-          Synced {minutesSinceSynced} minute
-          {minutesSinceSynced > 1 ? "s" : ""} ago
-        </Typography>
-      );
-    } else {
-      return <Typography color="var(--text-tertiary)">Just synced</Typography>;
-    }
+  if (isSyncSettled && syncState) {
+    return <Typography color="var(--text-tertiary)">{syncState}</Typography>;
   }
   return (
     <Typography

apps/passport-client/new-components/shared/Modals/PodsCollectionBottomModal.tsx

@@ -1,9 +1,5 @@
 import { isEdDSAFrogPCD } from "@pcd/eddsa-frog-pcd";
-
-import {
-  EdDSATicketPCDTypeName,
-  isEdDSATicketPCD
-} from "@pcd/eddsa-ticket-pcd";
+import { isEdDSATicketPCD } from "@pcd/eddsa-ticket-pcd";
 import { isEmailPCD } from "@pcd/email-pcd";
 import { PCD } from "@pcd/pcd-types";
 import {
@@ -45,24 +41,25 @@ import {
   replaceDotWithSlash,
   useOrientation
 } from "../utils";
-import { uniqWith } from "lodash";
 
 const filterOverlappingEdDSATickets = (
   pcds: PCD<unknown, unknown>[]
 ): PCD<unknown, unknown>[] => {
-  const noDupTickets = uniqWith(pcds.reverse(), (a, b) => {
-    const isPodOrEddsa1 = isPODTicketPCD(a) || isEdDSATicketPCD(a);
-    const isPodOrEddsa2 = isPODTicketPCD(b) || isEdDSATicketPCD(b);
-    if (!isPodOrEddsa1 || !isPodOrEddsa2) return false;
-    return (
-      a.claim.ticket.attendeeEmail === b.claim.ticket.attendeeEmail &&
-      a.claim.ticket.eventId === b.claim.ticket.eventId &&
-      a.type === EdDSATicketPCDTypeName
-    );
-  });
+  const eddsaTickets = pcds.filter(isEdDSATicketPCD);
+  const podTickets = pcds.filter(isPODTicketPCD);
+  const overlapping = eddsaTickets
+    .filter((eddsa) =>
+      podTickets.find(
+        (pod) =>
+          pod.claim.ticket.attendeeEmail === eddsa.claim.ticket.attendeeEmail &&
+          pod.claim.ticket.eventId === eddsa.claim.ticket.eventId
+      )
+    )
+    .map((eddsa) => eddsa.id);
+
+  const noEmails = pcds.filter((p) => !isEmailPCD(p));
 
-  const noEmails = noDupTickets.filter((p) => !isEmailPCD(p));
-  return noEmails;
+  return noEmails.filter((pcd) => !overlapping.includes(pcd.id));
 };
 const getPcdName = (pcd: PCD<unknown, unknown>): string => {
   switch (true) {
@@ -155,7 +152,6 @@ export const PodsCollectionList = ({
         LeftIcon: getPCDImage(pcd)
       });
     }
-
     return Object.values(result)
       .map((group) => {
         if (!searchQuery) {
@@ -219,6 +215,7 @@ export const PodsCollectionBottomModal = (): JSX.Element | null => {
   const dispatch = useDispatch();
   const [params, setParams] = useSearchParams();
   const orientation = useOrientation();
+
   const isLandscape =
     orientation.type === "landscape-primary" ||
     orientation.type === "landscape-secondary";
@@ -285,6 +282,7 @@ export const PodsCollectionBottomModal = (): JSX.Element | null => {
     isPodsCollectionModalOpen,
     setExpandedGroupsIds
   ]);
+
   const handlePodClick = useCallback(
     (pcd: PCD<unknown, unknown>) => {
       listContainerRef.current &&

apps/passport-client/src/appHooks.ts

@@ -199,6 +199,10 @@ export function useLoadedIssuedPCDs(): boolean {
   return useSelector<boolean>((s) => !!s.loadedIssuedPCDs, []);
 }
 
+export function useExtraSubscriptionFetchRequested(): boolean {
+  return useSelector<boolean>((s) => !!s.extraSubscriptionFetchRequested, []);
+}
+
 export function useIsDownloaded(): boolean {
   return useSelector<boolean>((s) => !!s.downloadedPCDs, []);
 }
@@ -231,8 +235,8 @@ export function useUserShouldAgreeNewPrivacyNotice(): void {
 export function useIsSyncSettled(): boolean {
   const isDownloaded = useIsDownloaded();
   const loadedIssued = useLoadedIssuedPCDs();
-
-  return isDownloaded && loadedIssued;
+  const extraFetchSubscriptionRequested = useExtraSubscriptionFetchRequested();
+  return isDownloaded && loadedIssued && !extraFetchSubscriptionRequested;
 }
 
 export function useIsLoggedIn(): boolean {

apps/passport-server/resources/one-click-page/error.html

@@ -123,7 +123,7 @@
   </div>
   <main class="container" onscroll="test">
     <span class="error-text">Whoops, looks like you don't have a ticket.</span>
-    <button id="cta" class="cta">Go to zupass</button>
+    <button id="cta" class="cta">Go to Zupass</button>
   </main>
 
   <script>

apps/passport-server/resources/one-click-page/index.html

@@ -348,6 +348,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: 135%;
+    user-select: none;
     /* 18.9px */
   }
 
@@ -500,15 +501,15 @@
             <span class="ticket__subtitle--text">{{ticketName}}</span>
           </div>
         </div>
-        {{#showAddons}}
-        <button id="addons-btn" type="button" class="ticket__addons-btn">
-          {{#moreThanOneAddon}}
-          <span class="ticket__subtitle--text" style="font-size: 16px;">View {{addonsCount}}
-            add-on items</span>
-          {{/moreThanOneAddon}}
-          {{^moreThanOneAddon}}
-          <span class="ticket__subtitle--text" style="font-size: 16px;">View add-on item</span>
-          {{/moreThanOneAddon}}
+      {{#showAddons}}
+      <button id="addons_btn_{{id}}" type="button" class="addons-btn ticket__addons-btn">
+        {{#moreThanOneAddon}}
+        <span class="ticket__subtitle--text" style="font-size: 16px;">View {{addonsCount}}
+          add-on items</span>
+        {{/moreThanOneAddon}}
+        {{^moreThanOneAddon}}
+        <span class="ticket__subtitle--text" style="font-size: 16px;">View add-on item</span>
+        {{/moreThanOneAddon}}
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="var(--text-tertiary)" class="size-4"
           style="width: 20px;">
           <path d="M4.75 4.25a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" />
@@ -569,7 +570,8 @@
             fill="#154133" />
         </svg></button>
     </div>
-    <div id="modal-addons" class="modal__container modal__container--hide">
+    {{#tickets}}
+    <div id="modal_addons_{{id}}" class="modal-addons modal__container modal__container--hide">
       <div class="swiper-container">
         <div class="swiper-wrapper">
           {{#addons}}
@@ -584,7 +586,6 @@
           {{/addons}}
         </div>
       </div>
-
       {{#moreThanOneAddon}}
       <div class="swiper__navigation--container">
         <button id="back" type="button" class="swiper__navigation--btn">
@@ -609,6 +610,7 @@
       <button type="button" id="close" class="btn__container--primary"><span
           class="btn__text--primary">Close</span></button>
     </div>
+  {{/tickets}}
   </div>
   </div>
   <!-- Tiny-Swiper JS -->
@@ -617,11 +619,11 @@
 
   <script>
 
-    const addonsModal = document.getElementById("modal-addons");
+    const addonsModals = document.getElementsByClassName("modal-addons");
     const timeModal = document.getElementById("modal-time");
     const overlay = document.getElementById("modal-overlay");
     const closeBtn = document.getElementById("close");
-    const addonsBtn = document.getElementById("addons-btn");
+    const addonsBtns = document.getElementsByClassName("addons-btn");
     const nextBtn = document.getElementById("next");
     const backBtn = document.getElementById("back");
     const yesBtn = document.getElementById("yes-btn");
@@ -680,46 +682,69 @@
 
     const clientPath = joinPaths("{{{zupassUrl}}}", "#", newPath);
 
-    addonsModal.onclick = function (e) {
-      e.stopPropagation();
+    for(const addonModal of addonsModals){
+      addonModal.onclick = function (e) {
+        e.stopPropagation();
+      }
     }
+
     timeModal.onclick = function (e) {
       e.stopPropagation();
     }
 
 
     yesBtn.onclick = function () {
       overlay.classList.add("modal__overlay--disabled");
-      addonsModal.classList.add("modal__container--hide");
+      for(const addonModal of addonsModals){
+        addonModal.classList.add("modal__container--hide");
+      }
       timeModal.classList.add("modal__container--hide");
       clearInterval(interval);
     }
     overlay.onclick = function () {
       overlay.classList.add("modal__overlay--disabled");
-      addonsModal.classList.add("modal__container--hide");
-      timeModal.classList.add("modal__container--hide");
+      for(const addonModal of addonsModals){
+        addonModal.classList.add("modal__container--hide");
+      }
+     timeModal.classList.add("modal__container--hide");
       clearInterval(interval);
     }
 
-    closeBtn.onclick = function () {
-      overlay.classList.add("modal__overlay--disabled");
-      addonsModal.classList.add("modal__container--hide");
-    }
-    addonsBtn.onclick = function () {
-      overlay.classList.remove("modal__overlay--disabled");
-      addonsModal.classList.remove("modal__container--hide");
-      const swiper = new Swiper(".swiper-container", {
-        spaceBetween: 12,
-        navigation: {
-          prevEl: backBtn,
-          nextEl: nextBtn,
-          disabledClass: "swiper__navigation--btn-disabled"
-        },
-        plugins: [SwiperPluginNavigation]
-      });
-      swiper.on("after-slide", function (newIdx, state) {
-        currentIdxText.innerText = newIdx + 1;
-      })
+    for(const addonsBtn of addonsBtns){
+      const id = addonsBtn.id.split("_")[2];
+      const addonsModal = document.getElementById("modal_addons_"+id);
+      addonsBtn.onclick = function () {
+        overlay.classList.remove("modal__overlay--disabled");
+        addonsModal.classList.remove("modal__container--hide");
+
+        // Select the specific navigation buttons and index text within the modal
+        const swiperContainer = addonsModal.querySelector(".swiper-container");
+        const prevButton = addonsModal.querySelector("#back");
+        const nextButton = addonsModal.querySelector("#next");
+        const currentIdxText = addonsModal.querySelector("#current-item-text");
+        const closeBtn = addonsModal.querySelector("#close");
+
+        // Initialize a new Swiper instance for the specific modal
+        const swiper = new Swiper(swiperContainer, {
+          spaceBetween: 12,
+          navigation: {
+            prevEl: prevButton,
+            nextEl: nextButton,
+            disabledClass: "swiper__navigation--btn-disabled"
+          },
+          plugins: [SwiperPluginNavigation]
+        });
+
+        swiper.on("after-slide", function (newIdx, state) {
+          currentIdxText.innerText = newIdx + 1;
+        });
+
+        // Close button functionality for the specific modal
+        closeBtn.onclick = function () {
+          overlay.classList.add("modal__overlay--disabled");
+          addonsModal.classList.add("modal__container--hide");
+        };
+      }
     }