mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-03 08:37:53 +08:00
Merge remote-tracking branch 'origin/temp/settings-ui' into PCP-3976-make-the-wizard-responsive
This commit is contained in:
Narek Zakarian
commit
8d6182da91
19 changed files with 468 additions and 199 deletions
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="40px" height="24px" viewBox="0 0 43 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>MyBank</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="3.086436e-05 0.00960615385 42.6159033 0.00960615385 42.6159033 24 3.086436e-05 24"></polygon>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="SPB_&_AltPay_NewAssets" transform="translate(-100.000000, -159.000000)">
|
||||
<g id="MyBank" transform="translate(100.000000, 159.000000)">
|
||||
<path d="M29.010016,14.6206556 C29.010016,14.6206556 27.947442,14.8389924 27.9585564,14.0777038 C27.9698571,13.3164773 29.8942008,13.3619719 30.0914038,13.4236258 C30.0914038,13.4236258 30.1519432,14.2874637 29.010016,14.6206556 M29.3297879,9.81836571 C27.677716,9.80301439 26.9053582,10.753926 26.9053582,10.753926 C26.4037199,11.2864986 26.7253546,12.0076376 27.2173686,12.0597202 C27.924406,12.1345501 27.9170171,11.5413802 29.0022546,11.2784811 C29.9542434,11.0477763 29.9954723,11.9305703 29.9954723,11.9305703 C25.9352386,11.8295126 26.1290887,15.239929 27.5113104,15.9642377 C28.8367183,16.658714 30.0756326,15.7825701 30.0756326,15.7825701 C30.0756326,15.7825701 30.1222013,16.2545455 30.777951,16.2545455 C31.5283904,16.2545455 31.5272727,15.5049412 31.5272727,15.5049412 L31.5242302,12.1853897 C31.4748674,9.75671183 29.3297879,9.81836571 29.3297879,9.81836571" id="Fill-1" fill="#1A4B67"></path>
|
||||
<path d="M42.4169651,14.9132636 L40.766254,12.4266353 L41.9794586,11.2784792 C41.9794586,11.2784792 42.5394372,10.7597112 42.0797024,10.2455911 C41.5701862,9.67606803 40.9629029,10.2382165 40.9629029,10.2382165 L39.4383789,11.6556411 L39.4383789,8.81056644 C39.4383789,8.40291433 39.1083605,8.07272727 38.7011934,8.07272727 C38.2936547,8.07272727 37.9636364,8.40291433 37.9636364,8.81056644 L37.9636364,15.5050966 C37.9636364,15.9126248 38.2936547,16.2429358 38.7011934,16.2429358 C39.1083605,16.2429358 39.4383789,15.9126248 39.4383789,15.5050966 L39.4383789,13.7227806 L39.7172538,13.4440304 L41.2106953,15.7865117 C41.2106953,15.7865117 41.697426,16.5998328 42.4143027,16.0821803 C42.9532914,15.6931198 42.4169651,14.9132636 42.4169651,14.9132636" id="Fill-3" fill="#1A4B67"></path>
|
||||
<path d="M37.0887651,12.0920353 C37.0887651,9.6760941 35.0962232,9.33568291 33.7411943,10.1020724 C33.7401529,10.1029393 33.7389278,10.1056016 33.7382539,10.1063446 C33.6363205,9.81249385 33.362313,9.6 33.0365425,9.6 C32.6248269,9.6 32.2909091,9.93768691 32.2909091,10.3541303 L32.2909091,15.3913243 C32.2909091,15.8078915 32.6248269,16.1454545 33.0365425,16.1454545 C33.4485644,16.1454545 33.7826048,15.8078915 33.7826048,15.3913243 L33.7723134,11.9929705 C33.7723134,11.9929705 33.9532086,11.7752139 34.2436332,11.5669922 C34.9412403,11.0671487 35.6063806,11.2374162 35.6063806,12.0917257 L35.6234716,15.4035835 C35.6234716,15.8135877 35.9518762,16.1454545 36.3573435,16.1454545 C36.7625045,16.1454545 37.0909091,15.8135877 37.0909091,15.4035835 L37.0887651,12.0920353 Z" id="Fill-5" fill="#1A4B67"></path>
|
||||
<path d="M15.5613016,16.2862697 C15.7330634,15.9971851 15.762994,15.7935853 15.762994,15.7935853 L14.0695172,11.3349218 C14.0695172,11.3349218 13.7622674,10.4721348 14.4393994,10.2166114 C15.1567468,9.94557914 15.4157136,10.6357839 15.4696009,10.7805123 C15.5234881,10.9252407 16.5395249,13.6504516 16.5395249,13.6504516 L17.5177483,10.7867779 C17.5177483,10.7867779 17.7979621,9.89638514 18.5815138,10.2138818 C19.2290232,10.4764773 18.8964002,11.3498103 18.8964002,11.3498103 C18.8964002,11.3498103 17.8952671,14.3335844 17.0561037,16.4983684 C16.5548597,17.7916804 16.1267792,17.9191009 15.6376676,18.0403799 C14.9830758,18.2027884 13.7454545,18.1223286 13.7454545,17.30247 C13.7454545,16.655814 14.4027561,16.615491 14.6992284,16.6251065 C14.7151175,16.6254167 15.3279543,16.6788911 15.5613016,16.2862697" id="Fill-7" fill="#00C0EE"></path>
|
||||
<path d="M11.5669215,8.85710249 L10.0137262,13.1590392 L8.3203761,8.88327934 C8.3203761,8.88327934 8.06948196,8.07272727 7.36345596,8.07272727 C6.54545455,8.07272727 6.57202708,8.72317872 6.55361169,8.88327934 C6.53525811,9.04350403 6.55361169,15.569481 6.55361169,15.569481 C6.55361169,15.569481 6.54545455,16.2545455 7.29591229,16.2545455 C8.06280792,16.2545455 8.02603896,15.56334 8.03209502,15.56334 C8.03821288,15.56334 8.03209502,12.1182301 8.03209502,12.1182301 L9.27754342,15.56334 C9.27754342,15.56334 9.46151186,16.2407127 10.0381976,16.2283686 C10.6148833,16.2161486 10.7804982,15.56334 10.7804982,15.56334 L11.823501,12.1244331 L11.823501,15.56334 C11.823501,15.56334 11.823501,16.2545455 12.5780991,16.2545455 C13.3081022,16.2545455 13.3081022,15.56334 13.3081022,15.56334 L13.3090909,8.88948239 C13.3090909,8.88948239 13.3090909,8.07272727 12.5166733,8.07663519 C11.8595284,8.07973672 11.609932,8.71207526 11.5669215,8.85710249 C11.5619778,8.8740368 11.5596913,8.88327934 11.5596913,8.88327934" id="Fill-9" fill="#00C0EE"></path>
|
||||
<g id="Group-13">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-12"></g>
|
||||
<path d="M42.6159341,18.6971754 L29.5208652,18.6971754 L19.9057529,18.6956369 L19.9124196,18.7062215 C18.0119775,20.9263446 15.1892466,22.3382831 12.0318843,22.3382831 C6.30740974,22.3382831 1.66682976,17.7116369 1.66682976,12.0048677 C1.66682976,6.29803692 6.30740974,1.67182154 12.0318843,1.67182154 C15.2027652,1.67182154 18.0390147,3.09182154 19.9398272,5.32819077 L22.0210727,5.32819077 C19.8613082,2.12277538 16.1963507,0.00960615385 12.0318843,0.00960615385 C5.38703452,0.00960615385 3.086436e-05,5.38012923 3.086436e-05,12.0048677 C3.086436e-05,18.6296062 5.38703452,24.0000062 12.0318843,24.0000062 C15.5178286,24.0000062 18.6504994,22.5164985 20.846622,20.1542215 L41.6296327,20.1336062 L42.6159341,18.6971754 Z" id="Fill-11" fill="#00C0EE" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
<path d="M23.5642714,14.6942333 L21.476941,14.6942333 L21.476941,12.703212 L23.5642714,12.703212 C24.0691167,12.729228 24.5593003,12.986305 24.5593003,13.698846 C24.5593003,14.4306215 24.1135333,14.6942333 23.5642714,14.6942333 Z M21.476941,9.5856756 L23.4225205,9.5856756 C23.8122278,9.59572442 24.2213404,9.80372869 24.2213404,10.3852036 C24.2213404,10.9910915 23.8636056,11.1846082 23.4225205,11.1846082 L21.476941,11.1846082 L21.476941,9.5856756 Z M25.2086687,11.7878453 C25.2484033,11.7332241 25.7477042,11.3284357 25.7082776,10.252103 C25.6287468,8.0729285 23.7375637,8.09777311 23.3189641,8.08507338 C22.644646,8.06479081 22.2387368,8.0729285 21.0010496,8.08507338 C19.9559983,8.09543044 19.9636372,9.0459372 19.9636372,9.0459372 L19.9636364,16.1454545 L23.4862807,16.1454545 C25.3714882,16.1454545 26.0727273,15.1069128 26.0727273,13.6549518 C26.0727273,12.1940516 25.2086687,11.7878453 25.2086687,11.7878453 Z" id="Fill-14" fill="#1A4B67"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="30px" height="30px" viewBox="0 0 42 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>logo OXXO</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs/>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="SPB_&_AltPay_NewAssets" transform="translate(-100.000000, -159.000000)">
|
||||
<g id="logo-OXXO" transform="translate(100.000000, 159.000000)">
|
||||
<path d="M0.142456528,1.48437917 C0.142456528,0.77043992 0.728159303,0.186243119 1.44446761,0.186243119 L40.6503931,0.186243119 C41.3667014,0.186243119 41.9524042,0.77043992 41.9524042,1.48437917 L41.9524042,18.1011373 C41.9524042,18.8150765 41.3667014,19.3990362 40.6503931,19.3990362 L1.44446761,19.3990362 C0.728159303,19.3990362 0.142456528,18.8150765 0.142456528,18.1011373 L0.142456528,1.48437917 Z" id="Fill-2" fill="#EDA42D"/>
|
||||
<polygon id="Fill-4" fill="#FEFEFE" points="0.142480318 17.5124813 41.952428 17.5124813 41.952428 2.07265562 0.142480318 2.07265562"/>
|
||||
<path d="M35.5752619,6.08262231 C33.662331,6.08262231 32.1029152,7.63763417 32.1029152,9.54463469 C32.1029152,11.4511608 33.662331,13.0064099 35.5752619,13.0064099 C37.4877171,13.0064099 39.0471329,11.4511608 39.0471329,9.54463469 C39.0471329,7.63763417 37.4877171,6.08262231 35.5752619,6.08262231" id="Fill-6" fill="#EC1D24"/>
|
||||
<path d="M6.95585459,6.08262231 C5.04268574,6.08262231 3.48326994,7.63763417 3.48326994,9.54463469 C3.48326994,11.4511608 5.04268574,13.0064099 6.95585459,13.0064099 C8.86807185,13.0064099 10.4277255,11.4511608 10.4277255,9.54463469 C10.4277255,7.63763417 8.86807185,6.08262231 6.95585459,6.08262231" id="Fill-7" fill="#EC1D24"/>
|
||||
<path d="M35.5752619,15.0141446 C32.5537303,15.0141446 30.0893537,12.5573397 30.0893537,9.54480072 C30.0893537,6.53155015 32.5537303,4.07521964 35.5752619,4.07521964 C38.5970315,4.07521964 41.0609322,6.53155015 41.0609322,9.54480072 C41.0609322,12.5573397 38.5970315,15.0141446 35.5752619,15.0141446 Z M12.4411918,9.54480072 C12.4411918,12.5573397 9.97729109,15.0141446 6.95575943,15.0141446 C3.93351408,15.0141446 1.46985124,12.5573397 1.46985124,9.54480072 C1.46985124,6.53155015 3.93351408,4.07521964 6.95575943,4.07521964 C9.97729109,4.07521964 12.4411918,6.53155015 12.4411918,9.54480072 Z M35.3028697,3.03585692 C32.0884035,2.9620911 30.5772808,5.01709763 28.384107,7.55170056 L26.3151155,9.94232969 L29.591435,13.8526295 C30.3719756,15.0542296 28.8822636,16.2465793 27.9580332,15.1472077 L24.9288888,11.5447794 L21.9772989,14.9562705 C21.0373673,16.0421223 19.5645461,14.8288999 20.3617394,13.6386849 L23.5659761,9.92382894 L21.4667717,7.42693908 L22.8173138,5.75949957 L24.9522028,8.31639828 L26.7923372,6.18217058 C27.6953948,5.13569219 28.6162946,3.74884741 29.8098246,3.03585692 L0.142385159,3.03585692 L0.142385159,16.549707 L7.07875226,16.549707 C10.2934564,16.549707 11.7529554,14.6332189 13.8866549,12.0492806 L15.8999784,9.61097649 L12.5334959,5.77752594 C11.726073,4.59418943 13.1874752,3.36815887 14.1371606,4.44594623 L17.2483795,7.9779294 L20.1209875,4.49931378 C21.0354641,3.39164059 22.5356435,4.57118208 21.7662842,5.77942346 L18.6486421,9.56757088 L20.8051797,12.0153626 L19.4463112,13.6197098 L17.2997653,11.2058361 L15.5095892,13.3813347 C14.6310351,14.4484486 13.7415376,15.8094397 12.5646605,16.549707 L41.9523328,16.549707 L41.9523328,3.03585692 L35.3028697,3.03585692 Z" id="Fill-8" fill="#EC1D24"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="50px" height="30px" viewBox="0 0 61 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>logo P24</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0.0298111346 0.0177431925 7.39245963 0.0177431925 7.39245963 9.07005775 0.0298111346 9.07005775"></polygon>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="SPB_&_AltPay_NewAssets" transform="translate(-99.000000, -159.000000)">
|
||||
<g id="logo-P24" transform="translate(99.000000, 159.000000)">
|
||||
<polygon id="Fill-1" fill="#D03238" points="12.7765868 12.1072822 17.8130945 12.1002493 17.6289678 13.2702352 13.4176179 17.375423 16.9512079 17.368193 16.7459003 18.631808 11.541715 18.6327282 11.7592227 17.3296108 15.7961995 13.3826296 12.5756892 13.3824324"></polygon>
|
||||
<path d="M6.21202433,11.7030305 C6.21070454,11.7180164 6.0904428,12.4456878 5.92791562,13.3063263 C5.8656924,13.6356878 5.61931034,13.8124953 5.33504069,13.8738192 C4.86574306,13.975007 4.36068237,13.956439 4.36068237,13.956439 L2.13880164,13.9506549 L2.62664069,10.9444014 L4.6399304,10.9501197 C4.6399304,10.9501197 4.77619055,10.9472277 4.9664333,10.9502183 C5.18265335,10.953669 5.46866127,10.9647113 5.70368026,10.9963263 C5.90496417,11.0233732 6.0689077,11.0655376 6.11960691,11.130838 C6.18646549,11.2170399 6.21408449,11.3270681 6.22338739,11.4276315 C6.23658528,11.5705892 6.21273251,11.6943545 6.21202433,11.7030305 M7.27065599,10.1062418 C7.16027657,9.98727465 7.00454148,9.89551878 6.82855889,9.82473005 C6.64607393,9.75134507 6.44182855,9.70050469 6.24379583,9.66534038 C5.9915552,9.62051408 5.74942222,9.60112441 5.57530665,9.59280986 C5.41512934,9.58515258 5.3125077,9.58692723 5.3125077,9.58692723 L3.11087446,9.58659859 L1.47253356,9.58636854 L3.21899736e-06,18.6323404 L1.37100639,18.6337864 L1.91292459,15.2806549 L4.57110823,15.2923873 C4.57110823,15.2923873 5.60608026,15.3338944 6.34091298,14.9370305 C7.07568132,14.5398052 7.27020533,13.6368052 7.27020533,13.6368052 C7.27020533,13.6368052 7.35103435,13.3017911 7.4170238,12.8927019 C7.48954781,12.4434859 7.56381008,11.9040915 7.60237367,11.6168615 C7.61930559,11.4908286 7.62934887,11.4133357 7.62934887,11.4133357 C7.62934887,11.4133357 7.64718211,11.3201995 7.64885599,11.1758286 C7.65120586,10.9737817 7.62191298,10.6714014 7.46788396,10.3833169 C7.41692723,10.2880117 7.35232195,10.194284 7.27065599,10.1062418" id="Fill-2" fill="#D03238"></path>
|
||||
<polygon id="Fill-4" fill="#D03238" points="24.6387659 9.58491596 25.957396 9.58383146 24.4799084 18.6343385 23.1579306 18.6321695"></polygon>
|
||||
<polygon id="Fill-6" fill="#D03238" points="31.6836961 12.1058427 32.9486012 12.1047582 33.3952692 16.6967911 35.34096 12.0964765 36.9020128 12.1007817 37.3633595 16.7157207 39.3092434 12.1051197 40.6214998 12.1038709 37.8326249 18.6287582 36.274598 18.6289225 35.8258054 14.059993 33.8571632 18.6290211 32.3255964 18.6334249"></polygon>
|
||||
<path d="M21.9154587,14.5398183 L18.970044,14.5365648 L19.0872155,14.0592502 C19.0872155,14.0592502 19.1895152,13.6860484 19.3937606,13.526593 C19.5981991,13.3673019 19.8593242,13.3402221 20.1052878,13.3159028 C20.3514123,13.2914521 21.0026798,13.2446211 21.5343294,13.3564568 C21.7108593,13.3934615 21.8786978,13.4948136 21.9223474,13.6449028 C22.0255163,13.9991751 21.9154587,14.5398183 21.9154587,14.5398183 M22.2018529,12.1608371 C21.8322477,12.0378277 21.1903152,12.0134756 20.6485901,12.0203441 C20.1234751,12.0270155 19.8826619,12.0520906 19.6867215,12.095208 C19.6867215,12.095208 18.7525685,12.2319216 18.2224962,12.9024427 C17.6924239,13.572931 17.5342746,15.0402033 17.5342746,15.0402033 C17.5342746,15.0402033 17.2195854,16.6616399 17.3116487,17.2018887 C17.4035189,17.7421376 17.5685569,18.242884 18.1682561,18.4779592 C18.7680841,18.7129685 19.2767822,18.7025178 19.2767822,18.7025178 C19.2767822,18.7025178 20.3455859,18.7882268 21.1509147,18.5937385 C21.9562756,18.3996775 22.3808614,17.8207808 22.3808614,17.8207808 C22.3808614,17.8207808 22.5697199,17.57187 22.7059801,17.274485 C22.842369,16.9771329 22.8823168,16.7707479 22.8883041,16.7453113 L22.9727706,16.3950155 L21.6036023,16.396823 C21.6036023,16.396823 21.528149,17.3193113 20.7899363,17.4044615 C20.0519168,17.4894146 19.655787,17.4573066 19.5130244,17.4518183 C19.3723542,17.4465601 18.5793864,17.4799169 18.6436698,16.8049263 C18.6439917,16.795823 18.6445711,16.7824803 18.6454725,16.7635178 C18.6822334,15.9936493 18.7659917,15.7941329 18.7659917,15.7941329 L23.0639326,15.7817761 L23.2473189,14.6980249 C23.4560065,13.4650718 23.3028144,12.5274005 22.2018529,12.1608371" id="Fill-8" fill="#D03238"></path>
|
||||
<path d="M18.6561379,16.7743578 C18.651567,16.7982611 18.6478667,16.8217106 18.6446018,16.8449331 C18.6380719,16.9631638 18.6576615,16.7678525 18.6561379,16.7743578" id="Fill-10" fill="#D03238"></path>
|
||||
<path d="M26.7636688,16.7758934 C26.7590979,16.7997986 26.7553976,16.8233256 26.7521327,16.84655 C26.7456028,16.9646386 26.7651925,16.7692363 26.7636688,16.7758934" id="Fill-12" fill="#D03238"></path>
|
||||
<path d="M30.0115107,14.5380108 L27.0662891,14.5349545 L27.1834284,14.0574427 C27.1834284,14.0574427 27.2857281,13.6841423 27.4899735,13.5249498 C27.6942511,13.3656587 27.9553761,13.3384146 28.2015007,13.3140624 C28.4476252,13.2899075 29.0987318,13.2428136 29.6305746,13.3548465 C29.8069112,13.3917197 29.974782,13.493039 30.0185603,13.6432925 C30.1217614,13.9975648 30.0115107,14.5380108 30.0115107,14.5380108 M30.3095899,12.162316 C29.9397593,12.0392737 29.2978912,12.0149216 28.7561339,12.0218559 C28.2310189,12.0284615 27.9901735,12.0535366 27.7942331,12.096654 C27.7942331,12.096654 26.8600801,12.2335648 26.3300078,12.9038887 C25.7999355,13.5745742 25.6418184,15.0416493 25.6418184,15.0416493 C25.6418184,15.0416493 25.3271614,16.6632502 25.4191925,17.2034991 C25.5112558,17.7437808 25.6761007,18.2442315 26.2759608,18.4795695 C26.8756601,18.7146117 27.384326,18.704161 27.384326,18.704161 C27.384326,18.704161 28.4532907,18.7896399 29.2584585,18.5953817 C30.0637872,18.4010906 30.488373,17.8222268 30.488373,17.8222268 C30.488373,17.8222268 30.6772637,17.5732831 30.8134917,17.2759967 C30.9499128,16.9787432 30.9898284,16.7721939 30.9960089,16.7467573 L31.0804754,16.3964615 L29.7111461,16.398269 C29.7111461,16.398269 29.6356928,17.3208559 28.8974801,17.4058089 C28.1594606,17.4908606 27.7633308,17.4589498 27.6207292,17.4535272 C27.4800912,17.4482033 26.6869624,17.4814286 26.7511814,16.8064709 C26.7515355,16.7973347 26.7521149,16.783992 26.7530163,16.7649638 C26.789745,15.9950953 26.8735033,15.7955789 26.8735033,15.7955789 L31.1714764,15.7833207 L31.3548627,14.6996352 C31.5637112,13.4666822 31.4103582,12.5290108 30.3095899,12.162316" id="Fill-14" fill="#D03238"></path>
|
||||
<path d="M42.1422604,12.1064737 L42.9880842,16.8768258 L45.3813121,12.1015113 L46.7273359,12.1132437 L43.2792425,18.9339714 C43.2792425,18.9339714 42.6553686,20.1681732 42.268252,20.4813329 C41.8812963,20.7948211 41.6448609,20.9349854 41.3282404,20.9669291 C41.0118129,20.9990371 40.8847591,21.0215817 40.5810467,20.9669291 L40.260177,20.9093845 L40.4608815,19.691516 C40.4608815,19.691516 40.9939475,19.7938869 41.3114694,19.6659808 C41.6289591,19.5378117 41.8857063,18.9857319 41.8857063,18.9857319 L42.0457871,18.709577 L40.7996166,12.1046005 L42.1422604,12.1064737 Z" id="Fill-16" fill="#D03238"></path>
|
||||
<path d="M47.2130407,12.7548808 L48.6007827,12.7568526 L48.6834465,12.2072047 C48.6834465,12.2072047 48.8318745,11.2156366 49.1624334,11.0240732 C49.2683062,10.9627164 49.4381083,10.9042845 49.6345637,10.8694488 C49.9971194,10.8052657 50.4598824,10.7977728 50.834284,10.8115756 C51.4118687,10.8328385 51.6277991,10.8380638 52.214912,10.9061906 C52.8022502,10.9744488 52.6524059,11.5531484 52.6524059,11.5531484 L52.5375521,12.4161202 C52.5375521,12.4161202 52.4873679,12.8026977 52.3518803,13.0442141 C52.2320692,13.2577962 51.9051801,13.4014113 51.7159674,13.4645427 C51.2588698,13.6167681 49.6946302,14.0226695 49.6946302,14.0226695 L48.4638144,14.3849606 C48.4638144,14.3849606 47.7084766,14.6085333 47.284245,15.0865709 C46.8602064,15.5647728 46.693398,16.108538 46.635456,16.3924817 C46.5774819,16.6762282 46.2525563,18.6309042 46.2525563,18.6309042 L52.8900645,18.6337962 L53.111274,17.2790826 L47.8615078,17.2852282 L47.9560175,16.7332469 C47.9560175,16.7332469 48.0169853,16.1641108 48.2426049,15.9784958 C48.3138091,15.9197023 48.3493468,15.8419465 48.7684281,15.6894254 C49.0184476,15.5983268 49.8748618,15.3654535 49.8748618,15.3654535 L51.8557363,14.8138338 C51.8557363,14.8138338 52.9363537,14.5297258 53.3620017,13.9279559 C53.7876175,13.3263502 53.9514323,12.1729606 53.9514323,12.1729606 C53.9514323,12.1729606 54.065932,11.0532892 53.9786328,10.7022376 C53.8915268,10.3512188 53.5662471,9.92964131 53.1716946,9.74997465 C52.7769811,9.57030798 52.3633399,9.46514366 51.1680618,9.4818385 C49.9729125,9.49869765 49.3827737,9.55568357 48.7777954,9.78280563 C48.172817,10.0097305 47.8233304,10.4240779 47.6007046,11.0080028 C47.3550951,11.5594582 47.2130407,12.7548808 47.2130407,12.7548808" id="Fill-18" fill="#B3B1B1"></path>
|
||||
<g id="Group-22" transform="translate(53.596306, 9.563380)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-21"></g>
|
||||
<path d="M4.74087815,5.71061643 L1.83911298,5.70611408 L5.37112565,1.86475728 L4.74087815,5.71061643 Z M6.11217103,5.70953192 L7.0417209,0.0187619718 L5.39481747,0.0177431925 L0.262898734,5.64449437 L0.0298111346,7.0693723 L4.51789821,7.06884648 L4.18946391,9.06825023 L5.56619689,9.07005775 L5.89131562,7.0690108 L7.1627552,7.07170563 L7.39246285,5.70772441 L6.11217103,5.70953192 Z" id="Fill-20" fill="#B3B1B1" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
<path d="M10.1801468,10.3279446 L14.4058534,10.3279446 C14.4058534,10.3279446 15.3537515,9.5459493 16.0255241,9.04447981 C16.6972966,8.54291174 17.9201615,7.75092582 17.9201615,7.75092582 L15.533275,6.61071455 C15.533275,6.61071455 13.5162191,7.88619343 12.6598048,8.48799624 C11.8270502,9.04250798 10.1801468,10.3279446 10.1801468,10.3279446" id="Fill-23" fill="#B3B1B1"></path>
|
||||
<path d="M19.2644213,6.94459155 L17.304245,5.5972723 C17.304245,5.5972723 19.0783632,4.56853521 21.4362788,3.60848357 C23.7941944,2.64830047 25.0516957,2.24893897 25.0516957,2.24893897 L25.4497569,4.15740845 C25.4497569,4.15740845 23.1796556,4.93237089 21.8786978,5.55993897 C20.5351527,6.14494836 19.2644213,6.94459155 19.2644213,6.94459155" id="Fill-25" fill="#B3B1B1"></path>
|
||||
<path d="M26.8996706,3.73855211 L26.5597444,1.78282441 C26.5597444,1.78282441 28.9793038,1.12600751 31.1963882,0.704791549 C33.4132795,0.283575587 36.3541233,0.0845521127 36.3541233,0.0845521127 L35.3810848,3.10559437 C35.3810848,3.10559437 32.794717,2.74517653 30.3682368,3.08160376 C28.476432,3.31158498 26.8996706,3.73855211 26.8996706,3.73855211" id="Fill-27" fill="#B3B1B1"></path>
|
||||
<path d="M36.9163341,3.36064413 L38.5531621,0.00399624413 C38.5531621,0.00399624413 42.1364212,-0.0670882629 45.2260148,0.419789671 C48.3157694,0.906831925 51.1418882,1.65708075 51.0804053,1.68991174 L43.2442713,5.87400563 C43.2442713,5.87400563 41.4141103,4.69028263 39.1401462,3.96402441 C37.8524185,3.58053615 36.9163341,3.36064413 36.9163341,3.36064413" id="Fill-29" fill="#B3B1B1"></path>
|
||||
<path d="M44.6489516,6.78693709 L46.3720165,8.1199277 L60.5253041,8.1199277 C60.5253041,8.1199277 60.4964941,7.65207793 60.1194529,6.98950986 C59.8834039,6.57424225 59.4563395,6.1353784 59.008255,5.67916244 C58.8455347,5.51339718 58.1924967,4.99404977 57.7055268,4.67162254 C56.4558155,3.84480094 55.7580656,3.52506854 54.462226,2.92211549 L44.6489516,6.78693709 Z" id="Fill-31" fill="#B3B1B1"></path>
|
||||
<path d="M11.0960899,12.100246 C10.5648266,12.100246 10.0630493,12.3141897 9.63424665,12.5539315 L9.70944243,12.100246 L8.30161393,12.100246 L7.17428887,18.5982507 L8.58314744,18.5982507 L9.2077295,14.9983117 C9.33784137,14.2677812 9.87029573,13.36603 10.9151823,13.36603 L11.6435448,13.3630723 L11.8625976,12.100246 L11.0960899,12.100246 Z" id="Fill-33" fill="#D03238"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="60" height="30" viewBox="0 0 95 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M31.6556 15.8697V3.04368H27.0469V0.000183105H39.5686V3.04368H34.96V15.8697H31.6556Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M39.0437 15.8696V4.34796H42.0871V6.17398C42.8045 4.63059 43.7393 4.34796 44.7393 4.34796H45.9133V7.43485H44.9133C43.4786 7.43485 42.1959 8.26099 42.1959 10.7827V15.8696H39.0437Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M47.3506 11.6522V4.34796H50.5027V10.9349C50.5027 12.2827 51.1548 13.2827 52.5026 13.2827C53.807 13.2827 54.633 12.2827 54.633 10.9566V4.34796H57.7852V15.8696H54.7853V14.4131C54.0245 15.5653 52.894 16.1305 51.4591 16.1305C48.9374 16.1305 47.3506 14.3914 47.3506 11.6522Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M59.1326 12.6306L61.8716 12.0002C62.002 12.8915 62.7195 13.5654 64.0889 13.5654C65.1542 13.5654 65.7412 13.1306 65.7412 12.5871C65.7412 12.1524 65.5021 11.8263 64.415 11.5871L62.6107 11.1959C60.3065 10.6959 59.3282 9.63068 59.3282 7.69586C59.3282 5.71765 60.9587 4.13068 64.0237 4.13068C67.2846 4.13068 68.5891 6.08724 68.7195 7.36975L65.9586 7.97848C65.8281 7.30452 65.3281 6.56544 63.9585 6.56544C63.0891 6.56544 62.4369 6.95677 62.4369 7.52193C62.4369 8.00023 62.763 8.26111 63.3281 8.39156L65.9586 9.0002C67.9586 9.45666 68.8933 10.6524 68.8933 12.3481C68.8933 14.1741 67.4368 16.0872 64.1107 16.0872C60.4586 16.0872 59.263 13.8915 59.1326 12.6306Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M74.9588 15.8697C72.9153 15.8697 71.5458 14.7393 71.5458 12.5001V7.1089H69.6111V4.34803H71.5458V1.78282L74.6979 0.869812V4.34803H77.024V7.1089H74.6979V11.9349C74.6979 12.7828 75.1326 13.1088 75.9804 13.1088H77.1978V15.8697H74.9588Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M78.9148 15.8697H82.0669V0.000183105H78.9148V15.8697Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M91.5675 4.34796H94.9369L90.133 20H86.7628L88.089 15.8696H86.3498L83.176 4.34796H86.5453L88.915 13.261L91.5675 4.34796Z" fill="#000000"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.94855H7.39894V1.0464L13.3011 6.94855L7.39894 12.8498V15.8698H14.5633V6.94855H21.1448V0H0V6.94855Z" fill="#000000"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -24,6 +24,10 @@ $max-width-onboarding: 1024px;
|
|||
$max-width-onboarding-content: 500px;
|
||||
$max-width-settings: 938px;
|
||||
|
||||
:root {
|
||||
--ppcp-color-app-bg: #{$color-white};
|
||||
}
|
||||
|
||||
#ppcp-settings-container {
|
||||
--max-width-settings: #{$max-width-settings};
|
||||
--max-width-onboarding: #{$max-width-onboarding};
|
||||
|
|
|
|||
|
|
@ -1,64 +1,111 @@
|
|||
.ppcp-r-navigation-container {
|
||||
padding: 24px 48px;
|
||||
position: sticky;
|
||||
top: var(--wp-admin--admin-bar--height);
|
||||
z-index: 10;
|
||||
|
||||
padding: 10px 48px;
|
||||
margin: 0 -20px 48px -20px;
|
||||
border-bottom: 1px solid $color-gray-300;
|
||||
position: relative;
|
||||
|
||||
box-shadow: 0 -1px 0 0 $color-gray-300 inset;
|
||||
background: var(--ppcp-color-app-bg);
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
--wp-components-color-accent: #{$color-blueberry};
|
||||
--color-text: #{$color-gray-900};
|
||||
--color-disabled: #CCC;
|
||||
|
||||
.ppcp-r-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
|
||||
button.is-primary {
|
||||
padding: 10px 18px;
|
||||
justify-content: center;
|
||||
margin: 0 0 0 12px;
|
||||
&:not(:disabled) {
|
||||
background-color: $color-blueberry;
|
||||
.components-button {
|
||||
@include font(13, 20, 400);
|
||||
|
||||
&.is-primary {
|
||||
background-color: var(--wp-components-color-accent);
|
||||
padding: 10px 16px;
|
||||
justify-content: center;
|
||||
margin: 0 0 0 12px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--color-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.is-tertiary {
|
||||
@include font(16, 24, 600);
|
||||
color: $color-gray-900;
|
||||
&:hover{
|
||||
background-color:none;
|
||||
background:none;
|
||||
&.is-link {
|
||||
color: var(--wp-components-color-accent);
|
||||
text-decoration: none;
|
||||
|
||||
&:disabled {
|
||||
color: var(--color-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-title {
|
||||
@include font(16, 24, 600);
|
||||
color: var(--color-text);
|
||||
|
||||
.title {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.big {
|
||||
@include font(20, 28, 400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--left {
|
||||
&__link {
|
||||
@include font(20, 28, 400);
|
||||
color: $color-gray-900;
|
||||
text-decoration: none;
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&--right a{
|
||||
@include font(13, 20, 400);
|
||||
color: $color-blueberry;
|
||||
text-decoration: none;
|
||||
&--right {
|
||||
.is-link {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&--progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $color-blueberry;
|
||||
background-color: var(--wp-components-color-accent);
|
||||
height: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
padding: 24px 35px;
|
||||
&.is-scrolled {
|
||||
box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
padding: 10px 12px;
|
||||
|
||||
.ppcp-r-navigation {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
&--right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
background: var(--ppcp-color-app-bg);
|
||||
box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
|
||||
}
|
||||
|
||||
&--progress-bar {
|
||||
display: none;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.components-button.is-title {
|
||||
.title {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
body:has(.ppcp-r-container--settings),
|
||||
body:has(.ppcp-r-container--onboarding) {
|
||||
background-color: var(--ppcp-color-app-bg) !important;
|
||||
|
||||
.woocommerce-layout,
|
||||
#woocommerce-layout__primary {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.notice,
|
||||
.nav-tab-wrapper.woo-nav-tab-wrapper,
|
||||
.woocommerce-layout__header,
|
||||
.wrap.woocommerce form > h2,
|
||||
#screen-meta-links {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
body:has(.ppcp-r-container--onboarding) {
|
||||
background-color: #fff !important;
|
||||
|
||||
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout__header, .wrap.woocommerce form > h2, #screen-meta-links {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
body:has(.ppcp-r-container--settings) {
|
||||
background-color: #fff !important;
|
||||
|
||||
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2, #screen-meta-links {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -28,5 +28,4 @@
|
|||
}
|
||||
|
||||
@import './components/reusable-components/payment-method-modal';
|
||||
@import './components/screens/onboarding-global';
|
||||
@import './components/screens/settings-global';
|
||||
@import './components/screens/fullscreen';
|
||||
|
|
|
|||
|
|
@ -1,130 +1,73 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import { Button, Icon } from '@wordpress/components';
|
||||
import { chevronLeft } from '@wordpress/icons';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { OnboardingHooks } from '../../../../data';
|
||||
import data from '../../../../utils/data';
|
||||
import useIsScrolled from '../../../../hooks/useIsScrolled';
|
||||
|
||||
const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
|
||||
const isLastStep = () => currentStep + 1 === stepperOrder.length;
|
||||
const isFistStep = () => currentStep === 0;
|
||||
const navigateBy = ( stepDirection ) => {
|
||||
let newStep = currentStep + stepDirection;
|
||||
const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
|
||||
const { title, isFirst, percentage, showNext, canProceed } = stepDetails;
|
||||
const { isScrolled } = useIsScrolled();
|
||||
|
||||
if ( isNaN( newStep ) || newStep < 0 ) {
|
||||
console.warn( 'Invalid next step:', newStep );
|
||||
newStep = 0;
|
||||
}
|
||||
|
||||
if ( newStep >= stepperOrder.length ) {
|
||||
setCompleted( true );
|
||||
} else {
|
||||
setStep( newStep );
|
||||
}
|
||||
};
|
||||
|
||||
const { products } = OnboardingHooks.useProducts();
|
||||
const { isCasualSeller } = OnboardingHooks.useBusiness();
|
||||
|
||||
let navigationTitle = '';
|
||||
let disabled = false;
|
||||
|
||||
switch ( currentStep ) {
|
||||
case 1:
|
||||
navigationTitle = __(
|
||||
'Set up store type',
|
||||
'woocommerce-paypal-payments'
|
||||
);
|
||||
disabled = isCasualSeller === null;
|
||||
break;
|
||||
case 2:
|
||||
navigationTitle = __(
|
||||
'Select product types',
|
||||
'woocommerce-paypal-payments'
|
||||
);
|
||||
disabled = products.length < 1;
|
||||
break;
|
||||
case 3:
|
||||
navigationTitle = __(
|
||||
'Choose checkout options',
|
||||
'woocommerce-paypal-payments'
|
||||
);
|
||||
case 4:
|
||||
navigationTitle = __(
|
||||
'Connect your PayPal account',
|
||||
'woocommerce-paypal-payments'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
navigationTitle = __(
|
||||
'PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
);
|
||||
}
|
||||
const state = OnboardingHooks.useNavigationState();
|
||||
const isDisabled = ! canProceed( state );
|
||||
const className = classNames( 'ppcp-r-navigation-container', {
|
||||
'is-scrolled': isScrolled,
|
||||
} );
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-navigation-container">
|
||||
<div className={ className }>
|
||||
<div className="ppcp-r-navigation">
|
||||
<div className="ppcp-r-navigation--left">
|
||||
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>
|
||||
{ ! isFistStep() ? (
|
||||
<Button
|
||||
variant="tertiary"
|
||||
onClick={ () => navigateBy( -1 ) }
|
||||
>
|
||||
{ navigationTitle }
|
||||
</Button>
|
||||
) : (
|
||||
<a
|
||||
className="ppcp-r-navigation--left__link"
|
||||
href={ global.ppcpSettings.wcPaymentsTabUrl }
|
||||
aria-label={ __(
|
||||
'Return to payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
{ navigationTitle }
|
||||
</a>
|
||||
) }
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={ isFirst ? onExit : onPrev }
|
||||
className="is-title"
|
||||
>
|
||||
<Icon icon={ chevronLeft } />
|
||||
<span className={ 'title ' + ( isFirst ? 'big' : '' ) }>
|
||||
{ title }
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
{ ! isFistStep() && (
|
||||
<div className="ppcp-r-navigation--right">
|
||||
<a
|
||||
href={ global.ppcpSettings.wcPaymentsTabUrl }
|
||||
aria-label={ __(
|
||||
'Return to payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
{ __(
|
||||
'Save and exit',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</a>
|
||||
{ ! isLastStep() && (
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={ disabled }
|
||||
onClick={ () => navigateBy( 1 ) }
|
||||
>
|
||||
{ __(
|
||||
'Continue',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
<div
|
||||
className="ppcp-r-navigation--progress-bar"
|
||||
style={ {
|
||||
width: `${
|
||||
( currentStep / ( stepperOrder.length - 1 ) ) * 90
|
||||
}%`,
|
||||
} }
|
||||
></div>
|
||||
{ ! isFirst &&
|
||||
NextButton( { showNext, isDisabled, onNext, onExit } ) }
|
||||
<ProgressBar percent={ percentage } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-navigation--right">
|
||||
<Button variant="link" onClick={ onExit }>
|
||||
{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
{ showNext && (
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={ isDisabled }
|
||||
onClick={ onNext }
|
||||
>
|
||||
{ __( 'Continue', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProgressBar = ( { percent } ) => {
|
||||
percent = Math.min( Math.max( percent, 0 ), 100 );
|
||||
|
||||
return (
|
||||
<div
|
||||
className="ppcp-r-navigation--progress-bar"
|
||||
style={ { width: `${ percent * 0.9 }%` } }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,37 @@
|
|||
import Container from '../../ReusableComponents/Container';
|
||||
import { OnboardingHooks } from '../../../data';
|
||||
import { getSteps } from './availableSteps';
|
||||
|
||||
import { getSteps, getCurrentStep } from './availableSteps';
|
||||
import Navigation from './Components/Navigation';
|
||||
|
||||
const getCurrentStep = ( requestedStep, steps ) => {
|
||||
const isValidStep = ( step ) =>
|
||||
typeof step === 'number' &&
|
||||
Number.isInteger( step ) &&
|
||||
step >= 0 &&
|
||||
step < steps.length;
|
||||
|
||||
const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0;
|
||||
return steps[ safeCurrentStep ];
|
||||
};
|
||||
|
||||
const Onboarding = () => {
|
||||
const { step, setStep, setCompleted, flags } = OnboardingHooks.useSteps();
|
||||
const steps = getSteps( flags );
|
||||
|
||||
const CurrentStepComponent = getCurrentStep( step, steps );
|
||||
const Steps = getSteps( flags );
|
||||
const currentStep = getCurrentStep( step, Steps );
|
||||
|
||||
const handleNext = () => setStep( currentStep.nextStep );
|
||||
const handlePrev = () => setStep( currentStep.prevStep );
|
||||
const handleExit = () => {
|
||||
window.location.href = window.ppcpSettings.wcPaymentsTabUrl;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navigation
|
||||
setStep={ setStep }
|
||||
currentStep={ step }
|
||||
setCompleted={ setCompleted }
|
||||
stepperOrder={ steps }
|
||||
stepDetails={ currentStep }
|
||||
onNext={ handleNext }
|
||||
onPrev={ handlePrev }
|
||||
onExit={ handleExit }
|
||||
/>
|
||||
|
||||
<Container page="onboarding">
|
||||
<div className="ppcp-r-card">
|
||||
<CurrentStepComponent
|
||||
<currentStep.StepComponent
|
||||
setStep={ setStep }
|
||||
currentStep={ step }
|
||||
setCompleted={ setCompleted }
|
||||
stepperOrder={ steps }
|
||||
stepperOrder={ Steps }
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,8 @@ const BUSINESS_RADIO_GROUP_NAME = 'business';
|
|||
const StepBusiness = ( {} ) => {
|
||||
const { isCasualSeller, setIsCasualSeller } = OnboardingHooks.useBusiness();
|
||||
|
||||
const handleSellerTypeChange = ( value ) => {
|
||||
const handleSellerTypeChange = ( value ) =>
|
||||
setIsCasualSeller( BUSINESS_TYPES.CASUAL_SELLER === value );
|
||||
};
|
||||
|
||||
const getCurrentValue = () => {
|
||||
if ( isCasualSeller === null ) {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,86 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import StepWelcome from './StepWelcome';
|
||||
import StepBusiness from './StepBusiness';
|
||||
import StepProducts from './StepProducts';
|
||||
import StepPaymentMethods from './StepPaymentMethods';
|
||||
import StepCompleteSetup from './StepCompleteSetup';
|
||||
|
||||
/**
|
||||
* List of all onboarding screens that are available.
|
||||
*
|
||||
* The screens are displayed in the order in which they appear in this array
|
||||
*
|
||||
* @type {[{id, StepComponent, title}]}
|
||||
*/
|
||||
const ALL_STEPS = [
|
||||
{
|
||||
id: 'welcome',
|
||||
title: __( 'PayPal Payments', 'woocommerce-paypal-payments' ),
|
||||
StepComponent: StepWelcome,
|
||||
canProceed: () => true,
|
||||
},
|
||||
{
|
||||
id: 'business',
|
||||
title: __( 'Set up store type', 'woocommerce-paypal-payments' ),
|
||||
StepComponent: StepBusiness,
|
||||
canProceed: ( { business } ) => business.isCasualSeller !== null,
|
||||
},
|
||||
{
|
||||
id: 'products',
|
||||
title: __( 'Select product types', 'woocommerce-paypal-payments' ),
|
||||
StepComponent: StepProducts,
|
||||
canProceed: ( { products } ) => products.products.length > 0,
|
||||
},
|
||||
{
|
||||
id: 'methods',
|
||||
title: __( 'Choose checkout options', 'woocommerce-paypal-payments' ),
|
||||
StepComponent: StepPaymentMethods,
|
||||
canProceed: () => true,
|
||||
},
|
||||
{
|
||||
id: 'complete',
|
||||
title: __(
|
||||
'Connect your PayPal account',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
StepComponent: StepCompleteSetup,
|
||||
canProceed: () => true,
|
||||
},
|
||||
];
|
||||
|
||||
export const getSteps = ( flags ) => {
|
||||
const allSteps = [
|
||||
StepWelcome,
|
||||
StepBusiness,
|
||||
StepProducts,
|
||||
StepPaymentMethods,
|
||||
StepCompleteSetup,
|
||||
];
|
||||
const steps = flags.canUseCasualSelling
|
||||
? ALL_STEPS
|
||||
: ALL_STEPS.filter( ( step ) => step.id !== 'business' );
|
||||
|
||||
if ( ! flags.canUseCasualSelling ) {
|
||||
return allSteps.filter( ( step ) => step !== StepBusiness );
|
||||
}
|
||||
const totalStepsCount = steps.length;
|
||||
|
||||
return allSteps;
|
||||
return steps.map( ( step, index ) => ( {
|
||||
...step,
|
||||
isFirst: index === 0,
|
||||
isLast: index === totalStepsCount - 1,
|
||||
showNext: index < totalStepsCount - 1,
|
||||
percentage: 100 * ( index / ( totalStepsCount - 1 ) ),
|
||||
nextStep: index < totalStepsCount - 1 ? index + 1 : index,
|
||||
prevStep: index > 0 ? index - 1 : 0,
|
||||
} ) );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the screen-details of the current step, based on the numeric step-index.
|
||||
*
|
||||
* @param {number} requestedStep Index of the screen to display.
|
||||
* @param {[]} steps List of all available steps (see `getSteps()`)
|
||||
* @return {{id, StepComponent, title}} The requested screen details, or the first welcome screen.
|
||||
*/
|
||||
export const getCurrentStep = ( requestedStep, steps ) => {
|
||||
const isValidStep = ( step ) =>
|
||||
typeof step === 'number' &&
|
||||
Number.isInteger( step ) &&
|
||||
step >= 0 &&
|
||||
step < steps.length;
|
||||
|
||||
const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0;
|
||||
return steps[ safeCurrentStep ];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,12 +4,25 @@ import PaymentMethodItem from '../../ReusableComponents/PaymentMethodItem';
|
|||
import ModalPayPal from './Modals/ModalPayPal';
|
||||
import ModalFastlane from './Modals/ModalFastlane';
|
||||
import ModalAcdc from './Modals/ModalAcdc';
|
||||
import { CommonHooks } from '../../../data';
|
||||
|
||||
const TabPaymentMethods = () => {
|
||||
const renderPaymentMethods = ( data ) => {
|
||||
const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
|
||||
|
||||
const conditionallyUpdatedPaymentMethods = [
|
||||
...data,
|
||||
...( storeCountry === 'DE' && storeCurrency === 'EUR'
|
||||
? [ puiPaymentMethod ]
|
||||
: [] ),
|
||||
...( storeCountry === 'MX' && storeCurrency === 'MXN'
|
||||
? [ oxxoPaymentMethod ]
|
||||
: [] ),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-payment-method-item-list">
|
||||
{ data.map( ( paymentMethod ) => (
|
||||
{ conditionallyUpdatedPaymentMethods.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItem
|
||||
key={ paymentMethod.id }
|
||||
{ ...paymentMethod }
|
||||
|
|
@ -173,7 +186,7 @@ const paymentMethodsAlternativeDefault = [
|
|||
id: 'eps',
|
||||
title: __( 'eps', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.',
|
||||
'An online payment method in Austria, enabling Austrian buyers to make secure payments directly through their bank accounts. Transactions are processed in EUR.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-eps',
|
||||
|
|
@ -182,11 +195,67 @@ const paymentMethodsAlternativeDefault = [
|
|||
id: 'blik',
|
||||
title: __( 'BLIK', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.',
|
||||
'A widely used mobile payment method in Poland, allowing Polish customers to pay directly via their banking apps. Transactions are processed in PLN.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-blik',
|
||||
},
|
||||
{
|
||||
id: 'mybank',
|
||||
title: __( 'MyBank', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'A European online banking payment solution primarily used in Italy, enabling customers to make secure bank transfers during checkout. Transactions are processed in EUR.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-mybank',
|
||||
},
|
||||
{
|
||||
id: 'przelewy24',
|
||||
title: __( 'Przelewy24', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'A popular online payment gateway in Poland, offering various payment options for Polish customers. Transactions can be processed in PLN or EUR.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-przelewy24',
|
||||
},
|
||||
{
|
||||
id: 'trustly',
|
||||
title: __( 'Trustly', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'A European payment method that allows buyers to make payments directly from their bank accounts, suitable for customers across multiple European countries. Supported currencies include EUR, DKK, SEK, GBP, and NOK.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-trustly',
|
||||
},
|
||||
{
|
||||
id: 'multibanco',
|
||||
title: __( 'Multibanco', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'An online payment method in Portugal, enabling Portuguese buyers to make secure payments directly through their bank accounts. Transactions are processed in EUR.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-multibanco',
|
||||
},
|
||||
];
|
||||
|
||||
const puiPaymentMethod = {
|
||||
id: 'pui',
|
||||
title: __( 'Pay upon Invoice', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Pay upon Invoice is an invoice payment method in Germany. It is a local buy now, pay later payment method that allows the buyer to place an order, receive the goods, try them, verify they are in good order, and then pay the invoice within 30 days.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-ratepay',
|
||||
};
|
||||
|
||||
const oxxoPaymentMethod = {
|
||||
id: 'oxxo',
|
||||
title: __( 'OXXO', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'OXXO is a Mexican chain of convenience stores. *Get PayPal account permission to use OXXO payment functionality by contacting us at (+52) 800–925–0304',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-oxxo',
|
||||
};
|
||||
|
||||
export default TabPaymentMethods;
|
||||
|
|
|
|||
|
|
@ -113,3 +113,13 @@ export const useSteps = () => {
|
|||
|
||||
return { flags, isReady, step, setStep, completed, setCompleted };
|
||||
};
|
||||
|
||||
export const useNavigationState = () => {
|
||||
const products = useProducts();
|
||||
const business = useBusiness();
|
||||
|
||||
return {
|
||||
products,
|
||||
business,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
44
modules/ppcp-settings/resources/js/hooks/useIsScrolled.js
Normal file
44
modules/ppcp-settings/resources/js/hooks/useIsScrolled.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* Taken from WooCommerce core:
|
||||
* https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/admin/client/hooks/useIsScrolled.js
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useState } from '@wordpress/element';
|
||||
|
||||
const isAtBottom = () =>
|
||||
window.innerHeight + window.scrollY >= document.body.scrollHeight;
|
||||
|
||||
const useIsScrolled = () => {
|
||||
const [ isScrolled, setIsScrolled ] = useState( false );
|
||||
const [ atBottom, setAtBottom ] = useState( isAtBottom() );
|
||||
const rafHandle = useRef( null );
|
||||
useEffect( () => {
|
||||
const updateIsScrolled = () => {
|
||||
setIsScrolled( window.pageYOffset > 20 );
|
||||
setAtBottom( isAtBottom() );
|
||||
};
|
||||
|
||||
const scrollListener = () => {
|
||||
rafHandle.current =
|
||||
window.requestAnimationFrame( updateIsScrolled );
|
||||
};
|
||||
|
||||
window.addEventListener( 'scroll', scrollListener );
|
||||
|
||||
window.addEventListener( 'resize', scrollListener );
|
||||
|
||||
return () => {
|
||||
window.removeEventListener( 'scroll', scrollListener );
|
||||
window.removeEventListener( 'resize', scrollListener );
|
||||
window.cancelAnimationFrame( rafHandle.current );
|
||||
};
|
||||
}, [] );
|
||||
|
||||
return {
|
||||
isScrolled,
|
||||
atBottom,
|
||||
atTop: ! isScrolled,
|
||||
};
|
||||
};
|
||||
|
||||
export default useIsScrolled;
|
||||
Loading…
Add table
Add a link
Reference in a new issue
