mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-10 18:10:54 +09:00
JS-3781: membership markup
This commit is contained in:
Mike Mhlv
parent
274abfb025
commit
80d2603d09
11 changed files with 345 additions and 19 deletions
BIN
dist/font/riccione/xlight.otf
vendored
Normal file
BIN
dist/font/riccione/xlight.otf
vendored
Normal file
Binary file not shown.
3
src/img/icon/payment/hyperlink.svg
Normal file
3
src/img/icon/payment/hyperlink.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.5 3.75H13M13 3.75V11.25M13 3.75L3 13.75" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 173 B |
45
src/img/icon/payment/slide0.svg
Normal file
45
src/img/icon/payment/slide0.svg
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<svg width="320" height="112" viewBox="0 0 320 112" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="136" y="48" width="24" height="24" rx="7" fill="black"/>
|
||||
<path d="M142 59.998L146.998 64.998L153.949 54.0469" stroke="#EAF8E5"/>
|
||||
<circle cx="20" cy="92" r="20" fill="black"/>
|
||||
<path d="M15.5 82V84" stroke="white"/>
|
||||
<path d="M24.5 82V84" stroke="white"/>
|
||||
<path d="M20 95.5C22.7614 95.5 25 93.933 25 92C25 90.067 22.7614 88.5 20 88.5" stroke="white"/>
|
||||
<path d="M20 104C15.5817 104 12 100.418 12 96" stroke="white"/>
|
||||
<circle cx="68" cy="20" r="20" fill="black"/>
|
||||
<path d="M63.5 10V12" stroke="white"/>
|
||||
<path d="M72.5 10V12" stroke="white"/>
|
||||
<path d="M68 23.5C70.7614 23.5 72 23.5 73 23.5C73 20 71.5 16 68 13.5" stroke="white"/>
|
||||
<path d="M68 32C63.5817 32 60 28.4183 60 24" stroke="white"/>
|
||||
<path d="M48.5 92.5C48.5 86.1487 53.6487 81 60 81H148C154.351 81 159.5 86.1487 159.5 92.5C159.5 98.8513 154.351 104 148 104H60C53.6487 104 48.5 98.8513 48.5 92.5Z" stroke="black"/>
|
||||
<path d="M60.375 92.5H148.375" stroke="black"/>
|
||||
<rect x="96.5" y="0.5" width="143" height="31" rx="11.5" stroke="black"/>
|
||||
<path d="M108 12H228" stroke="black"/>
|
||||
<path d="M108 20H195" stroke="black"/>
|
||||
<rect x="48.25" y="48.5" width="79.25" height="23" rx="11.5" stroke="black"/>
|
||||
<path d="M60.375 60H116.375" stroke="black"/>
|
||||
<rect x="176.5" y="40.5" width="95" height="47" rx="11.5" stroke="black"/>
|
||||
<path d="M188 52H259" stroke="black"/>
|
||||
<path d="M188 60H248" stroke="black"/>
|
||||
<path d="M188 68H259" stroke="black"/>
|
||||
<path d="M188 76H232" stroke="black"/>
|
||||
<circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 320 56)" fill="black"/>
|
||||
<path d="M304.5 68V70" stroke="white"/>
|
||||
<path d="M295.5 68V70" stroke="white"/>
|
||||
<path d="M298.35 71L291.943 80.5H300" stroke="white"/>
|
||||
<path d="M300 88.0002C303.969 88.0002 308 84.0001 308 80" stroke="white"/>
|
||||
<circle cx="295" cy="68" r="4.5" stroke="white"/>
|
||||
<circle cx="305" cy="68" r="4.5" stroke="white"/>
|
||||
<circle cx="261" cy="17" r="3" fill="black"/>
|
||||
<circle cx="267" cy="17" r="3" fill="black"/>
|
||||
<path d="M264 24.9997C260.344 23.2802 258.07 19.8913 258 17H264V24.9997Z" fill="black"/>
|
||||
<path d="M264 24.9997C267.656 23.2802 269.93 19.8913 270 17H264V24.9997Z" fill="black"/>
|
||||
<circle cx="247" cy="23" r="3" fill="black"/>
|
||||
<circle cx="253" cy="23" r="3" fill="black"/>
|
||||
<path d="M250 30.9997C246.344 29.2802 244.07 25.8913 244 23H250V30.9997Z" fill="black"/>
|
||||
<path d="M250 30.9997C253.656 29.2802 255.93 25.8913 256 23H250V30.9997Z" fill="black"/>
|
||||
<circle cx="281" cy="3" r="3" fill="black"/>
|
||||
<circle cx="275" cy="3" r="3" fill="black"/>
|
||||
<path d="M278 10.9997C274.344 9.28024 272.07 5.89134 272 3H278V10.9997Z" fill="black"/>
|
||||
<path d="M278 10.9997C281.656 9.28024 283.93 5.89134 284 3H278V10.9997Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
19
src/img/icon/payment/tier1.svg
Normal file
19
src/img/icon/payment/tier1.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle opacity="0.4" cx="32" cy="32" r="32" fill="url(#paint0_radial_701_13746)"/>
|
||||
<circle opacity="0.6" cx="32" cy="32" r="18" fill="url(#paint1_radial_701_13746)"/>
|
||||
<circle opacity="0.8" cx="32" cy="32" r="4" fill="url(#paint2_radial_701_13746)"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_701_13746" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32 32) rotate(90) scale(32)">
|
||||
<stop offset="0.41" stop-color="#24BFD4" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#24BFD4"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_radial_701_13746" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32 32) rotate(90) scale(18)">
|
||||
<stop offset="0.41" stop-color="#24BFD4" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#24BFD4"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint2_radial_701_13746" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32 32) rotate(90) scale(4)">
|
||||
<stop offset="0.285" stop-color="#2AAFC1" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#2AAFC1"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
24
src/img/icon/payment/tier2.svg
Normal file
24
src/img/icon/payment/tier2.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="17" cy="17" r="17" transform="rotate(-90 17 17)" fill="url(#paint0_radial_701_13758)"/>
|
||||
<circle cx="17" cy="43" r="17" transform="rotate(-90 17 43)" fill="url(#paint1_radial_701_13758)"/>
|
||||
<circle cx="43" cy="17" r="17" transform="rotate(-90 43 17)" fill="url(#paint2_radial_701_13758)"/>
|
||||
<circle cx="43" cy="43" r="17" transform="rotate(-90 43 43)" fill="url(#paint3_radial_701_13758)"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_701_13758" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17 17) rotate(90) scale(17)">
|
||||
<stop offset="0.41" stop-color="#A5AEFF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#A5AEFF"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_radial_701_13758" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17 43) rotate(90) scale(17)">
|
||||
<stop offset="0.41" stop-color="#A5AEFF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#A5AEFF"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint2_radial_701_13758" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43 17) rotate(90) scale(17)">
|
||||
<stop offset="0.41" stop-color="#A5AEFF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#A5AEFF"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint3_radial_701_13758" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43 43) rotate(90) scale(17)">
|
||||
<stop offset="0.41" stop-color="#A5AEFF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#A5AEFF"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
49
src/img/icon/payment/tier3.svg
Normal file
49
src/img/icon/payment/tier3.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_701_13771)">
|
||||
<circle opacity="0.6" cx="32.0013" cy="13.3346" r="13.3333" transform="rotate(-90 32.0013 13.3346)" fill="url(#paint0_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="32.0013" cy="50.6667" r="13.3333" transform="rotate(-90 32.0013 50.6667)" fill="url(#paint1_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="13.3346" cy="31.9987" r="13.3333" transform="rotate(-180 13.3346 31.9987)" fill="url(#paint2_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="50.6667" cy="31.9987" r="13.3333" transform="rotate(-180 50.6667 31.9987)" fill="url(#paint3_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="18.8008" cy="18.8001" r="13.3333" transform="rotate(-135 18.8008 18.8001)" fill="url(#paint4_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="45.1992" cy="45.1985" r="13.3333" transform="rotate(-135 45.1992 45.1985)" fill="url(#paint5_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="18.8001" cy="45.1992" r="13.3333" transform="rotate(135 18.8001 45.1992)" fill="url(#paint6_radial_701_13771)"/>
|
||||
<circle opacity="0.6" cx="45.1985" cy="18.8008" r="13.3333" transform="rotate(135 45.1985 18.8008)" fill="url(#paint7_radial_701_13771)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32.0013 13.3346) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32.0013 50.6667) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint2_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.3346 31.9987) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint3_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.6667 31.9987) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint4_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8008 18.8001) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint5_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(45.1992 45.1985) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint6_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8001 45.1992) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint7_radial_701_13771" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(45.1985 18.8008) rotate(90) scale(13.3333)">
|
||||
<stop offset="0.41" stop-color="#F05F5F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#F05F5F"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_701_13771">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -773,11 +773,27 @@
|
|||
"popupSettingsSpaceRemoveButton": "Move to Bin",
|
||||
|
||||
"popupSettingsPaymentTitle": "Membership",
|
||||
"popupSettingsPaymentIndexText": "Global name for your identity, increased sync volume, expanded sharing options, and other benefits for out paid plans. See details on Anytype.io",
|
||||
"popupSettingsPaymentIndexTitle": "Let’s build together",
|
||||
"popupSettingsPaymentIndexText": "Joining Anytype network means contributing to its story",
|
||||
|
||||
"popupSettingsPaymentItemTitle1": "Friend",
|
||||
"popupSettingsPaymentItemTitle2": "Supporter",
|
||||
"popupSettingsPaymentItemTitle3": "Funding Patron",
|
||||
"popupSettingsPaymentIndexSlide0Title": "Co-create with us",
|
||||
"popupSettingsPaymentIndexSlide0Text": "Stay closely connected with our team and community. Join calls with the team, influence Anytype's evolution, and have your say on features.",
|
||||
|
||||
"popupSettingsPaymentItemTitle1": "Explorer",
|
||||
"popupSettingsPaymentItemDescription1": "Dive into the network and enjoy the thrill of one-on-one collaboration",
|
||||
"popupSettingsPaymentItemTitle2": "Builder",
|
||||
"popupSettingsPaymentItemDescription2": "Unlock the magic of multi-party collaboration and enjoy top-notch support\n\n",
|
||||
"popupSettingsPaymentItemTitle3": "Co-creator",
|
||||
"popupSettingsPaymentItemDescription3": "Support our adventure and unlock exclusive access and perks",
|
||||
|
||||
"popupSettingsPaymentItemJustEmail": "Just e-mail",
|
||||
"popupSettingsPaymentItemPerYear": "per year",
|
||||
"popupSettingsPaymentItemPerYears": "per %s years",
|
||||
"popupSettingsPaymentItemLearnMore": "Learn more",
|
||||
|
||||
"popupSettingsPaymentIndexMembershipLevelsDetails": "Membership levels details",
|
||||
"popupSettingsPaymentIndexPrivacyPolicy": "Privacy policy",
|
||||
"popupSettingsPaymentIndexTermsAndConditions": "Terms and conditions",
|
||||
|
||||
"popupSettingsPaymentItemText1": "Your Anytype Identity has a global name in the Anytype system, you can store additional data and have more shared spaces.",
|
||||
"popupSettingsPaymentItemText2": "Your Anytype Identity has a global name in the Anytype system, you can store additional data and have more shared spaces.",
|
||||
|
|
|
|||
|
|
@ -46,4 +46,9 @@
|
|||
@font-face {
|
||||
font-family: 'Inter'; font-style: italic; font-weight: 700;
|
||||
src: url('~font/inter/bolditalic.woff2') format('woff2');
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'RiccioneXLight'; font-style: normal; font-weight: 400;
|
||||
src: url('~font/riccione/xlight.otf') format('opentype');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -684,11 +684,64 @@
|
|||
.actionItems { margin: 32px 0px 24px 0px; }
|
||||
}
|
||||
|
||||
.side.right.tabPaymentIndex { display: flex; flex-direction: column; }
|
||||
.side.right.tabPaymentIndex { display: flex; flex-direction: column; padding: 48px 32px !important; }
|
||||
.side.right.tabPaymentIndex {
|
||||
.items { display: flex; flex-direction: column; justify-content: space-evenly; gap: 16px; height: 100%; }
|
||||
.items {
|
||||
.item { background: red; height: 100%; }
|
||||
.membershipTitle { font-family: 'RiccioneXLight', 'Inter'; text-align: center; font-size: 48px; line-height: 48px; font-weight: 300; letter-spacing: -0.518px; margin-bottom: 0px; }
|
||||
.description { text-align: center; }
|
||||
|
||||
.slider { margin-bottom: 32px; }
|
||||
.slider {
|
||||
.feed { display: flex; position: relative; transition: left 400ms $easeInQuint; flex-wrap: nowrap; gap: 0px 16px; margin-bottom: 10px; }
|
||||
.slide { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 24px; width: 100%; height: 288px; border-radius: 12px; flex-shrink: 0; }
|
||||
.slide {
|
||||
.title { @include text-header3; margin-bottom: 4px; }
|
||||
.title,
|
||||
.label { width: 360px; }
|
||||
|
||||
.illustration { margin-bottom: 18px; display: inline-block; }
|
||||
.illustration.slide0 { width: 320px; height: 112px; background: url('~img/icon/payment/slide0.svg'); }
|
||||
}
|
||||
|
||||
.slide.slide0 { background: linear-gradient(180deg, #CFF5CE 0%, #F2F2F2 49.5%); }
|
||||
.slide.slide1 { background: linear-gradient(180deg, #C5EDFE 0%, #F2F2F2 49.5%); }
|
||||
.slide.slide2 { background: linear-gradient(180deg, #FEF1C5 0%, #F2F2F2 49.5%); }
|
||||
|
||||
.bullits { display: flex; flex-wrap: nowrap; gap: 0px 10px; justify-content: center; }
|
||||
.bullits {
|
||||
.bullit { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-control-inactive); }
|
||||
.bullit:hover { background-color: var(--color-control-active); }
|
||||
.bullit.active { background-color: var(--color-control-accent) !important; box-shadow: 0 0 0 1px var(--color-control-accent); }
|
||||
}
|
||||
}
|
||||
|
||||
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; margin-bottom: 48px; }
|
||||
.tiers {
|
||||
.tier { display: flex; flex-direction: column; justify-content: space-between; height: 296px; flex-shrink: 0; text-align: left; border-radius: 16px; padding: 16px 16px 20px; }
|
||||
.tier {
|
||||
.icon { width: 64px; height: 64px; background-size: 64px 64px; margin-bottom: 10px; }
|
||||
.icon.tier1 { background: url('~img/icon/payment/tier1.svg'); }
|
||||
.icon.tier2 { background: url('~img/icon/payment/tier2.svg'); width: 60px; height: 60px; margin: 2px 0px 12px; background-size: 60px 60px; }
|
||||
.icon.tier3 { background: url('~img/icon/payment/tier3.svg'); }
|
||||
|
||||
.title { @include text-paragraph; margin-bottom: 4px; }
|
||||
.label { @include text-small; }
|
||||
|
||||
.priceWrapper { margin-bottom: 10px; @include text-small; }
|
||||
.priceWrapper {
|
||||
.price { @include text-paragraph; font-weight: 600; display: inline-block; padding-right: 4px; }
|
||||
}
|
||||
|
||||
.button { width: 100%; }
|
||||
}
|
||||
|
||||
.tier.tier1 { background: linear-gradient(180deg, #D7FAFF 0%, #F3F3F3 25.64%); }
|
||||
.tier.tier2 { background: linear-gradient(180deg, #EAECFE 0%, #F3F3F3 25.64%); }
|
||||
.tier.tier3 { background: linear-gradient(180deg, #FFEBEB 0%, #F3F3F3 25.64%); }
|
||||
}
|
||||
|
||||
.actionItems { margin-bottom: 0 !important; }
|
||||
.actionItems {
|
||||
.icon { width: 16px; height: 16px; background: url('~img/icon/payment/hyperlink.svg'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -232,6 +232,10 @@ class App extends React.Component<object, State> {
|
|||
|
||||
componentDidMount () {
|
||||
this.init();
|
||||
|
||||
window.setTimeout(() => {
|
||||
popupStore.open('settings', { data: { page: 'paymentIndex' }})
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
init () {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,135 @@
|
|||
import * as React from 'react';
|
||||
import { Title, Label } from 'Component';
|
||||
import { I, translate } from 'Lib';
|
||||
import { Title, Label, Button, Icon } from 'Component';
|
||||
import { I, translate, UtilCommon } from 'Lib';
|
||||
import { observer } from 'mobx-react';
|
||||
import $ from 'jquery';
|
||||
|
||||
const PopupSettingsPagePaymentIndex = observer(class PopupSettingsPagePaymentIndex extends React.Component<I.PopupSettings> {
|
||||
|
||||
state = {
|
||||
currentSlide: 0
|
||||
};
|
||||
node: any = null;
|
||||
slideWidth: number = 0;
|
||||
|
||||
render () {
|
||||
const { onPage } = this.props;
|
||||
const { currentSlide } = this.state;
|
||||
const style = { left: -this.slideWidth * currentSlide };
|
||||
|
||||
const slides = [
|
||||
{ title: translate('popupSettingsPaymentIndexSlide0Title'), text: translate('popupSettingsPaymentIndexSlide0Text') },
|
||||
{ title: translate('popupSettingsPaymentIndexSlide0Title'), text: translate('popupSettingsPaymentIndexSlide0Text') },
|
||||
{ title: translate('popupSettingsPaymentIndexSlide0Title'), text: translate('popupSettingsPaymentIndexSlide0Text') },
|
||||
];
|
||||
const tiers = [
|
||||
{ idx: 1 },
|
||||
{ idx: 2, price: 99, period: 1 },
|
||||
{ idx: 3, price: 399, period: 5 },
|
||||
];
|
||||
|
||||
const SlideItem = (slide) => (
|
||||
<div className={[ 'slide', `slide${slide.idx}` ].join(' ')}>
|
||||
<div className="textWrapper">
|
||||
<div className={[ 'illustration', `slide${slide.idx}` ].join(' ')} />
|
||||
<Title text={slide.title} />
|
||||
<Label text={slide.text} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const TierItem = (item: any) => {
|
||||
let price = '';
|
||||
let period = '';
|
||||
|
||||
if (!item.price) {
|
||||
price = translate('popupSettingsPaymentItemJustEmail');
|
||||
} else {
|
||||
price = `$${item.price}`;
|
||||
};
|
||||
|
||||
if (item.period) {
|
||||
if (item.period == 1) {
|
||||
period = translate('popupSettingsPaymentItemPerYear')
|
||||
} else {
|
||||
period = UtilCommon.sprintf(translate('popupSettingsPaymentItemPerYears'), item.period);
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={[ 'tier', `tier${item.idx}` ].join(' ')}>
|
||||
<div className="top">
|
||||
<div className={[ 'icon', `tier${item.idx}` ].join(' ')} />
|
||||
<Title text={translate(`popupSettingsPaymentItemTitle${item.idx}`)} />
|
||||
<Label text={translate(`popupSettingsPaymentItemDescription${item.idx}`)} />
|
||||
</div>
|
||||
<div className="bottom">
|
||||
<div className="priceWrapper">
|
||||
<span className="price">{price}</span>{period}
|
||||
</div>
|
||||
<Button text={translate('popupSettingsPaymentItemLearnMore')} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Title text={translate('popupSettingsPaymentTitle')} />
|
||||
<div ref={node => this.node = node}>
|
||||
<div className="membershipTitle">{translate('popupSettingsPaymentIndexTitle')}</div>
|
||||
<Label className="description" text={translate('popupSettingsPaymentIndexText')} />
|
||||
|
||||
<div className="items">
|
||||
<div className="item" onClick={() => onPage('paymentItem', { itemId: 1 })} />
|
||||
<div className="item" />
|
||||
<div className="item" />
|
||||
<div className="slider">
|
||||
<div style={style} className="feed">
|
||||
{slides.map((slide, idx) => (
|
||||
<SlideItem key={idx} idx={idx} {...slide} />
|
||||
))}
|
||||
</div>
|
||||
<div className="bullits">
|
||||
{slides.map((slide, idx) => {
|
||||
const cn = [ 'bullit', currentSlide == idx ? 'active' : '' ];
|
||||
|
||||
return <div className={cn.join(' ')} onClick={() => this.setState({ currentSlide: idx })} key={idx} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
|
||||
<div className="tiers">
|
||||
{tiers.map((tier, idx) => (
|
||||
<TierItem key={idx} {...tier} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="actionItems">
|
||||
<div className="item">
|
||||
<Label text={translate('popupSettingsPaymentIndexMembershipLevelsDetails')} />
|
||||
<Icon />
|
||||
</div>
|
||||
<div className="item">
|
||||
<Label text={translate('popupSettingsPaymentIndexPrivacyPolicy')} />
|
||||
<Icon />
|
||||
</div>
|
||||
<div className="item">
|
||||
<Label text={translate('popupSettingsPaymentIndexTermsAndConditions')} />
|
||||
<Icon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
this.slideWidth = $(this.node).width() + 16;
|
||||
|
||||
$(window).on('resize.membership', () => {
|
||||
console.log('WIDTH: ', $(this.node).width() + 16)
|
||||
this.slideWidth = $(this.node).width() + 16;
|
||||
});
|
||||
};
|
||||
|
||||
componentWillUnmount () {
|
||||
$(window).off('resize.membership');
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
export default PopupSettingsPagePaymentIndex;
|
||||
export default PopupSettingsPagePaymentIndex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue