https://joinpixelflow.com/_next/static/chunks/141-b75a4f6a920fa447.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[141],{4358:(e,i,n)=>{n.d(i,{default:()=>c});var t=n(4568),a=n(5587),l=n.n(a),o=n(9748),r=n(8577);let s=r.JZ.filter(e=>["/features/","/use-cases/","/compare/","/pricing/","/docs/"].includes(e.href));function c(){let e=(0,o.usePathname)();return(0,t.jsxs)("header",{className:"site-header",children:[(0,t.jsxs)(l(),{className:"brand",href:"/",children:[(0,t.jsx)("img",{src:(0,r.Q$)("/images/logo.png"),alt:"Pixel Flow logo"}),(0,t.jsx)("span",{children:r._P.name})]}),(0,t.jsx)("nav",{"aria-label":"Primary navigation",children:s.map(i=>(0,t.jsx)(l(),{href:i.href,"aria-current":e===i.href||e.startsWith(i.href)?"page":void 0,children:i.label},i.href))}),(0,t.jsx)("a",{className:"header-cta",href:r._P.chromeStorePending?(0,r.dA)(r._P.installGuideUrl):r._P.chromeStoreUrl,target:r._P.chromeStorePending?void 0:"_blank",rel:r._P.chromeStorePending?void 0:"noopener noreferrer",children:r._P.chromeStorePending?"Install Guide":"Add to Chrome"}),(0,t.jsxs)("a",{className:"lang-switcher",href:(0,r.TC)(e||"/"),title:"切换到中文版","aria-label":"切换到中文版",children:[(0,t.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("path",{d:"M2 12h20"}),(0,t.jsx)("path",{d:"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"})]}),(0,t.jsx)("span",{children:"中文"})]})]})}},5886:(e,i,n)=>{n.d(i,{default:()=>r});var t=n(4568),a=n(7620),l=n(7509);function o(e,i){return new Promise(n=>{let t=globalThis.chrome?.runtime;if(!t?.sendMessage)return void n({success:!1,code:"CHROME_RUNTIME_UNAVAILABLE"});let a=!1,l=window.setTimeout(()=>{a||(a=!0,n({success:!1,code:"REQUEST_TIMEOUT"}))},12e3);t.sendMessage(e,{action:"WE-SW-OPEN-UPGRADE-FROM-WEBSITE",requestId:globalThis.crypto?.randomUUID?globalThis.crypto.randomUUID():`pricing-${Date.now()}-${Math.random()}`,source:"official-pricing",prompt:"Welcome from the Pixel Flow pricing page",targetProductId:i.productId,targetPeriod:i.purchasePeriod,targetPlanName:i.name},e=>{if(a)return;a=!0,window.clearTimeout(l);let i=t.lastError?.message;i?n({success:!1,code:"RUNTIME_LAST_ERROR",message:i}):n(e||{success:!1,code:"EMPTY_RESPONSE"})})})}function r({plan:e,installUrl:i,installExternal:n,guideAssets:s}){let[c,d]=(0,a.useState)(null),[p,h]=(0,a.useState)(!1),[g,u]=(0,a.useState)(!1),[m,x]=(0,a.useState)(null),b=(0,a.useMemo)(()=>[{title:"Install Pixel Flow",description:"If you have not installed the extension yet, open the Chrome Web Store page first, then click “Add to Chrome”.",image:s.addToChrome,alt:"Click Add to Chrome in the Chrome Web Store",action:{label:"Install",href:i,external:n}},{title:"Confirm the extension",description:"When Chrome shows the confirmation window, click “Add extension” and wait for Pixel Flow to finish installing.",image:s.confirmExtension,alt:"Click Add extension to confirm installation"},{title:"Pin Pixel Flow",description:"Open the extensions menu in the top-right corner of Chrome, find Pixel Flow, then click the pin icon to keep it on the toolbar.",image:s.pinExtension,alt:"Pin Pixel Flow to the Chrome toolbar"}],[s,n,i]),P=(0,a.useMemo)(()=>[{title:"Open the Pixel Flow Side Panel",description:"Click the Pixel Flow icon in the top-right corner of Chrome. The Side Panel opens on the right side of the browser.",image:s.openSidepanel,alt:"Click the Pixel Flow icon to open the Side Panel"},{title:"Go to Account & Settings",description:"In the bottom bar of the Side Panel, click “Account & Settings”, then find “Unlock PRO Access” or “Renew”.",image:s.accountSettings,alt:"Pixel Flow Account & Settings page"},{title:"Choose a plan on the plan purchase page",description:"After the PRO plan list appears, click “Upgrade Now” on the plan you want to buy.",image:s.upgradePlanList,alt:"Pixel Flow upgrade plan list"}],[s]),w=()=>{p||(x(null),d(null))};(0,a.useEffect)(()=>{u(!0)},[]);let f=()=>{let e=document.querySelector("#pixel-flow-content-root");

1if(!e)return{ok:!1,code:"missing-extension"};let i=e.dataset.exVersion;if(!i)return{ok:!1,code:"unsupported-extension"};let n=e.dataset.exId;return n?{ok:!0,exId:n,exVersion:i}:{ok:!1,code:"missing-extension-id"}},j=async()=>{x(null);let i=f();if(!i.ok)return void d(i.code);h(!0);try{let n=await o(i.exId,e);if(h(!1),n?.success)return void d("LOGIN_REQUIRED_OPENED"===n.code?"login-opened":"success");d("failed")}catch(e){h(!1),d("failed")}},y=async()=>{x(null);let i=f();if(!i.ok)return void x("No connectable Pixel Flow extension was detected yet. Continue with the manual steps below to open the Side Panel and reach the plan purchase page.");h(!0);try{let n=await o(i.exId,e);if(h(!1),n?.success)return void d("LOGIN_REQUIRED_OPENED"===n.code?"login-opened":"success");x("Pixel Flow did not open the plan purchase page this time. Continue with the manual steps below to open the Side Panel and reach the plan purchase page.")}catch(e){h(!1),x("Something went wrong while trying to open Pixel Flow. Continue with the manual steps below to open the Side Panel and reach the plan purchase page.")}},N=e=>(0,t.jsx)("div",{className:"pricing-bridge-guide",children:e.map((e,i)=>(0,t.jsxs)("section",{className:"pricing-bridge-step-card",children:[(0,t.jsx)("span",{children:i+1}),(0,t.jsxs)("div",{children:[(0,t.jsx)("h4",{children:e.title}),(0,t.jsx)("p",{children:e.description}),e.action&&(0,t.jsx)("a",{className:"pricing-bridge-step-action",href:e.action.href,target:e.action.external?"_blank":void 0,rel:e.action.external?"noopener noreferrer":void 0,children:e.action.label}),e.image&&(0,t.jsx)("img",{src:e.image,alt:e.alt})]})]},e.title))}),k=({src:e,alt:i,cropEdges:n=!1})=>(0,t.jsx)("div",{className:"pricing-bridge-image-frame",children:(0,t.jsx)("div",{className:`pricing-bridge-image-mask${n?" crop-edges":""}`,children:(0,t.jsx)("img",{className:"pricing-bridge-image",src:e,alt:i})})}),F={"missing-extension":"Plan Upgrade Guide","unsupported-extension":"Plan Upgrade Guide","missing-extension-id":"Plan Upgrade Guide",ready:"Opening Pixel Flow Side Panel",success:"Plan Page Opened","login-opened":"Pixel Flow Opened. Sign in to continue.",failed:"Could Not Open"}[c]||"Plan Upgrade Guide",S="ready"===c||"success"===c||"login-opened"===c,C=g&&c?(0,l.createPortal)((0,t.jsx)("div",{className:"pricing-bridge-modal-backdrop",role:"presentation",children:(0,t.jsxs)("div",{className:`pricing-bridge-modal${S?" is-lightweight":""}`,role:"dialog","aria-modal":"true","aria-labelledby":S?void 0:"pricing-bridge-title","aria-label":S?F:void 0,onClick:e=>e.stopPropagation(),children:[(0,t.jsxs)("div",{className:"pricing-bridge-modal-header",children:[(0,t.jsx)("p",{className:"eyebrow",children:F}),(0,t.jsx)("button",{className:"pricing-bridge-close",type:"button",onClick:w,"aria-label":"Close",children:"\xd7"})]}),(0,t.jsxs)("div",{className:"pricing-bridge-modal-body",children:["missing-extension"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h3",{id:"pricing-bridge-title",children:"Open the Pixel Flow Side Panel to buy your plan"}),(0,t.jsx)("p",{children:"This page is not connected to Pixel Flow yet. Install and pin the extension first, then choose one of two paths: open the plan purchase page automatically, or follow the manual Side Panel steps below."}),s.openUpgradeFlow&&k({src:s.openUpgradeFlow,alt:"Demo of opening the Pixel Flow Side Panel and plan purchase page",cropEdges:!0}),N(b),(0,t.jsxs)("div",{className:"pricing-bridge-auto-callout",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("strong",{children:"After installing and pinning Pixel Flow, try automatic opening first"}),(0,t.jsx)("p",{children:"Click the button and Pixel Flow will try to open the Side Panel and plan purchase page directly, without asking you to click the browser toolbar icon manually."}),m&&(0,t.jsx)("p",{className:"pricing-bridge-auto-warning",role:"status",children:m})]}),(0,t.jsx)("button",{className:"pricing-bridge-primary",type:"button",onClick:y,disabled:p,children:p?"Trying to open...":"Open plan page automatically"})]}),(0,t.jsx)("p",{className:"pricing-bridge-manual-title",children:"If automatic opening does not work, continue with the manual steps below:"}),N(P),(0,t.jsx)("div",{className:"pricing-bridge-actions",children:(0,t.jsx)("button",{className:"pricing-bridge-compact",type:"button",onClick:w,children:"I finished the manual guide"})})]}),"unsupported-extension"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h3",{id:"pricing-bridge-title",children:"Open the Pixel Flow plan purchase page manually"}),(0,t.jsx)("p",{children:"Your extension is available, but this page cannot open the extension plan purchase page automatically yet. Follow the steps below to enter the Pixel Flow Side Panel and complete your plan purchase inside the extension."}),s.openUpgradeFlow&&k({src:s.openUpgradeFlow,alt:"Demo of opening the plan purchase page manually",cropEdges:!0}),N(P),(0,t.jsx)("div",{className:"pricing-bridge-actions",children:(0,t.jsx)("button",{className:"pricing-bridge-primary pricing-bridge-compact",type:"button",onClick:w,children:"Got it"})})]}),"missing-extension-id"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h3",{id:"pricing-bridge-title",children:"Open Pixel Flow manually"}),(0,t.jsx)("p",{children:"This page found Pixel Flow, but cannot jump automatically right now. Follow these steps to open the Side Panel and plan purchase page."}),N(P)]}),"ready"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{children:"Next, Pixel Flow Side Panel will open and try to enter the plan purchase page. Please confirm the plan details inside the extension before continuing."}),(0,t.jsxs)("div",{className:"pricing-bridge-actions pricing-bridge-ready-actions",children:[(0,t.jsx)("button",{className:"pricing-bridge-compact",type:"button",onClick:w,disabled:p,children:"Not now"}),(0,t.jsx)("button",{className:"pricing-bridge-primary",type:"button",onClick:j,disabled:p,children:p?"Opening...":"OK, open the Side Panel now"})]})]}),"success"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{children:"Please confirm the plan in the Pixel Flow Side Panel. The extension will try to land on the plan you selected."}),(0,t.jsx)("div",{className:"pricing-bridge-actions",children:(0,t.jsx)("button",{className:"pricing-bridge-primary pricing-bridge-compact",type:"button",onClick:w,children:"Done"})})]}),"login-opened"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{children:"After signing in, the extension will continue to the plan purchase page."}),(0,t.jsx)("div",{className:"pricing-bridge-actions",children:(0,t.jsx)("button",{className:"pricing-bridge-primary pricing-bridge-compact",type:"button",onClick:w,children:"Done"})})]}),"failed"===c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h3",{id:"pricing-bridge-title",children:"The plan purchase page could not be opened"}),(0,t.jsx)("p",{children:"Follow these steps to open the Side Panel and plan purchase page manually, or enable Pixel Flow and refresh this page before trying again."}),N(P),(0,t.jsxs)("div",{className:"pricing-bridge-actions",children:[(0,t.jsx)("button",{className:"pricing-bridge-primary",type:"button",onClick:j,children:"Try again"}),(0,t.jsx)("button",{className:"pricing-bridge-compact",type:"button",onClick:w,children:"Got it"})]})]})]})]})}),document.body):null;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("button",{className:"pricing-action-btn",type:"button",onClick:()=>{let e;x(null),(e=f()).ok?d("ready"):d(e.code)},children:"Buy in Side Panel"}),C]})}},9748:(e,i,n)=>{var t=n(9796);n.o(t,"usePathname")&&n.d(i,{usePathname:function(){return t.usePathname}})}}]);