From 75e5c3dca1e7dd92b118d60943e7788625487d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Valderrama?= Date: Thu, 23 Apr 2026 15:15:40 +0200 Subject: [PATCH] :sparkles: Subscribe with an activation code WIP --- .../images/assets/nitrate-success-dark.svg | 1 + .../images/assets/nitrate-success-light.svg | 1 + frontend/resources/images/nitrate-success.png | Bin 0 -> 21130 bytes frontend/scripts/_helpers.js | 3 + .../src/app/main/ui/dashboard/sidebar.cljs | 2 + .../ui/ds/foundations/assets/raw_svg.cljs | 3 + .../nitrate_activation_success_modal.cljs | 85 ++++++++++++++++++ .../nitrate_activation_success_modal.scss | 79 ++++++++++++++++ .../nitrate_code_activation_modal.cljs | 69 ++++++++++++++ .../nitrate_code_activation_modal.scss | 65 ++++++++++++++ .../src/app/main/ui/nitrate/nitrate_form.cljs | 21 ++++- .../src/app/main/ui/nitrate/nitrate_form.scss | 4 + .../app/main/ui/settings/subscription.cljs | 55 ++++-------- 13 files changed, 347 insertions(+), 41 deletions(-) create mode 100644 frontend/resources/images/assets/nitrate-success-dark.svg create mode 100644 frontend/resources/images/assets/nitrate-success-light.svg create mode 100644 frontend/resources/images/nitrate-success.png create mode 100644 frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.cljs create mode 100644 frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.scss create mode 100644 frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.cljs create mode 100644 frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.scss diff --git a/frontend/resources/images/assets/nitrate-success-dark.svg b/frontend/resources/images/assets/nitrate-success-dark.svg new file mode 100644 index 0000000000..239364da9b --- /dev/null +++ b/frontend/resources/images/assets/nitrate-success-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/nitrate-success-light.svg b/frontend/resources/images/assets/nitrate-success-light.svg new file mode 100644 index 0000000000..e1343cbc4c --- /dev/null +++ b/frontend/resources/images/assets/nitrate-success-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/nitrate-success.png b/frontend/resources/images/nitrate-success.png new file mode 100644 index 0000000000000000000000000000000000000000..9d8e1b785310721cc8e4424eeb32f53fcbbddc19 GIT binary patch literal 21130 zcmV){Kz+Z7P)f|_I}k9HfNR`77!5x6co$|DCU5u81YQ!>HSYV&#b57CDWa!r>AE=<9RBcIRoZE zR6v3VENOvVU~`(#{eNGF-JaRW)3ZA}J0HKIcDk#>^wihy)qAgA*(r@Q(&!S{DUCGJ z=n|yKmqr?0gf#imNTZ98CSMw9bP>|zOCyagLYjPOq|rr4lP`@lx(I3Vr4ba0q6p(} zA%sF{Sc)|H(g+9;uXxFld`a?tBS^f)pYKQ$&{{~8Mj8Pyl|HrEB>62S-Y6#CVU&jD zNRuy(4uI5Kxisem{&TXrL5NIB!*Zn6&NO@g;*~C2G=~J8Wo%<*Gfln(AT9aQXak5> z^24Gt`On*ZwhJXqz62mG`O;9K8d#PtJX|920tw%JLJ=91hUG|;FAYuAT)ud3R)gLV zf*c+8rzKxPkXAd>puFYFOBJs?k6j7*0UIc3gG(ZiCSMOn*~X2T8J^Zp*rhNaSR0mx zY4RliY4Y`8K;3MpuAIx{8XKl*4y9o^(&X!*P{(;o7yXOn+6j@gpOx+_mLvT@dmvPo z!m@?euvPQ2NRRn^`SP^tX))5|>tRq`3dB$S#zR*nF8qQNrW#q{(M7(&Xzwuu1Z5T=k+D zU>CwkX;_N1+S!BPwrAcTE6VR!41PgT!fTV$lFwp9rT3@N{b9^b&tI~n#9{N!kQ6$N zyTMVsDP;VnEaDfuAHqG)~~rIAJop<75kCh1VFj-)iwNFj7J`36SV?ieo9D2+5y2wg@#mS%{k z*e8N^h$*~+%Mtwd6iOqF6hT)?zF}O3hHAiMJCrNLA?~Md`jEF>!zFEeAm&ga5aO=%lut_q!dG!sGa;!`*8)yR>CD@0v~?pAlyH> z)N(mLO*|76wPUtJ(0JZk6)#;nRuY~| znR(Cgb(a`BlSwM_ec^kYMrx8YDhSZTODTv>B_BUzxE5aFa)@bje=ZAo-#OeNJ`Qpy zI?V^v&7oU(U*a+|$bNkPQ}{WwggK8W{(kZCwg6Lq+9AEA{!iZP1&QEkLvO|nGC_43e! zg1yKtrt|)4Zaa>@^SV&yv&qVgkRx`R_@7z}I?33?B*Z;j!RNkW6Uj{_-!HscpVQZd zU}V$@b2Vv3GK|0e&TV&4gy7>bH3{Q)NI3Xy4U09T+NWG_zwdJSjeebfaM`1`ktqd{ zQ1W4X#t;2l(%x)!T&lSA4br@c%Qn5;5OF z-toOZ!PTYo>h{m*y49h>jY51)9JLN-=ba1&kjo z2zb5z5h~1taBtA=3jVH;8uip7|3o7{#oIspGhaS=D;3zGBH}s0B8_w8=yh&+YsC;_#e0$$7L+HUr8y3u5z;fnai)ZU`eXqTS+|r z!7#2ogETev2|o9i6eDy=olAb5Kf+?PFI7*rxp@dh`m$T!IFQGH_zOmdX3{!uTd8on zi>f`IHlj44)``nD5w4y-q?!Epi7`K6VuuvmH36{)1a)I&Z5d2Pj{1OTcL+Yl-d{%)U zdM!Wvmr3*Sy+sy*&v_A7Pn$NK$J@|>VHk*nDE=jzq62)9W}=|uxz#<3YoTV9Ms$`} zw{K(eVacv*_*p$*-c`Kx+tCt9!5z*Dy~X5vY4-YccTxx_Bs9V)^2|{01X&XA>FWM% z{4C$&`f$?J!4HF;TTwu^d-abO@bMeDzDFO+y~brYmv8vKYp1`O#CKTq~$&?(|H>Rx--D((&S4J zF!(MGu|JmaXib1^_@QC&Fi28Mod9LPCx>v?xt|`}d@z%boh`YMAH1&~(6Owp7e9sj z$X0uUGHCu?yyXEV-i)BvR1~ks$$zJ4*|Nd*5NqzSn)y}j=tHVYe^@dl=xVfTLwe^9 zKJ6Te3eY^tNE^#v-QkqlSnpSQcp;=9+zvnJ1pLUac}kP7%Vss`s>rGkO(s$F0Ljee zc}TMR`C5n`+16>q8$9m`_OpG>U-Dqutq*69W`p0zoaV3x56P^i)B0+vYK1OL1*@w< zxxZ<|{0}l+N^qyM5c8`>j%<(=_so#jFr=d_&j{6wN4#%P6kq~f!qwTNjkjlnbd_i? zULyrP#*-iL@%M2tuL++fUjh-ze0(WI3I4HRl^e;D=sL5K7q5i{oXyS zdy-X!JX{gNfm6qLqG^L*Ym|KQRQHahmcj<%p?C-t)l zkIT_&-xX{LFlN$^Y~>t_rNZp8vXp{k&Hf5D_%NFhq%pBe&3& z-AA=J#AC*(C#>_*AD;5H@9+f{HS9Zar@h5~YRI+sgyvST%SuS;D4Pr=5dfiJAQM93 zt_aiiKD})@Y1)Z)TWpLW%_Z?TX_n^asogr9Ry(Z*KX7-DUFaCNw~*%YWPvhp-lg2# zPcvs>@XjoT0_ZG9`yc*zGl_*@NneQv&tD==IV0R5=+t=YV|F%TBN5XYs-qvcWQm;_agrhly7-1HYSb6=>RYYQIrBWcODW&I z-^5k*HI>H&B_64yLLf7Rvxf5Bg;hEAU~!xe#QR?u;^75@sbnA?{JZyrIXBc#Bbw$H zsYpDatCQxIaX}Qy8(c7>0rR&Ue$8N#{+RbK(@oKn^$EFM4rS1S1G%f7*S0|xv&H5k zs>xz(uqo4xrJOhQmFVHq+Q0raueFkp#cSFP1-EkkZEzXAw)aT&@37WTVS6P4l@k#x z`;#_yyC6(kjPu|+LZs1oq0a5+q<@;*zDg;Iu9kdwdqM?6)O$&YcKAUs=@#DS97-C< z?Q`K2dRuHeYCc&EsGK%GyIbqpUF}PBp`yOrGsy99@*m-6ZmC%&j{DTTseN&`p zb1U00EF*)mC9Ny46kSz4e*ESz_k@YCFp6R9HX~G!G`B^*RgCkXE1wr6lEnFo-_g&(;_mM&W~8PO`EGXrN;JbKNKFvuM3Zw>8ZchGmE$I+u@!;FiCR5_VU zaEQO8f4q*b`9qktMuMk5a@+Y~&TTm9VZ1pdjFZ0GBWcEb{GfMp8BAKz90MR8ENItJ z(m|L_>d%U8Q@2tAQ1bnvLxkw475rzKNjpc#nU`i<-KQUYHfjtVU(j*>>}pptNKnV; z@{yuDJ#Ly?y_?>u*0p6xyb;RqLz*uR7eK)ELlgvhTU-;98dBX{000mGNklPBV<|g0s=+P=e%gbS^InMuFmzQr)2?%TGuKg!2rr?-E+N=h= zXwIe3xPuGUdWXwkR+w=f?h6tZ=^-)Re42Uyl8$^rTZ0c4F^mx|qhy36UyXz)`lkh= zV(J=75Li+L4FUULqOHyUb@%zjS6(_5Y^KR2WUc_xTQD{Ko!SRl9-i6ddkgO3TFhxTRP0qY6 zLTR^fD#|}7K`2@F-6-aGS+M;-53(&Y{vNY2gdf@%$N8z89h&*7oS6IywQ?4d32HCY zP4t&rxXq%V=TH>P0)A0%`=AIDDWf~y;ny|BdEtZ4Qv^v#KK=m^VzrQx5K6y!6QJhl zpXzAKQI<^x_PGvn)+n~1WSLc5LPIC@ZX>~%^1$Rnw2CX!^IF^7z2MiYyK4Uf=b1La zF9$2-fAxZ~+dTel?xWCnhT6w@*N1ATJKmquKVH)l#(8FR<$S(y_!lK3Y|2S(#zIBB z!;&d+afd0(m{{c+8U87S41$* zGdtZQ9GAs*VOl zFFBAaC+fL-de$|BkKz1t^tqD3?ib@csHrgKJj-ogrV!Ab^pKK}jHikSGMS|!l9qhQ z;7IR)tk&_SPfJDh^u*1KS3(;{TAcJs>DslqTS{$4Vp+;<@+F_5&>BRm6fR#fo?m7C zf}M*8gP*_}>bDtVF}PH|Q&oB5 zl2XfqenBdNxn9qJ)X(9d6AFvy<=wl~G=NwN40HE-En9qkQ&xMLq?{H%$)~H54zC>5 z+&w19<)n?>Fz!1;-;89p6M5h3=44T(ws0=a3Nxh$_X=qWC;bQ9Her_H?tmUiKIMts z1IgQrS>^>=CNRDKs+FwQidNMA!Zjw`_sya<@=fh~9(ldzDUTb=6(}GuIwg}=VbU^@ z6_6L((J|Thpdh~t?=#wI$KZr5>UN>M0N!5FIQEl*Tw5z&x>Zu>lwqZG+Q8nFSF6xx z)wR^yZU2Uz-nI8Wqa5dwvt2>R@ynm4D6%%*3zx~vG!|QD&r{tkC z`d&o&wm!7m{T)49@i=){V`%j>Q=_MW&*b4jjfdZ5T76~NzI1Y*r%95$G=I-5nzP}1 zzMh9{t;pi*AxEBvn)sZVb`R1dQV&26CEpIDdYT=B0ax z-rKJIJ-&$O#Qqc)zGH*t#}O|+lvw22E6CwEN&Il=GD<;opByRHVqc0Dl_s68BqKS9 z2iQ&b;j+NxxGst2tu}c2Q=WK)QWQOoe99a}VwH0gMT_kw^7YB2q=D1)6S^%R-<~8h zGJBK^N>TJY$=A1PIBVO{&xGG;GUD}3Qu4(s`D9kD>)gTjA6H6ra3OUnoKlkLz}BPZ zkxwYmtDHcssZ%Bs`5YFKZ+94}_t;pXyQ5GVMi=<1#j(If37IFE4CsMlKGi%PJz7j1 zyTCz71GDwh5vTpEIt=+PU%`f^2xFh^d@nQEM_(AHH%kt_3|V(aPxSM}Ci%=##hFC! zEVG)JA7@^vaO8WxiXuj#{(`D;Q(SP-I!aOWJn{*OP4cyx$Y)O?@|o4)cqOux#umH? zn!O$UlF_2lld{u{(rRa!p%?C%PjWd@y-QhlyvZMGen@oU}cOv{;wuLu9pMyiAM2@<+ioH z0R^!j*N)8B@sIf?7f({YQsVSgSOVmu`I5_xLI}&OuXdeykCH~dFOzvKym+8IwsSa3 zu%9WFuy-EO6(fjtwQ9r)ha(DzMr0EGmjz0l9|3P%!>VU%{KNwwg%u@!$@gvTKe<2t zhPoKc5vT-Mbo4v^dxTZFMe(})18M6a{79*cSYtYq9VJe!M1t}bjigNh2)3<7Be4~* z%Eu?uMoI$c`9xRiY3-3k{Xwz-81ogUJn=N7CiwzkANI=?2T()HnOyT~14o@yTO8dI zudxO2dXp`*4CyR~l0^Xddc>6dnB5HB4Y@4Zj^Odzfw_?%1NG2r;m``>Pb(zfrj~Fy zVIl@gt)dY7`cP!Rc(05s0?3!RjLS)d6jeL@(ZFN5FY1UEN0AD%+G1Ze#(eb_kgt{E zp3BF?I*RF-=$%4_R59IPBbzF)Z z>FAE*V{fERKsd>Fx}vS~{S?0qKB5?*=kfm)X^S74fwWtnvNLMi8m3&Sq-Y?F>O8|)^gcEvEc{qPYE|fM#64L zt26m#>bYP+3`jA&)}T)hqsZ|o7c7$TwXVwkg<=37JB73*sIX${KK%EsSjZ#vK|RRW z5-l1%*5vy%kmra$bp&9Owo@G7J^`%?OSpy9$>rt_>M;bvP1FepOFsS*?{GDZJ9@TG z8YD4AiuldK=V|2vRS^;t;X1$M@&rYZH5<~Fs}uP=m+9*S+^S2zFc(*2Rucvf z|9;=EZlP^EJ=EAFlN)`{FiKk$nmDT$(d2xx99F8F0H!t7S}=yR+cs02;JyJ(3rkxE zHQuayZ3#86Yn!jTp35{ou2a$#M(S$7+G|*q^w+|?K3$Yx!eEWK;e3w2=$}Er+af%6 zZ>}!pV}HqikLACw<-cc#J?`lp!^lGkv2@C^LW_SO`rmtA{@ZwzvRbh2NWW5v$_DeO zzn?^X?c+iJ16#vXnEuy(@y`+&aiqOtFr2+sq9%0fQ& zP_8fGhjd{?N4Z$#OhCt7U#`%Lb0O&h?}xyvsFb;oi8cYISM9n^$3f zr!7w%5&8J$tN7+I_WP2e1Rq<@$JX(m_ivC^Y!#k|6icO7*% zbpj%eaN(Q3k7CCk`S@!nK459$SXP3y#Msi@qR=aEdFjWskz4Wj$7b4VgcBg1BI~uH z@<%Z(4X7QUecs9)Ve1Z08;{40w$bdF`cI`ENY=eisx4MK;cBoVu5-I&x%y|4fFK}- zBHLXR4L?wSI&SO(3aw_{tl}8yt~Jj2{r0(Y+SQa`bjnP2{?dCWPQ*w&ATBop7J~is zYcJh?Un{L#<57tO^0fUk|IO+p2xin+c(d74r+p^vv#}k=sS9%|ZI+q#&*qxT^3@({ z#*)wKa8j{0!q7?wd$vuRL|YfCzek~x z?-klUMO?M!&iT(#g3%MwNQ|WzfWE(yrQD5wYNmJRp)&;_hw*pYDz>CbB#l^F?Ug;$ z(7Ibcr%qB?@gZQ_c5^LEe{*qRlB-wNW*->Wj+cNQK3`Lu{x~x*l?eA0ujI>=;tDMb z2S`A!E>Ks}b*a8)9`|Xg#Mr+p)b~p!;AAm-<=yk=Q33&7CS?hzJh5XachIOUofSJ} zdj3@xRqc`6)WbG4Q9UuWt9@nyh;~9~MB*RS+rmC)E{&~};mDy3TMoOhY;7uMhjW@g zw|x+lA@Sdk1%^S!Cdg+=>sU}_wWZUp&8mp^rQozBe33vV-nXc2UUixfxpUfYdY>m0 zvaxq?+jKGQhX?1c9(VQB(IW1L-4P(4#Ut({LX^(+`bL@l`=*Q5{H#j@6FC$UIlNxB za=Q0WUPdo<45#kUC7qe14K2G>;;EO@#NEg-bR7DKMW*q~I(aP1Opmxl9_o?C}K^=Q#**k(Vi(J%NV^}-eHOvmRj|9~I=-W#&eYQ~ZvD(sUmE^Ngr}e?%&rjdH;Nk_W zb_U+x_ba{~9&i76mDFd+TVLH$Fu$oESp-QBa)twY0vF6&NEuKs#|6Q@_{J?By5s(O zdil*}wqs~IoT3|56f%AGuX(@CW@F*wX|r+qv{B5TWrD!F^xyp{Guz3>$f^MbmQPvH z_WK?$w;gXTdkruR%XKZc9dQh>Ecfv_t?}`l+wUBu6X9s^9rO94l)cmA?v<&rw_@9K zROY4)m&_YN7C`+~nShmCZsM|!NFmTJcLyD4Ppv`^KGjGMJ<~`HjdB?BC;`dguxS%m z-JX`9$MzoXpuQs=v}!>uZCu(&&5bTrZ(EssZmwP2!mGEJ10HYwHwaF4VT|pBR+~$# zNY*jmOFJ$Tod{c_;`Zc(evZXI5{RLJ<-Cky%z253l z==s+h=}!;VQu#J5^0@=i;DZZAME$ePhRM)^Tx?A7mx}l|VMZ<$4YpC~2s<5eUI8t5 zYCBE7xP-j~9+iAvg$XFTxb~{l69xeVwUOL>z1~Io&t#T*A`XcMz|Bx^q2$ATVPdZp zah*+W%Rlfq&_?hAz`Xxf@31N-o+tJvm$&GC- zO!o+rz2$5rI^Yld!jy$=`%%hg>u;DJbH109O`yd6dCZ!h-Spht25M;yY_)8!m3Bi& z(9gc@CHB?1S&alaMor755r^cc+kgJHi6nliwhV>bO)_m=-9){IX42xhHI!ZGpvGEQ zR3*~lVLZ$)q51uA(<<47&r3jJt7fJ-la8Tk#%p`2PQZ8%FOlYWB_BVLEyr}K(NAin z23If9JJRuU<}MIWrtfc*q-|4_xj#z_F52tvssE-Zk&=?{szE=Dne$-n&5!@5j#^xD zy95hbQ<%?2-7W!z{^+s`1s!s35xw=79b9%&+4wA4`gRSSc6)ysJtdFEA74c4zim{> z+EULdt7;{cH0!A1)g_;=nyHvV)_N8AGfc6@;F$=?XT>=)g@qwEk-_F>Gf_@-YP^$u zfD`^GQ`Sy)#!sbZ*4;8c>e%I!BHy+B7x%h);L5j!VqZ~L?=2t-tj@L9a*$dH@>!Et zcD7)ia!Wrt=TCc4@gOJt^i@6O_pzxYUGsSZ6H=l#@7hYu4KjW7@OE;y>V(x@6Dqk? z0vWzU#V6E^gf=G-ZHM(YW$Lih(wT^Pd=^O4411?1aTYG6+LIUk8x40l{?9Vy|E$o~ z>Eix1x6O|#=~7CNZ_enIPA1*mZjn*N-S;HLFYuW}fZ8B|5~%jyub2X%i7tF}0DbUC zInAB3RrTY2`=32D@$^D+WCA4_MPx~Jv2 zI{CR)SP&0wx5YgJCR#{dNlhDpNwtCGZfglq`N@Ks`i44*R_!=a{Brdl78H)Ued;U< zcU|hnxU6V#0n3R6#xx#Cj>eW+CXvTSdf=bS)y(6+CTebNXxk1Lwad*Wuhu%16b^f) zIxd4mYUN{kjquX)1v}`~Kd+`qXB5$f#f>!S)V?Z#H+|nkc7EwEd83+ISjz3*(yA(q zl1=DiJ0fFB5eSWQ+wD#!Ru*MtS0cB+tPi#g&3~9!liRP-=q~hfSiV$^13Q*<>znfRpJ4v z#FIcQyLxVwXUsBu2Kh7sQv19;-Ir+m!!h~ULUlE?!K(BTR;!%Gdhk||Pl&j)mPHMh zyakoN(WSnO$#)w64nNbbc!7v{uw`|WRo;Wh<|)tdaVS%p`}J=Sm?@ ztG4gU=d0-7zuBM?(SPRg zcv3lPk15J!{VX=H3?S)7!%YrOV% zbDfv+d)ujapp({oQAZ`*u@Tng$Q1P61KViA$tA3&dfPhx7cW%O?7x@M3D@?cCGP~2 zbaH^ta)-}Eeop%^#Tds9Ds?2t&5(qv5*esywIp9>G{7u%dxN4FA!fBBh_;+4sAz@q z^TTHCs|5HWfOB*Nk;Ii;`m$hb(#OZ6mYWNp&YZ**;**cGeSv|A^T;k1j}X>3FExcQw!KfSFHv-Lx_C! zaupqTYKhNGhR>hhLE}#>3P=t^lDXWi?NUzhmw>WK`YAdEL#U^Q8q4*7UQQ~?^&9gE zVNqyVlIH5nlDaIViPWmJVp`Gqvjw%53hJ{+`t^usP6)MF%cOAURJ4_jkggu%hv)cn zq0cp`n?p-%Ge!P$Ud{qZk-rKiS-ftUJT95)ce`orSGBZ;ODlqag+`XZ97^}uf_7Bz3!e8E>h*hU_1CX%;mzuK+VQ( zsGKm`{J`5U<)W_4l`69u6k1g!@73RP?pn&*6sW;x|K7t@4@q5HRNhA(Njro`X{#1!*O04n)KVHOER@$eOVTkfN!R!Ol5p zpBy@CS`lSu81whc<2~Q68?y+s+Smdhy2X;XPAS&htZ~EEsx*3XMQK*0;u>>(pOEwP z6m5-4B;f7GE}`vy`;ZO$Fw)32%I{DlV4A|EmfL-l60x0z^t-ySddG=JCm%E$%v3S=JG+b=&h;%@thrNg~xjyw{I+?WVfl2Ek49k z+Q)w_&8^hZ$fc!~r7k=BTevj4X$ZR%Zak|GU37ejPCTW3YzK~Elc917N-kpyV3p*v zOHqZE@v}XE3zmwzhRe;mR5?Y_7G#YItahrzFI`6G3K|pcA)Tt%r}*y>+G<=Ma=DhY zH7OVCyP(2OR{>)`s?DicG1KcCA8>` z-6|=n*@5oNmdMGv{^2wG(I<~rsH&z2k=9R*R3T(Mli9B*kr%1YbY9r(x=F<^bPYS5 z84hY!H`PC>tgn;Ko>oG`2WGW>g?8tlXeXLZXwqjw#Dzqxzm9vfB)WydhL-X3JD4k2 zAdjX1s}7mkeZkc;LR(WZEF`z6?(>cE-tfDp&5fY>#d>`im&bxN;%o2Z`@l+C$P9QR ze_rNuO-d1{(l1XM1h^~Hdi1kB^Z__o1<84V6;Yp`AX8}w4Ng-$Sz0`cDCayw~b zufal_uQiM`mG7^lseDiKG0PNf5!H~$tP#(Sx@GD~;o9-J&g1G}{o@2k-B9iMw%{W~ zy201{_odcMcA<q@>br-vo-;dU?r-r8K;M7)fW4(vx-a000mGNkl_Q8GW+D-bobL+bX5?7 zL+iyJ9udxaVjIb7yq8(9d#t zod3?_ZTC|Y;A4&<%}8=7Y3oY{0!WGRCSDAm^EKY~+rJ>tL8+F*WwbFa+G|J_oq0?z znmd12N5i6|CAHO-?;;9DnqW2Q$C&>Tl5v*yJx-R07aY@@4jhrA&tfNPn~P@qsb4Cr_3_2!#QDtQ(^rY)8I1}&fi z4{W<3KBkU_R|3S17_e(wHz+( z8LGLjPCulGax$g1aaU}0$HcZiZIt#gooWSDklBpryrWC#!Cw!fiF@ao(nsh-!czzP zjj^0v(&iPZ+es&z62E2BAJqx6bXrBe-K}lYiTJr9%=rT@2>O~HjCj4@{ND{W#k-Rq z|C4OU{;e`ox|2iq%%;H2p^wCV?H4iQ9a%4=R-aetgQ&*1)S*sk_ogE!aQpr zoBgd1_I~sA^8y?K$pz{9JpYcN=A{R@MRiOGHB>fjK2?NS=R}CWF@dQg`CMM#bs6*y zJbX|#jU0kmk{vCO(S2^uTn3mep?J2(98g3L{bo3wIH`mMnOV|NN2{g!w`8(lCYW>v ztPU#!tn%??+uGg?{7hk~yqwD|+;IagOww!a+?ezd)0$g!s{|;`0@R`a2yBmyfFvAId_?Ucp;QvO@ znManA({6H*2Xh;!($3G4nP}1(usUNIj9FPWYgQ)8kQz;&{>24uhlheSx7h@IZ9!8W zAq%`9`K3M|ewgF89R?dnRRlYar`TZl_8y@)kV0cVrQ?c3dZ*6LveTJI_okqk$wGdX zeaL2{_1kZFF8%$A;cUh1N7>E@Nar)IGg~-2fpi9}b~6;}^9^e(kbF)FX#q%&iJZ*k zx*+2x6^fv+35xjH7Awt-Hw4%N_X8aI4^s@_`&vZWSZ{uy{lR9g`y+M87iu9)7+(%9 zp}cIHuOt&@2`Bq~HWAL4vB1RJo1Nl!T{4`mJar(SPm5ZKoOI-?Vs8Z3!L= zET|4?xBeHxvcBaG{#wwsue^eAg>e)C5ayNt!7Ign+hD!Clgpv}yT-cS0-|SvrE9ZM z1V|-oXJGP~j4xN7J(xP=@FdcSN51ix!dKNC+$V$XykHpJFsqD8k*O;l(upo$UaQxF zRPKH#u+YJ7R~Ko;R1R1a9}LyBm)$;`B1cYEi(^iJ?QpomMeu8i4ex~5H=QCtN|4XT z(isSPhaWaDhsF%cYnO2PbRvy#vhQ}iE-iG>&F7TS9p?|HfxQq)*v&|1V0VHnomQ=M zWVgYDe>!QF#P>oqWvlWqiUxu%hP3qAq^YzpoSey|FQ(}6Lx_D>Py|Q~$>;Hmj;I}s zFEbJFZb&@;x?SZg$g$HkGY8XM7w=7b_0MTLzT1(`Kuw}7ofeT=QNzMOzOR@Vb)lLH zMT(AmEd6>rol^sB$CwY}vtLp42z8HBxDSP$>7FWT=e}WE=p@Kw>)hGX2bg?xz7h~q zdM-a{Al?6~ku;_(PY*6p+O3k^jdTXAwsZpO40elD*|HqWi#w7+t8*HJ5-s^~%<&yI zX=w^E<>wrV9sz$`-Aw{3>@5@qDMCIaGRX(#ST4nxwOLU95UdAXXXe=Oh<(gB|ufz=9)iP&^6wEvt=RzHs( zs0A7$9fYi%s10UcoIx^4w7;&}NN4DyNe-(eU#?wy9#%*`hd@AVZ~aqP^6{8&TP#`J z>~85~t{(L{mk>*tG_ZOeN9|H8YVbK8;OhU#*UbP|Mmg8x0*zz4J^7R;b`K;a(nWnu zz>lXANfmEe)i(3o6n)||uTGFpdWY^nIsoghHzdHvhv#L@ntT|LBG%Hwopg7&=3Ygq zu*LA`g`!Ldvg>0m(`aaqFUTP~kcx)^No{dl6Z_D1^AMn}(-&2Z40{q}>9oq& zk|B^76+XU*mV*{{?>3Sn@?-lS*(b=3g`$Z?6n~#F-lD3WGehD(>X#T8P#* zTNCwR6%u7^v1+`RVMAycI&nnV%c}a7mG{}U1yL%|E@#<0$o55gjabjH5TbEJa7C2~ur8NyT>DyU7g8&V9ZH-brbekm&@g+#+L z0}~HK+v!HqSJv{`aBwyo&PHTX(jXCT1}mdm91_M{xXH*K+JOhU+34~)MUP;T&#Jg0)xmVUxJbg(! z53H~+=^r=q=Q*L;cYpF_NMosprBQG03^_4=9iN<-L|Y0Jy7Z7bI=yZKJ-l-VZFNVX zw&7lIAF!h0@3UA6?i<5m-&P_~GuW+)Zjl5+%P`BJPo#&qN&1kYg%HltS6&HboCEoW zQvCQW7Yv492-mRNj`>)}K7%F9t^E4v_%JuIl*ck&>!M#Hd_#tZj@f4?)i!Cylg}IL z=+25QbVI)Zbba6ck)Oz>JL4O?nkqVo)z?q?<=!Gwr=uoO(JdB9K1tp{n%arqbr4I8 zE#VH?Gh@c8K5x8U$%N`nQJ^X}H`q;Mw*2W7ComS|?*NPK-@>)+c9IWi+PJ`Z`6_=J zL4o=*Iy%(8SuAx1I4K&;8B<5Ka!0G>z1z3ZdF$6vqZ}o9po-S>`LNdBX(c>n>|`|* zIW?`0>x6~?KVPjy*3K61I?~cR0AUv(G2z`P+QK=%flfFf*qaEFuMgH)p!hMDNf#=3x3 zsGiS7(x}^z?}c5vesSfdji21OWmEp2w{N{!K)22iBZ3})Zw8|Y+r?DNBcx6kRw9<|%8C#>jYT;N zDSkx6tAvnG&u0%k{(91qj^4@TPo!lY_UfMza&t$xbNzA0j-d-1>mPUdRg@u_+@bb`!9DyZ%Gb_Oq+QP17sG< z)7L(T9A4#S)tC|rLVQ$v(n;09cMD@*EVJ5Uf~Dl+hXyApoQ&(%eoiMpcS~zPUho&) zz~z^uX|ZiN?>*G~#=`d+R!fR|?Q=KPuXygJy2}DJW&&c#Cq#wg zH9DUkl7Fb!S?gO{!-}K(c5I`yEzJ}$5F!QwqSKGm)jn2hGovJ5t=CJ>RK?i|p$;dK zfV(X+xa`mB`uSySajGJE$JEDv$x6(yIIQz_$@~C~(5xJa672WeB72po{5$&pAUrsi zPN+P2<_{5^1_9ok77<|?`Sc_-zg_yiYvrB_@AX2EYR==XHAawl?7183?g?}p6A**! zLr8P7e(IO|;;0&L_y}b;6X){s4HT8_4Fp6~{tlezeRtk31MJ(( zq{CPc!LpEm6L=ebGYx~#>-es91$q6JbqY1d)cG6KJIY4 z>D4{E>73%IvJi9x67RO^1cVuXtp#JMcrBga(4YRZcL?7H^Wd2cfr$s;Me#PPp#caI_wAGTrPntG%dN1R z7eO(|*Hyu=c;j_i$fYIZ!1_6&{0+z(_B92AvEM~%A zGEDPBLgGc56!(Me8fgzJrKqsBWsT{R;oz>Ju0gj{JJqO!mU<;@{tW=x`<}a@?vkMU zg}_1({)-30;|ZUE;Q(NDG{Xs(64;Y zf;k~qbNL0AO-JV!L}mGc-|fGtI3DAMgrpT0>diu>DgyR#J@JXA4;~h zGz6VL#nKNyz`cj&Mn4Gqq%OYS?y}N|=XADVT`XhGNPzBun9!4owXtcWh-UrugIHRf zK8PJXRhs%358wkV;i233qVR1qB>#t2rq^9XK8*Le9r>`3Avv<5^O5jSDclM%%l6O7 zVO=1)QT%stN}&@9i>RL?x^Z`%H$j=p)NE;_&CtMXh)8GaM{4Ojz8@QR`e;79Z!NIe zHhMJo1J0Qf=4Fv#^Vijpz^I8|yb)zFO90S+6A%m=7*>(59RC&ewnb;95;Xbwn_7Y{ zD8WC%H(5g3JuW*s%QFI=*Tx}<@KFA*PgD_3guw5F%~3b9Wy2^0378eZ&lZk+kfvv{ zv>Q{X`S4a-IA&c|t&JN`3=^X15dN{2Am4Y?b-)|9dy;R^zP6}Ej-t4K8>Y!iN5o+M zhua|@%q}TqArsx>+2gTz{W~*^e4&sg7z1X8(FQ^pTQY6h_^y9;XdhlYcxxNcQ1%h- z6XLgXiZ;`yGy|Gkt}X#HLJ%;Rw!+^hW)a$qY7Wy z?25lrU0T{ZDyMs^k}$>77f=}sbO{)YfPu)@CsT7JApJu$KD=0gF(j^WRNuh+C9%o$ z=|s{ZOy*J70Z!gdGxk_XK18RKvBfj$HZWF$Ja4N{SlF!J+o@5Ayi&g+&{RZT5&?)mBNNK5X@TXvnaz z?N~bV5GKaR{#b!u5B@(S=gl_#lE*k-uA zm^_P)e;QW^jd_l`4u+30a$j|vu#$X;BKID5d3K?q&Y_9|3LPG<3E$}NFD~sJvHicv z!|ZF6Tc}lzdmwgvK_UGzjPLLGf(ZOti2!~a-X8(Svu_LB!_GY;m(7cJ0-a7i%Obe>!68x7JZBEg=J(sbc~dwaUK$#KzsKMKp-Km+>;?3eM z>}6J%J%WD#QNSHKkJY+7weI6Mke$`;zhw8{-LKeI^oKna9rPzyMX!v~HDM_rQL=Rc zzRlMARVMNwxcX%tTK#Nc>}f1`ht&?)p^JA1+Iw6hvi9{Gh1O={3%qs0?GcXr-tpd;N+iHQ`mC~3OXT9I7LLM-2mo=kVujCU_Q?3_cMT$-(>V{CD)RWFR2Y6V6})R++x~#ss(# zV!<|kuP)rJO}vGbHOG$3&M@sGju*kzQRd*Z9L7Y@P8;)CO}nw0_0i z{4lZ*Ed4Ok{b`mm7e2Iedq|a;ecnHkHNc9a*O0cN>ArgonDhayTv=S~YS`fz7EGOeUS{yz~2*=w_H=nAukiS$=i!$WDSstxW?PMKqa(*w3Z4fN9;wv8JIyX z_i}o%qLkd;Y?j;^TpZ+4OV_R3g2jEl=i|{QSBgkG>BKlWgpP z!BN6e^6>*~(UX|YmL%!7vaDE2J{`ZirT>6a=hf9@uWD`%F?&;3VzTD%RL|e(R{rx5 zt}o`#Pt%w&E;e1PIz>^Yk+$IBJG}20-uDGr1U?tkpQu$J-C6w(T|4v$F8{~p`B#TF z{TDMKcjvONFP9}W7m-Vu_Cj{t7gLtKgaoVL3aj7}zW@}$RzNwAiJr#e;t^{=VxVUVxWLfb4i&+(6cJXi0@ zZo2%%+ZwK9^)I4jmt^4>`HQ1=1Xfk2qC_0l!`FD3uW|YpqsN{xdCkhj8(LZpH1EH$Z-3YI{RZsM z*NuJ|so=Ppv;@F6ak<@Z-^uzueD~>me_a`+p@Q!L%N%2F&<%Q0s$cLnizglWU9)Ct z4b_AmGwJ>`gplFIe_S#UPY2A|ooWtFh+~Q$@UdKBM*8i~-&CKAd@o%YMC}8i&TrezH$M-gy5(qy37%q$X&%cm1CWdjPoRSQ>#)4strS76| zNTlQg5H^IUl|RqEJM-tl%)HTTy8f-ANd|`Um1J{FJMV5$O>uyKP{ag6BAt%q$Ncue ziF-a5y!pT9{Zl9o@cHn4ko*Y)^uGpa1BpDHwDcMu>e;-L0x*b?Hg66u#^?CnKIang zf|QYh&pC&*)n?1MT*23!o@j$l94OQ4a_U4RJQ7&{5g;ulVR{g@A#u{S=EhOy-;=w7 zECgQ*MjpJ?u_Dr+{PtlWjd2eQBQxV2_wf0i;ObJ+#&+|Av;pBi=dy~+(eQ&(5`pgz zh7Xw7@occb&7b)mS5b`M^C6rM8Objq&3TUT_MQ5C&!h$4H-;$a4-@%b7gHypGsuT= z80Pr3@E6;k5(ou;B~nAbj^pyMu6CODgA5q-BM>t#0_rL!Iw}aYuPzY-wL5?-INx8? zS7u5&@I6lE>I%~Qf{={RBtGW*4IAyDFYk5?mszA`90xFrfPZl#bp!BsfL-A4TuM9B z_0cJFVED^{bRggZ{N=8p1Vhhujrn1So;bsAUm0oA2;;x=c>hZjBXpw+R$98B&vR{v zc5t;|p%_?XEtU3Gg6|WmG^9D68Gf^+q`3wV^#LNnXojK6SiMXjJz=uG@1I;A(#O5s z2K>Dtp)ck8j$^r{=+S8t(D)0&IeiytX6E-O!Qksb?L=7ESNb(;P5a77lSTu%%;J5o zQjFkpz0MWpqn)6Sr-HSEv1v88IgYvkboT^>%X<7VAG99piSmdGLI{NS4T+Sis*E zA%c797U51qr_TQ5FZmf)Sc7kzzmqya*Mpk(IBBcoBAQ~WX&*WlBw&etKkFz4=;|jV z1nT|xJX?aa!;1hfghA%}=q}KQ5AbusD!4M)#;@^!zZ-r(%qKjFIuV^sKB#&i!b1L{ zM^h(&uL)=Pe@R>W?H6Y0q>sli!2U*Gt~%Ch7;5!be4fLDw82{yDkq%WFHjmu13e;3 z3Z=Ou0*Q7t_&}EmmvcEv9|v{DHQ(k6vnw!Wc@O%%9-4-InAZoZVP9-0p8#o||?%|F)kvai<&1GER%YxAZj^;J` z>28QXK;Ullc@Wb`Npy0?9}W6MQK(=@h%_k@leUG|2FV^I z&9{Xq@puL>C|EKUvpi9UHa7R3XG=m3%kEe=G zP8rA7Kaw>66as!9h3Y{TfzSOLt{&n7pV8A?J|-;$4v{v~yEsu$8cBjKBOicCv0P!& z=X=~CPoxwAe>coAgcE5|IHoqB1$pv_d_;r5U`TJ z-&#r|4IN!hK7czY0+bOUau;{dTPTe*dH^g>BM}RjaM$Uk{+qc*PR<*6Tc<70n?@R4 zfutax4vhb>#MpIQ_F)p9!30du5;|$5(e>zbKVL8)%>x(AlS3F5j4ocfOaK4^14%?d zR4-pK0Xr>|R2pe?Hj-k@=MP9d(&m@JRDUj$@>5D9jTA%DNIo-|Y?zaWJeW{B=P?=Y z;*v}%avEvGjii)(2K33Xa8hHUCgLzL{bvKEkwyw2DJ7o)CR!sGEE|pJ5aby$;V{Meq;i^tj|_RBaLo@ZliVvf<7}IbM)Y#$9KW(fqR&s zmMjmJMjDAkwX`~SlDM3C1dPEHJPyQdZ=ibMH zDKCp8Shg#TG|WgT@)^(_@<@3HNr;71APtea59upF#ATF58eNQ(B%c{fL|8@wOH8N!lPpXg;_D&?e1BYDxI z$Y%x<5fbnaF30NyYw6*6ct}g`gxoUU>1B0#eqkC`qsNlZANo24NSuoVxbPVw$*r*t z0g^jmg{5*XaQ1K3|1M9)_2$y(9!Qff4D>`uAR^KWB3*i!UKg2~!I)F7*B~ZVENTr< zTzc)FsZG+)hjsi)(n*$j2GZn<5xOADGu82+Fl_`%ef&QF00960`jd?@ h00006Nkl "svg" props [:use {:href (dm/str "#asset-" id)}]]) + diff --git a/frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.cljs b/frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.cljs new file mode 100644 index 0000000000..da0a0746ee --- /dev/null +++ b/frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.cljs @@ -0,0 +1,85 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.nitrate.nitrate-activation-success-modal + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.common.time :as ct] + [app.main.data.modal :as modal] + [app.main.data.nitrate :as dnt] + [app.main.refs :as refs] + [app.main.ui.ds.buttons.button :refer [button*]] + [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] + [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]] + [app.util.i18n :refer [tr]] + [app.util.theme :as theme] + [beicon.v2.core :as rx] + [rumext.v2 :as mf])) + +(mf/defc nitrate-activation-success-modal* + {::mf/register modal/components + ::mf/register-as :nitrate-activation-success + ::mf/wrap-props true} + [connectivity] + + (let [profile (mf/deref refs/profile) + profile-theme (get profile :theme theme/default) + system-theme* (mf/use-state theme/get-system-theme) + + light? + (mf/with-memo [profile-theme (deref system-theme*)] + (let [resolved (cond + (= profile-theme "light") "light" + (= profile-theme "system") (deref system-theme*) + :else "dark")] + (= resolved "light"))) + + svg-id (if light? "nitrate-success-light" "nitrate-success-dark") + + cancel-at (dm/get-in connectivity [:subscription :cancel-at]) + date-str (when cancel-at + (ct/format-inst cancel-at "d MMMM, yyyy")) + + on-create-org + (mf/use-fn + (fn [] + (modal/hide!) + (dnt/go-to-nitrate-cc-create-org)))] + + (mf/with-effect [] + (let [s (->> (rx/from-event (.. js/window (matchMedia "(prefers-color-scheme: dark)")) "change") + (rx/map #(if (.-matches %) "dark" "light")) + (rx/subs! #(reset! system-theme* %)))] + (fn [] (rx/dispose! s)))) + + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:button {:class (stl/css :close-btn) :on-click modal/hide!} + [:> icon* {:icon-id "close" + :size "m"}]] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-start)} + [:> raw-svg* {:id svg-id}]] + + [:div {:class (stl/css :modal-end)} + [:div {:class (stl/css :modal-title)} + "You are Business Nitrate!"] + + [:p {:class (stl/css :modal-text-primary)} + (dm/str "Your plan is active until " (or date-str "—") ".")] + + [:p {:class (stl/css :modal-text)} + "You can manage your subscription anytime from the Subscription page in your account settings."] + + [:p {:class (stl/css :modal-text)} + "Enjoy your plan!"] + + [:> button* {:variant "primary" + :on-click on-create-org + :class (stl/css :modal-button)} + "Create organization"]]]]])) diff --git a/frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.scss b/frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.scss new file mode 100644 index 0000000000..72c5dfc339 --- /dev/null +++ b/frontend/src/app/main/ui/nitrate/nitrate_activation_success_modal.scss @@ -0,0 +1,79 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@use "refactor/common-refactor.scss" as deprecated; +@use "ds/typography.scss" as t; +@use "ds/_borders.scss" as *; +@use "ds/spacing.scss" as *; +@use "ds/_sizes.scss" as *; +@use "ds/_utils.scss" as *; + +.modal-overlay { + @extend %modal-overlay-base; + + z-index: var(--z-index-notifications); +} + +.modal-dialog { + @extend %modal-container-base; + + max-block-size: initial; + min-inline-size: px2rem(608); + max-inline-size: px2rem(608); + padding: var(--sp-xxxl); +} + +.close-btn { + @extend %modal-close-btn-base; +} + +.modal-content { + display: flex; + gap: $sz-40; +} + +.modal-start { + display: flex; + justify-content: center; + min-inline-size: $sz-224; + + svg { + inline-size: 100%; + block-size: auto; + } + + @media (width <= 640px) { + display: none; + } +} + +.modal-end { + color: var(--color-foreground-secondary); + display: flex; + flex-direction: column; + gap: var(--sp-m); +} + +.modal-title { + @include t.use-typography("title-large"); + + color: var(--modal-title-foreground-color); +} + +.modal-text-primary { + @include t.use-typography("body-large"); + + color: var(--color-foreground-primary); +} + +.modal-text { + @include t.use-typography("body-large"); +} + +.modal-button { + margin-block-start: var(--sp-s); + align-self: flex-start; +} diff --git a/frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.cljs b/frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.cljs new file mode 100644 index 0000000000..2afa6d7cc3 --- /dev/null +++ b/frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.cljs @@ -0,0 +1,69 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.nitrate.nitrate-code-activation-modal + (:require-macros [app.main.style :as stl]) + (:require + [app.main.data.modal :as modal] + [app.main.store :as st] + [app.main.ui.components.forms :as fm] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.util.i18n :refer [tr]] + [rumext.v2 :as mf])) + +(def ^:private schema:activate-form + [:map {:title "ActivateForm"} + [:activation-code [:string {:min 1}]]]) + +(mf/defc nitrate-code-activation-modal* + {::mf/register modal/components + ::mf/register-as :nitrate-code-activation} + [_props] + (let [initial (mf/with-memo [] + {:activation-code ""}) + form (fm/use-form :schema schema:activate-form + :initial initial) + + on-accept + (mf/use-fn + (mf/deps form) + (fn [_] + ;; TODO: dispatch activation action with (-> @form :clean-data :activation-code) + (modal/hide!) + ;; TODO: remove, only for flow testing + (st/emit! (modal/show {:type :nitrate-activation-success}))))] + + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:> icon-button* {:variant "ghost" + :class (stl/css :close-btn) + :aria-label (tr "labels.close") + :on-click modal/hide! + :icon i/close}] + + [:div {:class (stl/css :modal-header)} + [:h2 {:class (stl/css :modal-title)} "Activate Nitrate"]] + + [:div {:class (stl/css :modal-content)} + [:& fm/form {:form form :on-submit on-accept} + [:& fm/input {:name :activation-code + :auto-focus? true + :label "Enter your activation code" + :type "text" + :placeholder "XXXX-XXXXX-XXXXX-XXXXX"}]] + [:input + {:type "button" + :class (stl/css-case :accept-btn true + :global/disabled (not (:valid @form))) + :disabled (not (:valid @form)) + :value "Activate" + :on-click on-accept}] + [:div {:class (stl/css :footer-text)} + "Need a code? Contact us: " + [:a {:class (stl/css :link) + :href "mailto:sales@nitrate.com"} + "sales@nitrate.com"]]]]])) diff --git a/frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.scss b/frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.scss new file mode 100644 index 0000000000..4fbe799df4 --- /dev/null +++ b/frontend/src/app/main/ui/nitrate/nitrate_code_activation_modal.scss @@ -0,0 +1,65 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@use "refactor/common-refactor.scss" as deprecated; +@use "ds/typography.scss" as t; +@use "ds/spacing.scss" as *; +@use "ds/_sizes.scss" as *; + +.close-btn { + @extend %modal-close-btn-base; +} + +.modal-overlay { + @extend %modal-overlay-base; + + z-index: var(--z-index-notifications); +} + +.modal-dialog { + @extend %modal-container-base; + + min-inline-size: px2rem(480); + padding: var(--sp-xxxl); +} + +.modal-title { + @include t.use-typography("title-large"); + + color: var(--modal-title-foreground-color); + margin-block-end: var(--sp-xxxl); +} + +.modal-content { + display: flex; + flex-direction: column; + gap: var(--sp-m); + color: var(--color-foreground-secondary); +} + +.modal-description { + @include t.use-typography("body-large"); +} + +.action-buttons { + @extend %modal-action-btns; +} + +.accept-btn { + @extend %modal-accept-btn; + width: 100%; +} + +.footer-text { + @include t.use-typography("body-medium"); + + color: var(--color-foreground-secondary); + margin-block-start: var(--sp-xxxl); +} + +.link { + color: var(--color-accent-primary); +} diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs index ef3bc46d38..c6a5aae89e 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs @@ -11,6 +11,7 @@ [app.main.data.modal :as modal] [app.main.data.nitrate :as dnt] [app.main.refs :as refs] + [app.main.store :as st] [app.main.ui.components.forms :as fm] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] @@ -37,7 +38,12 @@ (mf/use-fn (mf/deps form) (fn [] - (dnt/go-to-buy-nitrate-license (-> @form :clean-data :subscription name))))] + (dnt/go-to-buy-nitrate-license (-> @form :clean-data :subscription name)))) + + on-activate-click + (mf/use-fn + (fn [] + (st/emit! (modal/show {:type :nitrate-code-activation}))))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog :subscription-success)} @@ -80,6 +86,10 @@ [:div {:class (stl/css :modal-text-small :modal-info)} "Cancel anytime before your next billing cycle."]]] + [:p {:class (stl/css :modal-text-medium)} + "Have an activation code? " [:a {:class (stl/css :link) + :on-click on-activate-click} + "Enter activation code"]] [:p {:class (stl/css :modal-text-medium)} [:a {:class (stl/css :link) :href dnt/go-to-subscription-url} @@ -92,6 +102,13 @@ "Contact us to try Nitrate for 14 days:")] [:p {:class (stl/css :modal-text-large)} [:a {:class (stl/css :link) :href "mailto:sales@penpot.app"} - "sales@penpot.app"]]])]]]])) + "sales@penpot.app"]] + [:div {:class (stl/css :activation-code)} + [:p {:class (stl/css :modal-text-large)} + "Have an activation code?"] + [:p {:class (stl/css :modal-text-large)} + [:a {:class (stl/css :link) + :on-click on-activate-click} + "Enter activation code"]]]])]]]])) diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss index d21a24c26c..69c33d87d5 100644 --- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss +++ b/frontend/src/app/main/ui/nitrate/nitrate_form.scss @@ -107,6 +107,10 @@ color: var(--color-foreground-primary); } +.activation-code { + margin-block-start: var(--sp-xxxl); +} + .link { color: var(--color-accent-primary); } diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index e22a65ff01..ccf88b31e5 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -18,6 +18,7 @@ [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]] + [app.main.ui.nitrate.nitrate-activation-success-modal] [app.main.ui.notifications.badge :refer [badge-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] @@ -37,6 +38,7 @@ cta-link-trial cta-text-with-icon cta-link-with-icon + show-activation-by-code editors recommended show-button-cta]}] @@ -66,6 +68,14 @@ [:ul {:class (stl/css :benefits-list)} (for [benefit benefits] [:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])] + (when (and cta-link cta-text show-button-cta) + [:> button* {:variant "primary" + :type "button" + :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial))) + :on-click cta-link} cta-text]) + (when (and cta-link-trial cta-text-trial) + [:button {:class (stl/css :cta-button :bottom-link) + :on-click cta-link-trial} cta-text-trial]) (when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info) :on-click cta-link-with-icon} cta-text-with-icon @@ -75,14 +85,10 @@ [:button {:class (stl/css-case :cta-button true :bottom-link (not (and cta-link-trial cta-text-trial))) :on-click cta-link} cta-text]) - (when (and cta-link cta-text show-button-cta) - [:> button* {:variant "primary" - :type "button" - :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial))) - :on-click cta-link} cta-text]) - (when (and cta-link-trial cta-text-trial) - [:button {:class (stl/css :cta-button :bottom-link) - :on-click cta-link-trial} cta-text-trial])]) + (when show-activation-by-code + [:button {:class (stl/css :cta-button :activate-by-code) + :on-click #(st/emit! (modal/show {:type :nitrate-code-activation}))} + "Enter activation code"])]) (defn- make-management-form-schema [min-editors] [:map {:title "SeatsForm"} @@ -360,36 +366,6 @@ :value (tr "labels.close") :on-click handle-close-dialog}]]]]]])) -(mf/defc nitrate-success-dialog - {::mf/register modal/components - ::mf/register-as :nitrate-success} - [] - ;; TODO add translations for this texts when we have the definitive ones - (let [profile (mf/deref refs/profile)] - - [:div {:class (stl/css :modal-overlay)} - [:div {:class (stl/css :modal-dialog :subscription-success)} - [:button {:class (stl/css :close-btn) :on-click modal/hide!} - [:> icon* {:icon-id "close" - :size "m"}]] - [:div {:class (stl/css :modal-success-content)} - [:div {:class (stl/css :modal-start)} - [:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]] - - [:div {:class (stl/css :modal-end)} - [:div {:class (stl/css :modal-title)} - "You are Business Nitrate!"] - [:p {:class (stl/css :modal-text-large)} - (tr "subscription.settings.success.dialog.description")] - [:p {:class (stl/css :modal-text-large)} - (tr "subscription.settings.sucess.dialog.footer")] - - [:div {:class (stl/css :success-action-buttons)} - [:input - {:class (stl/css :primary-button) - :type "button" - :value "CREATE ORGANIZATION" - :on-click dnt/go-to-nitrate-cc-create-org}]]]]]])) (mf/defc subscription-page* [{:keys [profile]}] @@ -498,7 +474,7 @@ ^boolean show-subscription-success-modal? (st/emit! (if (= params-subscription "subscribed-to-penpot-nitrate") - (modal/show :nitrate-success {}) + (modal/show :nitrate-activation-success {}) (modal/show :subscription-success {:subscription-name (if (= params-subscription "subscribed-to-penpot-unlimited") (if (= success-modal-is-trial? "true") @@ -658,6 +634,7 @@ :cta-link #(open-subscription-modal "nitrate" subscription) :cta-text-with-icon (tr "subscription.settings.more-information") :cta-link-with-icon go-to-pricing-page + :show-activation-by-code true :show-button-cta (not nitrate-license)}])]]]))