feat: added onboarding
This commit is contained in:
Nevo David
parent
46931be66d
commit
95a3105038
|
|
@ -24,7 +24,6 @@ export class IntegrationsController {
|
|||
private _integrationService: IntegrationService
|
||||
) {}
|
||||
@Get('/')
|
||||
@CheckPolicies([AuthorizationActions.Create, Sections.CHANNEL])
|
||||
getIntegration() {
|
||||
return this._integrationManager.getAllIntegrations();
|
||||
}
|
||||
|
|
@ -56,6 +55,7 @@ export class IntegrationsController {
|
|||
}
|
||||
|
||||
@Get('/social/:integration')
|
||||
@CheckPolicies([AuthorizationActions.Create, Sections.CHANNEL])
|
||||
async getIntegrationUrl(@Param('integration') integration: string) {
|
||||
if (
|
||||
!this._integrationManager
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<svg width="266" height="300" viewBox="0 0 266 300" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_848_5808)">
|
||||
<path d="M170.775 222.111C171.368 222.428 172.045 222.555 172.713 222.474C173.38 222.394 174.008 222.111 174.509 221.662C175.01 221.214 175.361 220.622 175.515 219.967C175.669 219.312 175.617 218.626 175.368 218.001C175.435 217.669 175.483 217.43 175.55 217.098C176.833 215.9 178.445 215.112 180.179 214.837C181.912 214.561 183.689 214.809 185.281 215.549C186.873 216.29 188.207 217.489 189.113 218.992C190.019 220.496 190.455 222.236 190.366 223.989C189.959 233.877 190.448 244.547 183.876 252.518C213.871 228.007 227.548 186.252 218.388 148.696C213.893 142.433 211.796 134.113 213.812 126.573C216.341 129.033 221.272 128.372 220.519 124.114C220.114 122.43 219.696 120.752 219.292 119.069C236.568 112.328 241.079 138.016 220.614 148.475C222.274 155.615 223.183 162.909 223.327 170.238C225.637 163.629 229.483 157.664 234.549 152.832C239.453 148.416 245.939 145.819 251.972 142.856C259.313 139.242 267.461 146.408 264.571 154.058C259.683 153.433 256.225 159.274 260.66 162.413C252.871 175.495 237.935 183.81 222.76 183.942C221.226 198.868 216.527 213.297 208.978 226.265C218.672 211.524 237.432 215.768 252.258 215.14C253.242 215.016 254.241 215.181 255.132 215.615C256.024 216.049 256.77 216.733 257.279 217.583C257.789 218.434 258.04 219.414 258.002 220.405C257.963 221.396 257.638 222.354 257.064 223.163C255.114 223.048 253.157 223.128 251.222 223.4C250.312 223.535 249.466 223.948 248.8 224.583C248.134 225.217 247.681 226.042 247.502 226.944C247.323 227.847 247.428 228.782 247.801 229.623C248.175 230.463 248.8 231.168 249.59 231.639C236.584 243.562 216.431 246.125 200.614 238.517C195.938 244.408 190.662 249.796 184.871 254.596L161.356 243.387C161.397 243.085 161.449 242.779 161.498 242.482C163.609 243.656 165.857 244.568 168.19 245.196C165.681 235.633 162.886 230.031 170.774 222.111H170.775Z" fill="#172034"/>
|
||||
<path d="M129.224 199.488C128.794 200.006 128.215 200.379 127.567 200.556C126.918 200.734 126.23 200.708 125.597 200.481C124.963 200.255 124.415 199.839 124.025 199.291C123.636 198.742 123.425 198.087 123.42 197.415C123.233 197.132 123.098 196.929 122.911 196.647C121.271 196.021 119.481 195.9 117.771 196.299C116.061 196.697 114.51 197.597 113.315 198.883C112.12 200.169 111.336 201.783 111.064 203.517C110.793 205.252 111.045 207.028 111.789 208.618C115.895 217.622 119.467 227.688 128.561 232.591C91.5354 221.205 63.1188 187.693 57.4363 149.457C59.2365 141.961 58.0399 133.464 53.3291 127.242C51.9145 130.474 47.0987 131.722 46.1901 127.494C45.9296 125.782 45.6841 124.071 45.4235 122.359C26.8805 122.633 32.3928 148.125 55.2908 150.092C56.4465 157.33 58.3557 164.428 60.9874 171.27C56.355 166.021 50.5427 161.947 44.0286 159.383C37.8207 157.143 30.8351 157.184 24.13 156.716C15.9674 156.138 11.1246 165.848 16.6872 171.842C20.9774 169.42 26.3835 173.526 23.4603 178.106C35.6086 187.283 52.5773 189.35 66.681 183.748C73.7327 196.993 83.5266 208.583 95.4098 217.746C80.8717 207.751 65.098 218.758 51.1303 223.769C50.1725 224.025 49.31 224.554 48.6479 225.292C47.9859 226.03 47.5529 226.945 47.4018 227.925C47.2508 228.905 47.3882 229.908 47.7972 230.811C48.2063 231.714 48.8694 232.478 49.7056 233.011C51.4687 232.17 53.3111 231.505 55.2056 231.028C56.0993 230.809 57.0385 230.873 57.8947 231.209C58.7509 231.545 59.4821 232.138 59.9881 232.907C60.494 233.675 60.75 234.581 60.7209 235.5C60.6918 236.42 60.379 237.308 59.8255 238.042C76.3678 244.179 95.9988 238.951 107.778 225.938C114.33 229.63 121.249 232.63 128.422 234.891L145.972 215.64C145.821 215.376 145.657 215.113 145.5 214.856C143.987 216.74 142.25 218.431 140.326 219.893C139.042 210.09 139.518 203.848 129.224 199.488L129.224 199.488Z" fill="#172034"/>
|
||||
<path d="M133.74 118.143C134.409 118.075 135.042 117.803 135.551 117.364C136.061 116.925 136.423 116.34 136.589 115.688C136.755 115.037 136.717 114.35 136.48 113.72C136.242 113.091 135.817 112.55 135.262 112.17C135.132 111.857 135.038 111.632 134.909 111.319C135.306 109.609 136.205 108.057 137.491 106.861C138.776 105.665 140.389 104.881 142.124 104.608C143.858 104.335 145.634 104.586 147.224 105.33C148.815 106.073 150.147 107.274 151.051 108.779C156.226 117.214 162.581 125.799 161.569 136.081C172.804 99.0093 160.876 56.7209 132.333 30.6519C125.11 27.9586 118.73 22.2206 116.2 14.8376C119.671 15.4695 123.396 12.1718 120.396 9.05653C119.122 7.8847 117.839 6.72495 116.565 5.55306C127.148 -9.67573 145.215 9.13422 134.058 29.2267C139.417 34.2282 144.239 39.7763 148.444 45.7805C146.677 39.0064 146.544 31.9096 148.055 25.0739C149.664 18.6736 153.6 12.9022 156.957 7.07894C161.036 -0.0149358 171.795 1.39103 173.661 9.35327C169.255 11.559 169.641 18.3363 175.073 18.4695C175.901 33.6722 168.138 48.902 155.614 57.4723C162.663 70.7194 166.807 85.3166 167.77 100.291C167.599 82.6494 185.539 75.7128 197.497 66.9251C198.244 66.2737 199.165 65.8539 200.147 65.7169C201.129 65.5799 202.129 65.7317 203.027 66.1537C203.924 66.5757 204.679 67.2496 205.2 68.0934C205.72 68.9371 205.984 69.9142 205.959 70.9053C204.276 71.8978 202.696 73.0549 201.242 74.3597C200.561 74.979 200.089 75.7935 199.89 76.6916C199.691 77.5897 199.775 78.5274 200.129 79.3762C200.484 80.225 201.092 80.9433 201.871 81.4327C202.65 81.9221 203.562 82.1585 204.48 82.1097C200.331 99.2588 185.03 112.623 167.658 115.126C167.06 122.623 165.685 130.038 163.554 137.251L137.784 141.056C137.649 140.784 137.522 140.5 137.397 140.226C139.804 140.024 142.178 139.528 144.465 138.748C137.051 132.208 131.607 129.117 133.739 118.143L133.74 118.143Z" fill="#172034"/>
|
||||
<path d="M159.659 109.879C147.927 109.879 141.563 108.446 139.341 105.385C137.38 102.685 138.695 99.1225 140.217 94.9973C141.311 92.0322 142.551 88.6717 142.551 85.3456C142.551 69.1685 150.754 60.9658 166.931 60.9658C174.98 60.9658 183.622 65.2415 190.049 72.4034C195.891 78.9143 198.802 86.7068 198.034 93.7825C197.405 99.5855 194.704 103.402 189.534 105.793L189.232 105.933L189.146 105.611C188.699 103.945 187.944 102.379 186.918 100.992C186.819 103.169 186.27 105.301 185.307 107.255L185.252 107.366L185.133 107.4C179.282 109.067 172.338 109.518 166.941 109.725C164.315 109.827 161.888 109.879 159.659 109.879Z" fill="#2F2E41"/>
|
||||
<path d="M162.857 132.419C162.407 131.097 161.649 129.902 160.644 128.932C159.64 127.962 158.419 127.245 157.083 126.842C155.746 126.438 154.332 126.359 152.959 126.611C151.586 126.863 150.292 127.439 149.186 128.291L110.595 151.364L98.5195 121.899C99.5397 120.402 100.06 118.621 100.005 116.811C99.9501 115.001 99.3234 113.254 98.2147 111.822C97.106 110.39 95.5722 109.346 93.8334 108.839C92.0945 108.332 90.2399 108.39 88.5355 109.002C86.8311 109.615 85.3645 110.752 84.3461 112.249C83.3277 113.747 82.8097 115.529 82.8665 117.339C82.9233 119.149 83.552 120.895 84.6623 122.326C85.7726 123.757 87.3076 124.799 89.047 125.304C89.7913 133.801 93.9277 171.777 108.317 170.397C120.412 169.237 150.45 149.232 159.779 142.296C161.272 141.188 162.374 139.634 162.927 137.859C163.48 136.084 163.456 134.179 162.857 132.419Z" fill="#FFB6B6"/>
|
||||
<path d="M191.938 300H158.35L152.718 272.151L150.89 300H119.69C119.702 278.13 120.841 256.275 123.103 234.522L123.49 233.205L124.101 231.098L124.487 229.775L130.944 207.603L131.454 205.844H170.333C172.57 207.945 174.634 210.224 176.503 212.659C177.137 213.466 177.798 214.34 178.476 215.282C178.947 215.948 179.434 216.649 179.922 217.383C184.254 223.833 187.492 230.953 189.506 238.456V238.462C189.848 239.745 190.15 241.059 190.414 242.402V242.408C190.649 243.601 190.857 244.812 191.019 246.051C191.142 246.953 191.249 247.866 191.327 248.791C191.795 253.914 191.631 259.076 190.84 264.159L191.938 300Z" fill="#2F2E41"/>
|
||||
<path d="M13.854 45.3524C16.0353 44.508 17.3275 42.5934 16.7401 41.076C16.1527 39.5586 13.9082 39.013 11.7269 39.8574C9.54562 40.7017 8.25352 42.6163 8.84091 44.1338C9.4283 45.6512 11.6728 46.1968 13.854 45.3524Z" fill="#E6E6E6"/>
|
||||
<path d="M41.3184 41.8293C43.4997 40.985 44.7918 39.0704 44.2044 37.5529C43.617 36.0355 41.3726 35.4899 39.1913 36.3343C37.01 37.1787 35.7179 39.0933 36.3053 40.6107C36.8927 42.1281 39.1371 42.6737 41.3184 41.8293Z" fill="#3F3D56"/>
|
||||
<path d="M11.4722 68.7841C13.6535 67.9397 14.9456 66.0251 14.3582 64.5076C13.7709 62.9902 11.5264 62.4446 9.34509 63.289C7.1638 64.1334 5.87168 66.048 6.45908 67.5654C7.04647 69.0828 9.29094 69.6284 11.4722 68.7841Z" fill="#FF6584"/>
|
||||
<path d="M3.52687 79.1198C4.52758 78.883 5.06281 77.5248 4.72232 76.0863C4.38184 74.6478 3.29457 73.6736 2.29387 73.9105C1.29316 74.1473 0.757952 75.5055 1.09844 76.944C1.43892 78.3825 2.52617 79.3567 3.52687 79.1198Z" fill="#E6E6E6"/>
|
||||
<path d="M3.3633 96.6186C4.364 96.3817 4.89921 95.0236 4.55873 93.5851C4.21825 92.1465 3.131 91.1724 2.13029 91.4093C1.12959 91.6461 0.594377 93.0043 0.934862 94.4428C1.27535 95.8813 2.36259 96.8555 3.3633 96.6186Z" fill="#3F3D56"/>
|
||||
<path d="M27.4683 60.3744C28.469 60.1376 29.0042 58.7794 28.6637 57.3409C28.3232 55.9024 27.236 54.9283 26.2353 55.1651C25.2346 55.402 24.6994 56.7601 25.0398 58.1986C25.3803 59.6372 26.4676 60.6113 27.4683 60.3744Z" fill="#E6E6E6"/>
|
||||
<path d="M13.0034 56.862C14.0041 56.6251 14.5394 55.267 14.1989 53.8285C13.8584 52.39 12.7711 51.4158 11.7704 51.6527C10.7697 51.8895 10.2345 53.2477 10.575 54.6862C10.9155 56.1247 12.0027 57.0989 13.0034 56.862Z" fill="#FF6584"/>
|
||||
<path d="M28.335 40.7483C29.3357 40.5115 29.8709 39.1533 29.5304 37.7148C29.1899 36.2763 28.1027 35.3022 27.102 35.539C26.1013 35.7759 25.5661 37.134 25.9065 38.5726C26.247 40.0111 27.3343 40.9852 28.335 40.7483Z" fill="#3F3D56"/>
|
||||
<path d="M35.4652 161.861C36.5199 160.622 35.931 158.389 34.1498 156.873C32.3687 155.357 30.0698 155.132 29.0151 156.371C27.9605 157.61 28.5494 159.844 30.3305 161.36C32.1116 162.876 34.4105 163.1 35.4652 161.861Z" fill="#E6E6E6"/>
|
||||
<path d="M19.2904 139.388C20.3451 138.149 19.7562 135.915 17.975 134.399C16.1939 132.883 13.895 132.658 12.8403 133.897C11.7857 135.136 12.3746 137.37 14.1557 138.886C15.9368 140.402 18.2357 140.627 19.2904 139.388Z" fill="#3F3D56"/>
|
||||
<path d="M57.2045 152.799C58.2591 151.56 57.6702 149.327 55.8891 147.81C54.108 146.294 51.8091 146.07 50.7544 147.309C49.6997 148.548 50.2886 150.781 52.0698 152.297C53.8509 153.814 56.1498 154.038 57.2045 152.799Z" fill="#FF6584"/>
|
||||
<path d="M68.004 153.047C69.1069 152.063 69.4458 150.643 68.761 149.876C68.0763 149.109 66.6271 149.285 65.5243 150.269C64.4214 151.253 64.0825 152.673 64.7672 153.44C65.452 154.208 66.9012 154.032 68.004 153.047Z" fill="#E6E6E6"/>
|
||||
<path d="M83.4698 144.859C84.5727 143.874 84.9116 142.454 84.2269 141.687C83.5421 140.92 82.0929 141.096 80.9901 142.08C79.8872 143.065 79.5483 144.485 80.233 145.252C80.9178 146.019 82.367 145.843 83.4698 144.859Z" fill="#3F3D56"/>
|
||||
<path d="M40.1207 140.92C41.2236 139.935 41.5625 138.515 40.8777 137.748C40.193 136.981 38.7438 137.157 37.641 138.141C36.5381 139.126 36.1992 140.546 36.8839 141.313C37.5687 142.08 39.0179 141.904 40.1207 140.92Z" fill="#E6E6E6"/>
|
||||
<path d="M43.9191 155.312C45.0219 154.328 45.3608 152.908 44.6761 152.14C43.9913 151.373 42.5422 151.549 41.4393 152.534C40.3364 153.518 39.9975 154.938 40.6823 155.705C41.367 156.472 42.8162 156.296 43.9191 155.312Z" fill="#FF6584"/>
|
||||
<path d="M22.4493 149.502C23.5522 148.518 23.8911 147.098 23.2063 146.331C22.5216 145.564 21.0724 145.74 19.9696 146.724C18.8667 147.708 18.5278 149.128 19.2125 149.895C19.8973 150.663 21.3465 150.487 22.4493 149.502Z" fill="#3F3D56"/>
|
||||
<path d="M144.13 17.7233C145.59 17.0052 145.937 14.7215 144.905 12.6226C143.872 10.5237 141.852 9.40432 140.392 10.1224C138.932 10.8405 138.585 13.1241 139.617 15.223C140.649 17.322 142.67 18.4414 144.13 17.7233Z" fill="#E6E6E6"/>
|
||||
<path d="M150.046 44.7732C151.506 44.0551 151.853 41.7715 150.821 39.6725C149.788 37.5736 147.768 36.4542 146.308 37.1723C144.848 37.8904 144.501 40.174 145.533 42.273C146.565 44.3719 148.586 45.4913 150.046 44.7732Z" fill="#3F3D56"/>
|
||||
<path d="M120.58 17.4036C122.04 16.6855 122.387 14.4018 121.354 12.3029C120.322 10.204 118.302 9.0846 116.842 9.80269C115.381 10.5208 115.035 12.8044 116.067 14.9033C117.099 17.0023 119.12 18.1216 120.58 17.4036Z" fill="#FF6584"/>
|
||||
<path d="M108.201 8.81939C109.605 8.35418 110.48 7.18577 110.156 6.20966C109.832 5.23356 108.433 4.81939 107.029 5.2846C105.626 5.74982 104.751 6.91825 105.075 7.89435C105.398 8.87045 106.798 9.28461 108.201 8.81939Z" fill="#E6E6E6"/>
|
||||
<path d="M90.7555 10.1898C92.1587 9.72454 93.0338 8.55612 92.7102 7.58002C92.3865 6.60391 90.9867 6.18976 89.5836 6.65498C88.1804 7.12019 87.3053 8.2886 87.6289 9.2647C87.9526 10.2408 89.3524 10.655 90.7555 10.1898Z" fill="#3F3D56"/>
|
||||
<path d="M128.972 31.0261C130.376 30.5608 131.251 29.3924 130.927 28.4163C130.603 27.4402 129.204 27.0261 127.8 27.4913C126.397 27.9565 125.522 29.1249 125.846 30.101C126.169 31.0771 127.569 31.4913 128.972 31.0261Z" fill="#E6E6E6"/>
|
||||
<path d="M131.204 16.3091C132.607 15.8439 133.482 14.6755 133.158 13.6994C132.835 12.7233 131.435 12.3091 130.032 12.7744C128.629 13.2396 127.754 14.408 128.077 15.3841C128.401 16.3602 129.801 16.7743 131.204 16.3091Z" fill="#FF6584"/>
|
||||
<path d="M148.599 30.17C150.002 29.7048 150.877 28.5363 150.553 27.5602C150.23 26.5841 148.83 26.17 147.427 26.6352C146.024 27.1004 145.149 28.2688 145.472 29.2449C145.796 30.221 147.196 30.6352 148.599 30.17Z" fill="#3F3D56"/>
|
||||
<path d="M153.985 114.383L172.489 113.43L181.083 127.01C181.083 127.01 197.254 129.714 196.133 148.769C195.012 167.825 176.458 184.546 176.458 184.546L177.251 194.469L175.874 198.405L176.05 200.615L177.93 202.956L178.123 205.377L176.458 209.206L178.722 212.873L131.121 208.261L129.38 201.92L131.919 198.515L130.501 194.074L132.633 189.802L133.745 176.233C133.745 176.233 121.581 157.958 135.545 144.193L141.149 134.666L147.42 127.015L153.985 114.383Z" fill="#8155DD"/>
|
||||
<path d="M163.184 110.548C174.012 110.548 182.791 101.77 182.791 90.9413C182.791 80.1126 174.012 71.3342 163.184 71.3342C152.355 71.3342 143.577 80.1126 143.577 90.9413C143.577 101.77 152.355 110.548 163.184 110.548Z" fill="#FFB6B6"/>
|
||||
<path d="M160.559 89.753C158.869 89.753 157.18 89.7054 155.493 89.6102L155.191 89.5932L155.231 89.2938C155.479 87.4223 155.339 85.5196 154.82 83.7046C153.937 85.7713 152.624 87.626 150.968 89.145L150.874 89.2306L150.748 89.2169C146.164 88.7155 141.622 87.8872 137.157 86.7381L136.986 86.6944L136.952 86.5214C136.618 84.8836 136.445 83.2171 136.436 81.5457C136.436 76.3246 138.329 71.9301 141.766 69.1719C145.508 66.1696 150.871 65.2463 156.873 66.5705H176.066C178.176 66.5729 180.199 67.4121 181.691 68.9041C183.183 70.3962 184.022 72.4191 184.024 74.5291V86.6831L183.815 86.7379C176.224 88.7329 168.408 89.7463 160.559 89.753Z" fill="#2F2E41"/>
|
||||
<path d="M26.7709 67.9435C25.9117 68.2577 25.2122 68.8999 24.826 69.7292C24.4397 70.5585 24.3981 71.5072 24.7105 72.3671L45.4155 129.18C45.7297 130.039 46.3719 130.738 47.2012 131.125C48.0305 131.511 48.9791 131.553 49.839 131.24L130.199 101.954C131.058 101.639 131.757 100.997 132.144 100.168C132.53 99.3386 132.572 98.39 132.259 97.5301L111.554 40.7174C111.24 39.8582 110.598 39.1587 109.768 38.7724C108.939 38.3861 107.991 38.3445 107.131 38.6568L26.7709 67.9435Z" fill="#CCCCCC"/>
|
||||
<path d="M100.29 109.721L51.102 127.648C50.1765 127.984 49.1555 127.939 48.2629 127.523C47.3704 127.108 46.6792 126.355 46.341 125.43L27.5617 73.9015C27.2256 72.976 27.2703 71.955 27.686 71.0624C28.1018 70.1698 28.8546 69.4786 29.7793 69.1404L105.598 41.5087C106.524 41.1726 107.545 41.2173 108.437 41.6331C109.33 42.0489 110.021 42.8017 110.359 43.7265L119.433 68.6246C122.334 76.6133 121.948 85.4267 118.36 93.1312C114.771 100.836 108.273 106.802 100.29 109.721Z" fill="white"/>
|
||||
<path d="M64.8965 72.4962L53.2076 76.7561C53.0611 76.8095 52.9054 76.8336 52.7495 76.8268C52.5936 76.8201 52.4406 76.7827 52.2992 76.7168C52.1578 76.651 52.0307 76.5579 51.9253 76.4429C51.8198 76.3279 51.738 76.1933 51.6846 76.0467C51.6312 75.9001 51.6072 75.7444 51.6139 75.5886C51.6206 75.4327 51.658 75.2797 51.7239 75.1382C51.7898 74.9968 51.8829 74.8698 51.9978 74.7643C52.1128 74.6589 52.2475 74.5771 52.394 74.5237L64.0829 70.2637C64.3789 70.1558 64.7057 70.17 64.9913 70.303C65.277 70.436 65.498 70.6771 65.6059 70.9731C65.7138 71.2692 65.6997 71.596 65.5666 71.8816C65.4336 72.1672 65.1925 72.3883 64.8965 72.4962Z" fill="#8155DD"/>
|
||||
<path d="M92.763 67.5123L54.8716 81.3216C54.725 81.3752 54.5692 81.3995 54.4132 81.3929C54.2572 81.3863 54.104 81.349 53.9625 81.2831C53.8209 81.2173 53.6937 81.1242 53.5881 81.0091C53.4825 80.8941 53.4007 80.7594 53.3472 80.6127C53.2937 80.466 53.2697 80.3102 53.2765 80.1542C53.2833 79.9982 53.3208 79.8451 53.3868 79.7036C53.4528 79.5621 53.5461 79.435 53.6612 79.3295C53.7764 79.2241 53.9112 79.1424 54.058 79.0891L91.9494 65.2798C92.096 65.2264 92.2517 65.2024 92.4075 65.2091C92.5634 65.2159 92.7164 65.2532 92.8579 65.3191C92.9993 65.385 93.1264 65.4781 93.2318 65.5931C93.3373 65.708 93.419 65.8427 93.4725 65.9893C93.5259 66.1358 93.5499 66.2915 93.5432 66.4474C93.5364 66.6033 93.4991 66.7563 93.4332 66.8977C93.3673 67.0391 93.2742 67.1662 93.1592 67.2717C93.0442 67.3771 92.9096 67.4589 92.763 67.5123Z" fill="#8155DD"/>
|
||||
<path d="M94.6728 72.7528L56.7814 86.5621C56.6348 86.6155 56.4791 86.6395 56.3233 86.6328C56.1674 86.626 56.0144 86.5887 55.8729 86.5228C55.7315 86.4569 55.6044 86.3638 55.499 86.2488C55.3935 86.1339 55.3118 85.9992 55.2583 85.8526C55.2049 85.7061 55.1809 85.5504 55.1876 85.3945C55.1944 85.2386 55.2318 85.0856 55.2976 84.9442C55.3635 84.8028 55.4566 84.6757 55.5716 84.5702C55.6866 84.4648 55.8212 84.383 55.9678 84.3296L93.8592 70.5203C94.1551 70.4129 94.4816 70.4273 94.7669 70.5604C95.0522 70.6935 95.273 70.9344 95.3809 71.2302C95.4887 71.526 95.4747 71.8525 95.3419 72.138C95.2091 72.4235 94.9685 72.6446 94.6728 72.7528Z" fill="#8155DD"/>
|
||||
<path d="M96.5829 77.9935L58.6915 91.8028C58.5448 91.8565 58.389 91.8807 58.233 91.8741C58.077 91.8675 57.9239 91.8302 57.7823 91.7643C57.6407 91.6985 57.5135 91.6054 57.4079 91.4904C57.3023 91.3753 57.2205 91.2406 57.167 91.0939C57.1136 90.9472 57.0895 90.7914 57.0963 90.6354C57.1031 90.4794 57.1406 90.3263 57.2066 90.1848C57.2726 90.0433 57.3659 89.9162 57.4811 89.8108C57.5962 89.7053 57.7311 89.6236 57.8778 89.5703L95.7692 75.761C95.9158 75.7076 96.0715 75.6836 96.2274 75.6903C96.3832 75.6971 96.5363 75.7344 96.6777 75.8003C96.8191 75.8662 96.9462 75.9593 97.0516 76.0743C97.1571 76.1892 97.2389 76.3239 97.2923 76.4705C97.3457 76.6171 97.3697 76.7727 97.363 76.9286C97.3563 77.0845 97.3189 77.2375 97.253 77.3789C97.1871 77.5203 97.094 77.6474 96.979 77.7529C96.8641 77.8583 96.7294 77.9401 96.5829 77.9935Z" fill="#8155DD"/>
|
||||
<path d="M98.4926 83.234L60.6012 97.0433C60.3052 97.1512 59.9784 97.137 59.6928 97.004C59.4071 96.871 59.1861 96.6299 59.0782 96.3339C58.9703 96.0378 58.9844 95.711 59.1175 95.4254C59.2505 95.1398 59.4915 94.9187 59.7876 94.8108L97.679 81.0015C97.8256 80.9481 97.9813 80.9241 98.1372 80.9308C98.293 80.9375 98.446 80.9749 98.5875 81.0408C98.7289 81.1067 98.856 81.1998 98.9614 81.3147C99.0669 81.4297 99.1486 81.5644 99.2021 81.7109C99.2555 81.8575 99.2795 82.0132 99.2728 82.1691C99.266 82.3249 99.2286 82.478 99.1628 82.6194C99.0969 82.7608 99.0038 82.8879 98.8888 82.9933C98.7738 83.0988 98.6392 83.1806 98.4926 83.234Z" fill="#8155DD"/>
|
||||
<path d="M218.722 97.788L197.976 147.433C197.091 149.534 195.415 151.202 193.311 152.078C191.206 152.955 188.842 152.968 186.727 152.116C185.634 151.676 184.641 151.017 183.81 150.18C182.979 149.343 182.327 148.346 181.894 147.249C181.462 146.152 181.257 144.978 181.292 143.8C181.327 142.621 181.603 141.462 182.101 140.393L205.232 89.4842L217.983 57.9579C216.881 56.8589 216.144 55.4474 215.872 53.9151C215.601 52.3828 215.807 50.804 216.464 49.3932C217.121 47.9824 218.196 46.808 219.544 46.0295C220.891 45.2511 222.446 44.9063 223.996 45.0421C225.546 45.1779 227.017 45.7876 228.209 46.7884C229.4 47.7893 230.255 49.1327 230.657 50.6362C231.058 52.1397 230.987 53.7304 230.453 55.1921C229.919 56.6539 228.948 57.9158 227.672 58.8065L218.722 97.788Z" fill="#FFB6B6"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_848_5808">
|
||||
<rect width="264.335" height="300" fill="white" transform="translate(0.83252)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -44,8 +44,9 @@ export const ApiModal: FC<{
|
|||
identifier: string;
|
||||
name: string;
|
||||
update?: () => void;
|
||||
close?: () => void;
|
||||
}> = (props) => {
|
||||
const { update, name } = props;
|
||||
const { update, name, close: closePopup } = props;
|
||||
const fetch = useFetch();
|
||||
const router = useRouter();
|
||||
const modal = useModals();
|
||||
|
|
@ -55,6 +56,9 @@ export const ApiModal: FC<{
|
|||
});
|
||||
|
||||
const close = useCallback(() => {
|
||||
if (closePopup) {
|
||||
return closePopup();
|
||||
}
|
||||
modal.closeAll();
|
||||
}, []);
|
||||
|
||||
|
|
@ -68,7 +72,11 @@ export const ApiModal: FC<{
|
|||
);
|
||||
|
||||
if (add.ok) {
|
||||
modal.closeAll();
|
||||
if (closePopup) {
|
||||
closePopup();
|
||||
} else {
|
||||
modal.closeAll();
|
||||
}
|
||||
router.refresh();
|
||||
if (update) update();
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { AddProviderButton } from '@gitroom/frontend/components/launches/add.provider.component';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { orderBy } from 'lodash';
|
||||
import { Calendar } from '@gitroom/frontend/components/launches/calendar';
|
||||
|
|
@ -56,6 +56,12 @@ export const LaunchesComponent = () => {
|
|||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined' && window.opener) {
|
||||
window.close();
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (isLoading || reload) {
|
||||
return <LoadingComponent />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import isoWeek from 'dayjs/plugin/isoWeek';
|
|||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import { ShowLinkedinCompany } from '@gitroom/frontend/components/launches/helpers/linkedin.component';
|
||||
import { SettingsComponent } from '@gitroom/frontend/components/layout/settings.component';
|
||||
import { Onboarding } from '@gitroom/frontend/components/onboarding/onboarding';
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(weekOfYear);
|
||||
|
|
@ -50,6 +51,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
|
|||
<ShowLinkedinCompany />
|
||||
<Toaster />
|
||||
<ShowPostSelector />
|
||||
<Onboarding />
|
||||
<div className="min-h-[100vh] w-full max-w-[1440px] mx-auto bg-primary px-[12px] text-white flex flex-col">
|
||||
<div className="px-[23px] flex h-[80px] items-center justify-between z-[200] sticky top-0 bg-primary">
|
||||
<Link href="/" className="text-2xl flex items-center gap-[10px]">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useModals } from '@mantine/modals';
|
||||
import React, { FC, useCallback, useEffect, useMemo } from 'react';
|
||||
import React, { FC, Ref, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Input } from '@gitroom/react/form/input';
|
||||
import { Button } from '@gitroom/react/form/button';
|
||||
import { Textarea } from '@gitroom/react/form/textarea';
|
||||
|
|
@ -10,8 +10,10 @@ import { classValidatorResolver } from '@hookform/resolvers/class-validator';
|
|||
import { UserDetailDto } from '@gitroom/nestjs-libraries/dtos/users/user.details.dto';
|
||||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { useSWRConfig } from 'swr';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const SettingsPopup: FC = () => {
|
||||
export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
|
||||
const { getRef } = props;
|
||||
const fetch = useFetch();
|
||||
const toast = useToaster();
|
||||
const swr = useSWRConfig();
|
||||
|
|
@ -48,6 +50,11 @@ const SettingsPopup: FC = () => {
|
|||
method: 'POST',
|
||||
body: JSON.stringify(val),
|
||||
});
|
||||
|
||||
if (getRef) {
|
||||
return ;
|
||||
}
|
||||
|
||||
toast.show('Profile updated');
|
||||
swr.mutate('/marketplace/account');
|
||||
close();
|
||||
|
|
@ -60,28 +67,38 @@ const SettingsPopup: FC = () => {
|
|||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(submit)}>
|
||||
<div className="w-full max-w-[920px] mx-auto bg-[#0B101B] p-[32px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
|
||||
<button
|
||||
onClick={close}
|
||||
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
{!!getRef && <button type="submit" className="hidden" ref={getRef}></button>}
|
||||
<div
|
||||
className={clsx(
|
||||
'w-full max-w-[920px] mx-auto bg-[#0B101B] gap-[24px] flex flex-col relative',
|
||||
!getRef && 'p-[32px] rounded-[4px] border border-[#172034]'
|
||||
)}
|
||||
>
|
||||
{!getRef && (
|
||||
<button
|
||||
onClick={close}
|
||||
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="text-[24px] font-[600]">Profile Settings</div>
|
||||
<svg
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{!getRef && (
|
||||
<div className="text-[24px] font-[600]">Profile Settings</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-[4px]">
|
||||
<div className="text-[20px] font-[500]">Profile</div>
|
||||
<div className="text-[14px] text-[#AAA] font-[400]">
|
||||
|
|
@ -106,7 +123,10 @@ const SettingsPopup: FC = () => {
|
|||
<div className="flex flex-col gap-[2px]">
|
||||
<div className="text-[14px]">Profile Picture</div>
|
||||
<div className="flex gap-[8px]">
|
||||
<button className="h-[24px] w-[120px] bg-[#612AD5] rounded-[4px] flex justify-center gap-[4px] items-center cursor-pointer" type="button">
|
||||
<button
|
||||
className="h-[24px] w-[120px] bg-[#612AD5] rounded-[4px] flex justify-center gap-[4px] items-center cursor-pointer"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -125,7 +145,10 @@ const SettingsPopup: FC = () => {
|
|||
Upload image
|
||||
</div>
|
||||
</button>
|
||||
<button className="h-[24px] w-[88px] rounded-[4px] border-2 border-[#506490] flex justify-center items-center gap-[4px]" type="button">
|
||||
<button
|
||||
className="h-[24px] w-[88px] rounded-[4px] border-2 border-[#506490] flex justify-center items-center gap-[4px]"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -152,9 +175,11 @@ const SettingsPopup: FC = () => {
|
|||
<Textarea label="Bio" name="bio" className="resize-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="justify-end flex">
|
||||
<Button type="submit">Save</Button>
|
||||
</div>
|
||||
{!getRef && (
|
||||
<div className="justify-end flex">
|
||||
<Button type="submit">Save</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
import React, { FC, useCallback, useMemo, useState } from 'react';
|
||||
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
||||
import useSWR from 'swr';
|
||||
import { orderBy } from 'lodash';
|
||||
import { useUser } from '@gitroom/frontend/components/layout/user.context';
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
import { Menu } from '@gitroom/frontend/components/launches/menu/menu';
|
||||
import { ApiModal } from '@gitroom/frontend/components/launches/add.provider.component';
|
||||
|
||||
export const ConnectChannels: FC = () => {
|
||||
const fetch = useFetch();
|
||||
const [identifier, setIdentifier] = useState<any>(undefined);
|
||||
|
||||
const getIntegrations = useCallback(async () => {
|
||||
return (await fetch('/integrations')).json();
|
||||
}, []);
|
||||
|
||||
const [reload, setReload] = useState(false);
|
||||
|
||||
const getSocialLink = useCallback(
|
||||
(identifier: string) => async () => {
|
||||
const { url } = await (
|
||||
await fetch('/integrations/social/' + identifier)
|
||||
).json();
|
||||
|
||||
window.open(url, 'Social Connect', 'width=700,height=700');
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const load = useCallback(async (path: string) => {
|
||||
return (await (await fetch(path)).json()).integrations;
|
||||
}, []);
|
||||
|
||||
const { data: integrations, mutate } = useSWR('/integrations/list', load, {
|
||||
fallbackData: [],
|
||||
});
|
||||
|
||||
const user = useUser();
|
||||
|
||||
const totalNonDisabledChannels = useMemo(() => {
|
||||
return (
|
||||
integrations?.filter((integration: any) => !integration.disabled)
|
||||
?.length || 0
|
||||
);
|
||||
}, [integrations]);
|
||||
|
||||
const sortedIntegrations = useMemo(() => {
|
||||
return orderBy(
|
||||
integrations,
|
||||
['type', 'disabled', 'identifier'],
|
||||
['desc', 'asc', 'asc']
|
||||
);
|
||||
}, [integrations]);
|
||||
|
||||
const update = useCallback(async (shouldReload: boolean) => {
|
||||
if (shouldReload) {
|
||||
setReload(true);
|
||||
}
|
||||
await mutate();
|
||||
|
||||
if (shouldReload) {
|
||||
setReload(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const finishUpdate = useCallback(() => {
|
||||
setIdentifier(undefined);
|
||||
update(true);
|
||||
}, []);
|
||||
|
||||
const { data } = useSWR('get-all-integrations', getIntegrations);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!!identifier && (
|
||||
<div className="absolute w-full h-full bg-black/80 left-0 top-0 z-[200] p-[30px] flex items-center justify-center">
|
||||
<div className="w-[400px]">
|
||||
<ApiModal
|
||||
close={() => setIdentifier(undefined)}
|
||||
update={finishUpdate}
|
||||
identifier={identifier.identifier}
|
||||
name={identifier.name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex gap-[4px] flex-col">
|
||||
<div className="text-[20px]">Connect Channels</div>
|
||||
<div className="text-[14px] text-[#AAA]">
|
||||
Connect your social media and publishing websites channels to
|
||||
schedule posts later
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex border border-[#182034] rounded-[4px] mt-[16px]">
|
||||
<div className="flex-1 flex flex-col p-[16px] gap-[10px]">
|
||||
<div className="text-[18px]">Social</div>
|
||||
<div className="grid grid-cols-3 gap-[16px]">
|
||||
{data?.social.map((social: any) => (
|
||||
<div
|
||||
key={social.identifier}
|
||||
onClick={getSocialLink(social.identifier)}
|
||||
className="h-[96px] bg-input flex flex-col justify-center items-center gap-[10px] cursor-pointer"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src={`/icons/platforms/${social.identifier}.png`}
|
||||
className="rounded-full w-[32px] h-[32px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
|
||||
{social.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col p-[16px] gap-[10px]">
|
||||
<div className="text-[18px]">Publishing Platforms</div>
|
||||
<div className="grid grid-cols-3 gap-[16px]">
|
||||
{data?.article.map((article: any) => (
|
||||
<div
|
||||
onClick={() => setIdentifier(article)}
|
||||
key={article.identifier}
|
||||
className="h-[96px] bg-input flex flex-col justify-center items-center gap-[10px] cursor-pointer"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src={`/icons/platforms/${article.identifier}.png`}
|
||||
className="rounded-full w-[32px] h-[32px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
|
||||
{article.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-[24px] border border-[#182034] rounded-[4px] p-[16px]">
|
||||
<div className="gap-[16px] flex flex-col">
|
||||
{sortedIntegrations.length === 0 && (
|
||||
<div className="text-[12px]">No channels</div>
|
||||
)}
|
||||
{sortedIntegrations.map((integration) => (
|
||||
<div key={integration.id} className="flex gap-[8px] items-center">
|
||||
<div
|
||||
className={clsx(
|
||||
'relative w-[34px] h-[34px] rounded-full flex justify-center items-center bg-fifth',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={integration.picture}
|
||||
className="rounded-full"
|
||||
alt={integration.identifier}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<Image
|
||||
src={`/icons/platforms/${integration.identifier}.png`}
|
||||
className="rounded-full absolute z-10 -bottom-[5px] -right-[5px] border border-fifth"
|
||||
alt={integration.identifier}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
{...(integration.disabled &&
|
||||
totalNonDisabledChannels === user?.totalChannels
|
||||
? {
|
||||
'data-tooltip-id': 'tooltip',
|
||||
'data-tooltip-content':
|
||||
'This channel is disabled, please upgrade your plan to enable it.',
|
||||
}
|
||||
: {})}
|
||||
className={clsx(
|
||||
'flex-1',
|
||||
integration.disabled && 'opacity-50'
|
||||
)}
|
||||
>
|
||||
{integration.name}
|
||||
</div>
|
||||
<Menu
|
||||
onChange={update}
|
||||
id={integration.id}
|
||||
canEnable={
|
||||
user?.totalChannels! > totalNonDisabledChannels &&
|
||||
integration.disabled
|
||||
}
|
||||
canDisable={!integration.disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { FC, useCallback } from 'react';
|
||||
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
||||
import useSWR from 'swr';
|
||||
import { GithubComponent } from '@gitroom/frontend/components/settings/github.component';
|
||||
|
||||
export const GithubOnboarding: FC = () => {
|
||||
const fetch = useFetch();
|
||||
|
||||
const load = useCallback(async (path: string) => {
|
||||
const { github } = await (await fetch('/settings/github')).json();
|
||||
if (!github) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const emptyOnes = github.find((p: { login: string }) => !p.login);
|
||||
const { organizations } = emptyOnes
|
||||
? await (await fetch(`/settings/organizations/${emptyOnes.id}`)).json()
|
||||
: { organizations: [] };
|
||||
|
||||
return { github, organizations };
|
||||
}, []);
|
||||
|
||||
const { isLoading: isLoadingSettings, data: loadAll, mutate } = useSWR(
|
||||
'load-all',
|
||||
load
|
||||
);
|
||||
|
||||
if (!loadAll) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<GithubComponent
|
||||
mutate={mutate}
|
||||
github={loadAll.github}
|
||||
organizations={loadAll.organizations}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
'use client';
|
||||
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useModals } from '@mantine/modals';
|
||||
import clsx from 'clsx';
|
||||
import { GithubOnboarding } from '@gitroom/frontend/components/onboarding/github.onboarding';
|
||||
import { SettingsPopup } from '@gitroom/frontend/components/layout/settings.component';
|
||||
import { Button } from '@gitroom/react/form/button';
|
||||
import { ConnectChannels } from '@gitroom/frontend/components/onboarding/connect.channels';
|
||||
|
||||
const Step: FC<{ step: number; title: string; currentStep: number }> = (
|
||||
props
|
||||
) => {
|
||||
const { step, title, currentStep } = props;
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="mb-[8px]">
|
||||
<div className="w-[24px] h-[24px]">
|
||||
{step === currentStep && currentStep !== 4 && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M9.02439 3.47341C8.99956 3.378 8.99379 3.27862 9.00741 3.18097C9.02102 3.08333 9.05376 2.98932 9.10374 2.90433C9.15372 2.81935 9.21996 2.74505 9.29869 2.6857C9.37741 2.62634 9.46706 2.58309 9.56252 2.55841C11.1614 2.14606 12.8387 2.14606 14.4375 2.55841C14.6146 2.60375 14.769 2.71221 14.8718 2.8634C14.9746 3.01459 15.0185 3.19811 14.9955 3.37945C14.9725 3.5608 14.884 3.72749 14.7467 3.84821C14.6095 3.96892 14.4328 4.03533 14.25 4.03497C14.1867 4.03464 14.1238 4.02646 14.0625 4.0106C12.7097 3.66167 11.2904 3.66167 9.93752 4.0106C9.7452 4.06021 9.54107 4.03151 9.36988 3.93081C9.1987 3.8301 9.07445 3.66561 9.02439 3.47341ZM5.04283 5.16935C3.88656 6.34678 3.0479 7.79831 2.60533 9.3881C2.55224 9.5798 2.57749 9.78474 2.6755 9.95783C2.77352 10.1309 2.93628 10.258 3.12799 10.3111C3.31969 10.3642 3.52463 10.3389 3.69772 10.2409C3.87081 10.1429 3.99787 9.98011 4.05095 9.78841C4.42508 8.4427 5.13475 7.214 6.11345 6.21747C6.24147 6.07348 6.30915 5.88574 6.30248 5.69318C6.2958 5.50062 6.21528 5.31802 6.0776 5.18323C5.93992 5.04845 5.75565 4.97182 5.56299 4.96923C5.37034 4.96665 5.18408 5.03831 5.04283 5.16935ZM4.05095 14.2078C4.02461 14.1129 3.97982 14.0241 3.91916 13.9464C3.85849 13.8688 3.78313 13.8039 3.69738 13.7554C3.61163 13.707 3.51718 13.6758 3.4194 13.6638C3.32162 13.6519 3.22244 13.6593 3.12752 13.6856C3.0326 13.7119 2.94379 13.7567 2.86618 13.8174C2.78857 13.8781 2.72366 13.9534 2.67517 14.0392C2.62668 14.1249 2.59556 14.2194 2.58357 14.3172C2.57159 14.4149 2.57898 14.5141 2.60533 14.609C3.04816 16.1987 3.88679 17.6502 5.04283 18.8278C5.18232 18.9696 5.37244 19.0503 5.57138 19.0519C5.77031 19.0536 5.96176 18.9762 6.10361 18.8367C6.24546 18.6972 6.32609 18.5071 6.32776 18.3081C6.32943 18.1092 6.252 17.9178 6.11252 17.7759C5.13502 16.7797 4.42578 15.5522 4.05095 14.2078ZM14.0625 19.9893C12.7097 20.3386 11.2903 20.3386 9.93752 19.9893C9.84161 19.963 9.74142 19.956 9.64279 19.9688C9.54415 19.9815 9.44903 20.0137 9.36297 20.0636C9.27691 20.1134 9.20163 20.1799 9.1415 20.2591C9.08137 20.3384 9.0376 20.4288 9.01273 20.5251C8.98786 20.6214 8.9824 20.7216 8.99665 20.8201C9.01091 20.9185 9.04459 21.0131 9.09576 21.0984C9.14692 21.1837 9.21454 21.2579 9.29467 21.3169C9.3748 21.3758 9.46585 21.4181 9.56252 21.4415C11.1614 21.8539 12.8387 21.8539 14.4375 21.4415C14.6274 21.3894 14.7892 21.2646 14.8879 21.0942C14.9866 20.9238 15.0143 20.7215 14.9651 20.5308C14.9159 20.3401 14.7936 20.1765 14.6247 20.0752C14.4559 19.9739 14.2539 19.943 14.0625 19.9893ZM20.8735 13.6875C20.7785 13.6611 20.6792 13.6538 20.5814 13.6658C20.4836 13.6778 20.3891 13.709 20.3033 13.7576C20.2175 13.8062 20.1422 13.8712 20.0816 13.9489C20.021 14.0267 19.9762 14.1156 19.95 14.2106C19.5761 15.5561 18.8664 16.7846 17.8875 17.7806C17.8185 17.8509 17.764 17.9341 17.7272 18.0255C17.6903 18.1168 17.6718 18.2145 17.6727 18.313C17.6737 18.4115 17.694 18.5089 17.7325 18.5995C17.771 18.6902 17.8271 18.7724 17.8974 18.8414C17.9677 18.9104 18.0509 18.9649 18.1422 19.0017C18.2336 19.0386 18.3313 19.0571 18.4298 19.0562C18.5283 19.0552 18.6257 19.0349 18.7163 18.9964C18.807 18.9579 18.8891 18.9018 18.9581 18.8315C20.1146 17.6542 20.9533 16.2027 21.3956 14.6128C21.4223 14.5177 21.4299 14.4184 21.4181 14.3204C21.4062 14.2224 21.3752 14.1277 21.3267 14.0417C21.2781 13.9558 21.2131 13.8802 21.1354 13.8194C21.0576 13.7586 20.9686 13.7138 20.8735 13.6875ZM19.9491 9.7931C19.9754 9.88802 20.0202 9.97682 20.0809 10.0544C20.1415 10.132 20.2169 10.197 20.3027 10.2454C20.3884 10.2939 20.4829 10.3251 20.5806 10.337C20.6784 10.349 20.7776 10.3416 20.8725 10.3153C20.9674 10.2889 21.0562 10.2442 21.1339 10.1835C21.2115 10.1228 21.2764 10.0475 21.3249 9.96172C21.3734 9.87597 21.4045 9.78151 21.4165 9.68373C21.4284 9.58595 21.4211 9.48677 21.3947 9.39185C20.9523 7.80198 20.1136 6.3504 18.9572 5.1731C18.8881 5.10286 18.8059 5.04692 18.7152 5.00846C18.6245 4.97 18.5272 4.94978 18.4287 4.94895C18.3302 4.94812 18.2325 4.96671 18.1411 5.00364C18.0498 5.04057 17.9667 5.09512 17.8964 5.16419C17.8262 5.23326 17.7702 5.31548 17.7318 5.40617C17.6933 5.49686 17.6731 5.59424 17.6723 5.69274C17.6714 5.79124 17.69 5.88894 17.727 5.98026C17.7639 6.07158 17.8185 6.15474 17.8875 6.22497C18.8653 7.22055 19.5746 8.44788 19.9491 9.79216V9.7931Z"
|
||||
fill="#8155DD"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{(currentStep > step || currentStep == 4) && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1218 15.6557 10.039 15.6004 9.96938 15.5306L7.71938 13.2806C7.57865 13.1399 7.49959 12.949 7.49959 12.75C7.49959 12.551 7.57865 12.3601 7.71938 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44903 11.9996 8.6399 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.2891 9.14969 15.3718 9.09442 15.4628 9.0567C15.5539 9.01899 15.6515 8.99958 15.75 8.99958C15.8486 8.99958 15.9461 9.01899 16.0372 9.0567C16.1282 9.09442 16.2109 9.14969 16.2806 9.21937C16.3503 9.28906 16.4056 9.37178 16.4433 9.46283C16.481 9.55387 16.5004 9.65145 16.5004 9.75C16.5004 9.84855 16.481 9.94613 16.4433 10.0372C16.4056 10.1282 16.3503 10.2109 16.2806 10.2806Z"
|
||||
fill="#8155DD"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{step > currentStep && currentStep !== 4 && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25Z"
|
||||
fill="#172034"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-[4px] text-[10px] text-[#AAA] tracking-[1.2px]">
|
||||
STEP {step}
|
||||
</div>
|
||||
<div
|
||||
className={clsx('text-[12px]', step > currentStep && 'text-[#64748B]')}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const StepSpace: FC = () => {
|
||||
return (
|
||||
<div className="flex-1 justify-center items-center flex px-[20px]">
|
||||
<div className="h-[1px] w-full bg-white"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SkipOnboarding: FC = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const onSkip = useCallback(() => {
|
||||
const keys = Array.from(searchParams.keys());
|
||||
|
||||
const buildNewQuery = keys.reduce((all, current) => {
|
||||
if (current === 'onboarding') {
|
||||
return all;
|
||||
}
|
||||
const value = searchParams.get(current);
|
||||
all.push(`${current}=${value}`);
|
||||
return all;
|
||||
}, [] as string[]).join('&');
|
||||
router.push(`?${buildNewQuery}`);
|
||||
}, [searchParams]);
|
||||
return (
|
||||
<Button secondary={true} className="border-[2px] border-[#506490]" onClick={onSkip}>Skip onboarding</Button>
|
||||
);
|
||||
}
|
||||
const Welcome: FC = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
const ref = useRef();
|
||||
const router = useRouter();
|
||||
|
||||
const nextStep = useCallback(() => {
|
||||
setStep(step + 1);
|
||||
}, [step]);
|
||||
|
||||
const firstNext = useCallback(() => {
|
||||
// @ts-ignore
|
||||
ref?.current?.click();
|
||||
nextStep();
|
||||
}, [nextStep]);
|
||||
|
||||
const goToAnalytics = useCallback(() => {
|
||||
router.push('/analytics');
|
||||
}, []);
|
||||
|
||||
const goToLaunches = useCallback(() => {
|
||||
router.push('/launches');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-[#172034] relative">
|
||||
<h1 className="text-[24px]">Onboarding</h1>
|
||||
<div className="flex">
|
||||
<Step title="Profile" step={1} currentStep={step} />
|
||||
<StepSpace />
|
||||
<Step title="Connect Github" step={2} currentStep={step} />
|
||||
<StepSpace />
|
||||
<Step title="Connect Channels" step={3} currentStep={step} />
|
||||
<StepSpace />
|
||||
<Step title="Finish" step={4} currentStep={step} />
|
||||
</div>
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div>
|
||||
<SettingsPopup getRef={ref} />
|
||||
</div>
|
||||
<div className="flex justify-end gap-[8px]">
|
||||
<SkipOnboarding />
|
||||
<Button onClick={firstNext}>Next</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<div>
|
||||
<GithubOnboarding />
|
||||
<div className="flex justify-end gap-[8px]">
|
||||
<SkipOnboarding />
|
||||
<Button onClick={nextStep}>Next</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{step === 3 && (
|
||||
<div>
|
||||
<ConnectChannels />
|
||||
<div className="flex justify-end gap-[8px]">
|
||||
<SkipOnboarding />
|
||||
<Button onClick={nextStep}>Next</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<div className="items-center justify-center flex flex-col gap-[24px]">
|
||||
<div className="items-center justify-center flex flex-col">
|
||||
<img src="/success.svg" alt="success" />
|
||||
</div>
|
||||
<div className="text-[18px] text-center">
|
||||
You are done, you can now video your GitHub analytics or<br />schedule new posts
|
||||
</div>
|
||||
<div className="flex gap-[8px]">
|
||||
<Button onClick={goToAnalytics} secondary={true} className="border-[2px] border-[#506490]">View Analytics</Button>
|
||||
<Button onClick={goToLaunches}>Schedule a new post</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Onboarding: FC = () => {
|
||||
const query = useSearchParams();
|
||||
const modal = useModals();
|
||||
const modalOpen = useRef(false);
|
||||
useEffect(() => {
|
||||
const onboarding = query.get('onboarding');
|
||||
if (!onboarding) {
|
||||
modalOpen.current = false;
|
||||
modal.closeAll();
|
||||
return;
|
||||
}
|
||||
|
||||
modalOpen.current = true;
|
||||
modal.openModal({
|
||||
title: '',
|
||||
withCloseButton: false,
|
||||
closeOnEscape: false,
|
||||
classNames: {
|
||||
modal: 'bg-transparent text-white',
|
||||
},
|
||||
size: '100%',
|
||||
children: <Welcome />,
|
||||
});
|
||||
}, [query]);
|
||||
return null;
|
||||
};
|
||||
|
|
@ -43,51 +43,6 @@ const ConnectedComponent: FC<{
|
|||
);
|
||||
};
|
||||
|
||||
const RepositoryComponent: FC<{
|
||||
id: string;
|
||||
login?: string;
|
||||
setRepo: (name: string) => void;
|
||||
}> = (props) => {
|
||||
const { setRepo, login, id } = props;
|
||||
const [repositories, setRepositories] = useState<
|
||||
Array<{ id: string; name: string }>
|
||||
>([]);
|
||||
const fetch = useFetch();
|
||||
|
||||
const loadRepositories = useCallback(async () => {
|
||||
const { repositories: repolist } = await (
|
||||
await fetch(`/settings/organizations/${id}/${login}`)
|
||||
).json();
|
||||
setRepositories(repolist);
|
||||
}, [login, id]);
|
||||
|
||||
useEffect(() => {
|
||||
setRepositories([]);
|
||||
if (!login) {
|
||||
return;
|
||||
}
|
||||
|
||||
loadRepositories();
|
||||
}, [login]);
|
||||
if (!login || !repositories.length) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<select
|
||||
className="border border-fifth bg-transparent h-[40px]"
|
||||
onChange={(e) => setRepo(e.target.value)}
|
||||
>
|
||||
<option value="">Choose a repository</option>
|
||||
{repositories.map((o) => (
|
||||
<option key={o.id} value={o.name}>
|
||||
{o.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
|
||||
const ConnectComponent: FC<{
|
||||
setConnected: (name: string) => void;
|
||||
id: string;
|
||||
|
|
@ -170,13 +125,21 @@ const ConnectComponent: FC<{
|
|||
export const GithubComponent: FC<{
|
||||
organizations: Array<{ login: string; id: string }>;
|
||||
github: Array<{ id: string; login: string }>;
|
||||
mutate: any;
|
||||
}> = (props) => {
|
||||
if (typeof window !== 'undefined' && window.opener) {
|
||||
window.close();
|
||||
}
|
||||
const { github, organizations } = props;
|
||||
const [githubState, setGithubState] = useState(github);
|
||||
useEffect(() => {
|
||||
setGithubState(github);
|
||||
}, [github]);
|
||||
const fetch = useFetch();
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
const { url } = await (await fetch('/settings/github/url')).json();
|
||||
window.location.href = url;
|
||||
window.open(url, "Github Connect", "width=700,height=700");
|
||||
}, []);
|
||||
|
||||
const setConnected = useCallback(
|
||||
|
|
|
|||
Loading…
Reference in New Issue